Card

A flexible container with optional header, content, and footer used to group related information.

Basic Usage

Card content

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.
Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card>
    <template #content>
      <div>Card content</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
  </spr-card>
</template>

Tone

Cards support different tones to indicate various states or importance levels. The available tones are: plain, neutral, success, information, pending, caution, accent, and danger.

Plain

Neutral

Success

Information

Pending

Caution

Accent

Danger

Header and Footer

Passing a title automatically displays the header. Use the footer slot to add a footer.

Card Title

Card content

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="Card Title">
    <template #content>
      <div>Card content</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
    <template #footer>
      <div class="spr-ms-auto spr-flex spr-items-center spr-gap-size-spacing-3xs">
        <spr-button variant="secondary">secondary</spr-button>
        <spr-button tone="success">primary</spr-button>
      </div>
    </template>
  </spr-card>
</template>

Force Hide Header and Footer

Pass show-header and show-footer props as false to hide the header and footer even if content is provided.

Card content

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="Card Title" :show-header="false" :show-footer="false">
    <template #content>
      <div>Card content</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
    <template #footer>
      <div class="spr-ms-auto spr-flex spr-items-center spr-gap-size-spacing-3xs">
        <spr-button variant="secondary">secondary</spr-button>
        <spr-button tone="success">primary</spr-button>
      </div>
    </template>
  </spr-card>
</template>

Icon

Pass a header-icon prop to display an icon in the header. The title prop is required for the icon to be visible.

Card Title

Card content

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="Card Title" header-icon="ph:check-circle-duotone">
    <template #content>
      <div>Card content</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
    <template #footer>
      <div class="spr-ms-auto spr-flex spr-items-center spr-gap-size-spacing-3xs">
        <spr-button variant="secondary">secondary</spr-button>
        <spr-button tone="success">primary</spr-button>
      </div>
    </template>
  </spr-card>
</template>

Subtitle

Pass a subtitle prop to display a subtitle below the title. The title prop is required.

Card Title

This is a subtitle example

Card content

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="Card Title" subtitle="This is a subtitle example" header-icon="ph:check-circle-duotone">
    <template #content>
      <div>Card content</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
    <template #footer>
      <div class="spr-ms-auto spr-flex spr-items-center spr-gap-size-spacing-3xs">
        <spr-button variant="secondary">secondary</spr-button>
        <spr-button tone="success">primary</spr-button>
      </div>
    </template>
  </spr-card>
</template>

Custom Header

Use the header slot to add a content to the header. It will be placed next to the title.

Card Title

9

Card content

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="Card Title" header-icon="ph:newspaper-duotone">
    <template #header>
      <div class="spr-flex spr-grow spr-items-center spr-justify-between">
        <spr-badge text="9" variant="danger" size="small" />
        <spr-button variant="secondary" size="small">Secondary</spr-button>
      </div>
    </template>
    <template #content>
      <div>Card content</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
  </spr-card>
</template>

If the title prop is omitted, the header slot can fully customize the header.

Card content

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card>
    <template #header>
      <div>
        <img
          src="@/assets/images/banner-sample.svg"
          class="spr-pointer-events-none spr-h-[18px] spr-w-full spr-rounded-t-border-radius-xl spr-object-cover"
        />
      </div>
    </template>
    <template #content>
      <div>Card content</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
  </spr-card>
</template>

Border Width

Pass a border-width prop to customize the border width of the card. Accepts any valid CSS width value.

Card Title

Card content

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="Card Title" border-width="6px">
    <template #content>
      <div>Card content</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
    <template #footer>
      <div class="spr-ms-auto spr-flex spr-items-center spr-gap-size-spacing-3xs">
        <spr-button variant="secondary">secondary</spr-button>
        <spr-button tone="success">primary</spr-button>
      </div>
    </template>
  </spr-card>
</template>

Border Radius

Pass a border-radius-size prop to customize the border radius of the card. Accepts predefined sizes: xl, lg, md, sm, xs, and 2xs.

Card Title

Card content

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="Card Title" border-radius-size="sm">
    <template #content>
      <div>Card content</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
    <template #footer>
      <div class="spr-ms-auto spr-flex spr-items-center spr-gap-size-spacing-3xs">
        <spr-button variant="secondary">secondary</spr-button>
        <spr-button tone="success">primary</spr-button>
      </div>
    </template>
  </spr-card>
</template>

API Reference

Props

Name	Type	Default	Description
id	string	''	Unique identifier for the input element. Used for associating the input with a label for accessibility.
tone	'plain' | 'neutral' | 'success' | 'information' | 'pending' | 'caution' | 'accent' | 'danger'	''	Sets the card's title in the header section.
title	string	''	Sets the card's title in the header section.
subtitle	string	''	Sets the card's subtitle displayed below the title. Requires title to be visible.
header-icon	string	''	Displays an icon in the header using the Iconify icon name format. Requires title to be visible.
show-header	boolean	true	Controls the visibility of the header section.
show-footer	boolean	true	Controls the visibility of the footer section.
border-width	Width Style	'1px'	Sets the border width of the card.
border-radius-size	'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs'	'xl'	Sets the border radius of the card including header and footer.
has-collapsible	boolean	false	Indicates that the card is used with a collapsible component, which affects the border styling.
is-collapsible-open	boolean	false	Tracks whether the content is expanded when used with a collapsible component to apply appropriate border styles.
has-content-padding	boolean	true	Controls whether padding is applied to the content area of the card.
flexbox	boolean	false	When true, applies flexbox layout to the card, making it a flex container with column direction.
customBorderSize	string | null	null	Sets a custom border size for the card. If not set, the default border size will be used.

Slots

Name	Description
header	Custom content for the card header. Will be displayed alongside the title if provided, or can completely replace the default header if no title is set.
content	The main content of the card. This slot is recommended for organizing content within the card.
default	Alternative slot for content. Only used if no content slot is provided.
footer	Custom content for the card footer. Typically used for action buttons or summary information.

Product Uses