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>

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>

Disable header and footer

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 Radius

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
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-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.

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