Metric card

Component

Props

Slots

 <template>
    <MetricCard
        title="Revenue"
        :amount="1327"
    >
        <template #rightTop>
            <Badge text="Live" />
        </template>

        <template #footer>
            <ActionButton
                text="View Details"
                :iconPosition="IconPosition.RIGHT"
                icon="mdi:arrow-right"
                :actionType="ButtonActionType.LINK"
                to="link"
            />
        </template>
    </MetricCard>
</template>
 

Usage

styleType

Sets the visual style of the card. It accepts values from the MetricCardStyle enum.

 <template>
    <MetricCard
        :styleType="MetricCardStyle.PRIMARY_BRAND_SOFT"
    />
</template>
 

• Type: MetricCardStyle
• Default: MetricCardStyle.DEFAULT

Options

title

Sets the title of the metric card.

 <template>
    <MetricCard
        title="Revenue"
    />
</template>
 

• Type: string
• Default: 'Metric title'

icon

Sets the icon shown in the card header. When using a filled styleType, it renders as a plain icon; otherwise it is wrapped in a ContainedIcon.

 <template>
    <MetricCard
        icon="mdi:chart-line"
    />
</template>
 

• Type: string

backgroundIcon

Sets an optional decorative icon rendered as a large, semi-transparent background element on the right side of the card. It is only displayed when provided and inherits its color from the active styleType. It is hidden from assistive technologies (aria-hidden).

 <template>
    <MetricCard
        backgroundIcon="mdi:earth"
        :styleType="MetricCardStyle.PRIMARY_BRAND_FILLED"
        title="Global coverage"
        :amount="159"
        unit="M ha"
    />
</template>
 

• Type: string

backgroundIconPosition

Sets the vertical alignment of the background icon inside the card. It accepts values from the MetricCardBackgroundIconPosition enum.

 <template>
    <MetricCard
        backgroundIcon="mdi:earth"
        :backgroundIconPosition="MetricCardBackgroundIconPosition.TOP"
    />
</template>
 

• Type: MetricCardBackgroundIconPosition
• Default: MetricCardBackgroundIconPosition.BOTTOM

Options

backgroundIconContainerClass

Appends Tailwind utility classes to the background icon wrapper element. Use it to override defaults such as opacity-20 or to adjust position.

 <template>
    <MetricCard
        backgroundIcon="mdi:earth"
        backgroundIconContainerClass="opacity-10"
    />
</template>
 

• Type: string

backgroundIconClass

Appends Tailwind utility classes to the background Icon component. The defaults w-[80px]! h-[80px]! apply when this prop is omitted; values passed here are merged after the defaults, so they can override size.

 <template>
    <MetricCard
        backgroundIcon="mdi:earth"
        backgroundIconClass="w-[120px]! h-[120px]!"
    />
</template>
 

• Type: string

iconContainerShape

Sets the shape of the icon container when styleType is DEFAULT. It accepts values from the IconContainerShape enum and has no effect on other style types (which always render with a square container).

 <template>
    <MetricCard
        icon="mdi:chart-line"
        :iconContainerShape="IconContainerShape.CIRCLE"
    />
</template>
 

• Type: IconContainerShape
• Default: IconContainerShape.SQUARE

Options

iconContainerSize

Sets the size of the ContainedIcon container rendered for non-filled style types. It accepts values from the IconContainerSize enum and applies regardless of iconPosition.

 <template>
    <MetricCard
        icon="mdi:chart-line"
        :iconContainerSize="IconContainerSize.MD"
    />
</template>
 

• Type: IconContainerSize
• Default: IconContainerSize.SM

Options

iconSize

Sets the size of the plain icon rendered when using a filled styleType. It is passed as the size prop to the Icon component and applies regardless of iconPosition. Has no effect on non-filled styles, which use iconContainerSize instead. It accepts values from the IconSize enum.

 <template>
    <MetricCard
        icon="mdi:chart-line"
        :styleType="MetricCardStyle.NEUTRAL_FILLED"
        :iconSize="IconSize.LG"
    />
</template>
 

• Type: IconSize
• Default: IconSize.MD

iconPosition

Sets whether the icon appears before or after the title. It accepts values from the MetricCardIconPosition enum.

 <template>
    <MetricCard
        icon="mdi:chart-line"
        :iconPosition="MetricCardIconPosition.RIGHT"
    />
</template>
 

• Type: MetricCardIconPosition
• Default: MetricCardIconPosition.LEFT

Options

defaultStyleIconColor

Sets the icon color when styleType is DEFAULT. It accepts values from the ColorAccent enum and has no effect on other style types.

 <template>
    <MetricCard
        :defaultStyleIconColor="ColorAccent.SUCCESS"
    />
</template>
 

• Type: ColorAccent
• Default: ColorAccent.NEUTRAL

Options

defaultStyleIconContainerType

Sets the style type of the icon container when styleType is DEFAULT. It accepts values from the IconContainerStyleType enum and has no effect on other style types.

 <template>
    <MetricCard
        icon="mdi:chart-line"
        :defaultStyleIconContainerType="IconContainerStyleType.FLAT"
    />
</template>
 

• Type: IconContainerStyleType
• Default: IconContainerStyleType.FILLED

Options

amount

Sets the main metric value displayed prominently in the card body.

 <template>
    <MetricCard
        :amount="1327"
    />
</template>
 

• Type: string | number
• Default: 0

unit

Sets an optional unit shown next to the amount (e.g. /month). It is only rendered when provided.

 <template>
    <MetricCard
        :amount="80"
        unit="/month"
    />
</template>
 

• Type: string

featuredDescription

Sets an optional highlighted description rendered above the regular description in a stronger weight. It is only displayed when provided.

 <template>
    <MetricCard
        featuredDescription="+120 vs last period"
    />
</template>
 

• Type: string

description

Sets an optional description rendered below the featured description. It is only displayed when provided.

 <template>
    <MetricCard
        description="Last 30 days"
    />
</template>
 

• Type: string

trend

Sets an optional trend label rendered next to a directional icon. The trend row is only displayed when this prop is provided.

 <template>
    <MetricCard
        trend="+12%"
    />
</template>
 

• Type: string

trendDirection

Sets the direction of the trend, which determines both the icon and the text color. It accepts values from the MetricTrendDirection enum.

 <template>
    <MetricCard
        trend="+12%"
        :trendDirection="MetricTrendDirection.UP"
    />
</template>
 

• Type: MetricTrendDirection
• Default: MetricTrendDirection.UP

Options

customFilledColorClass

Sets the Tailwind background class applied when styleType is CUSTOM_FILLED. Use it to render the card with a custom filled background.

 <template>
    <MetricCard
        :styleType="MetricCardStyle.CUSTOM_FILLED"
        customFilledColorClass="bg-background-success-bold"
    />
</template>
 

• Type: string
• Default: 'bg-background-neutral-bold'

trendIconSize

Sets the size of the trend direction icon. It accepts values from the IconSize enum.

 <template>
    <MetricCard
        trend="+12%"
        :trendIconSize="IconSize.MD"
    />
</template>
 

• Type: IconSize
• Default: IconSize.SM

cardHeaderClass

Appends Tailwind utility classes to the CardHeader element.

 <template>
    <MetricCard
        cardHeaderClass="pb-0"
    />
</template>
 

• Type: string

cardBodyClass

Appends Tailwind utility classes to the CardBody element.

 <template>
    <MetricCard
        cardBodyClass="flex-col"
    />
</template>
 

• Type: string

cardTitleClass

Appends Tailwind utility classes to the CardTitle element.

 <template>
    <MetricCard
        cardTitleClass="text-base"
    />
</template>
 

• Type: string

amountClass

Appends Tailwind utility classes to the amount value span.

 <template>
    <MetricCard
        :amount="1327"
        amountClass="text-4xl"
    />
</template>
 

• Type: string

unitClass

Appends Tailwind utility classes to the unit span.

 <template>
    <MetricCard
        unit="month"
        unitClass="text-base"
    />
</template>
 

• Type: string

descriptionWrapperClass

Appends Tailwind utility classes to the wrapper element that contains both the featured description and the description.

 <template>
    <MetricCard
        description="Last 30 days"
        descriptionWrapperClass="gap-1"
    />
</template>
 

• Type: string

featuredDescriptionClass

Appends Tailwind utility classes to the featured description paragraph.

 <template>
    <MetricCard
        featuredDescription="+120 vs last period"
        featuredDescriptionClass="text-text-success"
    />
</template>
 

• Type: string

descriptionClass

Appends Tailwind utility classes to the description paragraph.

 <template>
    <MetricCard
        description="Last 30 days"
        descriptionClass="text-text-neutral-subtle"
    />
</template>
 

• Type: string

trendWrapperClass

Appends Tailwind utility classes to the trend row wrapper element.

 <template>
    <MetricCard
        trend="+12%"
        trendWrapperClass="mt-1"
    />
</template>
 

• Type: string

trendTextClass

Appends Tailwind utility classes to the trend label span.

 <template>
    <MetricCard
        trend="+12%"
        trendTextClass="font-bold"
    />
</template>
 

• Type: string