Components

Feature card

Highlights a product feature or service benefit, often used in marketing sections or landing pages.

Component

View code

Show playground

Feature description

Props	Default	Type
`title`	`Feature title`	`string`
`description`	`Feature description`	`string`
`icon`	—	`string`
`containedIconShape`	`IconContainerShape.CIRCLE`	`IconContainerShape`
`containedIconStyleType`	`IconContainerStyleType.FILLED`	`IconContainerStyleType`
`containedIconColor`	`ColorAccent.SECONDARY_BRAND`	`ColorAccent`
`align`	`Align.LEFT`	`Align`

Name	Description
`footer`	Template to render footer content. Typically used for action buttons.

 <template>
    <FeatureCard>
        <template #footer>
            <!-- Insert content here -->
        </template>
    </FeatureCard>
</template>

Sets the title of the feature.

 <template>
    <FeatureCard 
        title="Feature title"
    />
</template>

Sets the description of the feature.

 <template>
    <FeatureCard 
        description="Feature description"
    />
</template>

Sets the icon of the feature. If not provided, the icon will not appear at all.

 <template>
    <FeatureCard 
        icon="mdi:help"
    />
</template>

Stablishes the shape of the contained icon. Uses the IconContainerShape enum.

 <template>
    <FeatureCard 
        :containedIconShape="IconContainerShape.CIRCLE"
    />
</template>

Value	Description
`CIRCLE`	Rounded icon container shape
`SQUARE`	Square icon container shape

Configures the style type of the contained icon. Uses the IconContainerStyleType enum.

 <template>
    <FeatureCard 
        :containedIconStyleType="IconContainerStyleType.FILLED"
    />
</template>

Value	Description
`FLAT`	Uses a soft background for the icon container
`FILLED`	Uses a bold background for the icon container

Configures the color of the contained icon. Uses the ColorAccent enum.

 <template>
    <FeatureCard 
        :containedIconColor="ColorAccent.SECONDARY_BRAND"
    />
</template>

Sets the horizontal alignment of the content. Uses the Align enum.

 <template>
    <FeatureCard 
        :align="Align.LEFT"
    />
</template>

Value	Description
`LEFT`	Content aligns to the left side of the card.
`CENTER`	Content aligns to the center of the card.