Components

Feature

Highlight key features with optional icons and descriptions to showcase capabilities.

Component

View code

Show playground

Feature title

This is a description of the feature.

Props

Props	Default	Type
`title`	`'Title'`	`string`
`description`	`'This is a description of the feature.'`	`string`
`icon`	`'mdi:star-circle-outline'`	`string`
`iconColor`	`'primary-brand'`	`ColorAccent`
`iconClass`	—	`string`

Usage

title

Displays the title.

 <template>
    <Feature title="Replace me" />
</template>

Type: text
Default: Title

description

Displays the description.

 <template>
    <Feature description="This is a description of the feature." />
</template>

Type: string
Default: This is a description of the feature.

icon

Displays the icon.

 <template>
    <Feature icon="mdi:star-circle-outline" />
</template>

Type: string
Default: mdi:star-circle-outline

iconColor

Sets the color of the icon. Uses the ColorAccent enum.

 <template>
    <Feature :iconColor="ColorAccent.PRIMARY_BRAND" />
</template>

- **Type:** `ColorAccent`
- **Default:** `ColorAccent.SECONDARY_BRAND`

#### Options
::options-table
---
options: [
    {
        value: "NEUTRAL",
        description: "neutral",
    },
    {
        value: "SUCCESS",
        description: "success",
    },
    {
        value: "WARNING",
        description: "warning",
    },
    {
        value: "DANGER",
        description: "danger",
    },
    {
        value: "INFO",
        description: "info",
    },
    {
        value: "PRIMARY_BRAND",
        description: "primary brand",
    },
    {
        value: "SECONDARY_BRAND",
        description: "secondary brand",
    },
]
---
::

### iconClass

Sets custom class to the icon.

```vue
<template>
    <Feature 
        icon="mdi:star-circle-outline" 
        iconClass="custom-icon-class" 
    />
</template>

Type: string