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>

Slots

Name	Description
header	Custom content for the header.
content	The main content of the card.
footer	Custom content for the footer.

API Reference

Name	Type	Default	Description
title	string	-	Sets the card's title.
subtitle	string	-	Sets the card's subtitle. Requires title to be visible.
header-icon	string	-	Displays an icon in the header. Requires title to be visible.
show-header	boolean	true	Controls the visibility of the header.
show-footer	boolean	true	Controls the visibility of the footer.
border-radius-size	string	xl	Sets the border radius of the card including header and footer. Accepts one of: xl, lg, md, sm, xs, 2xs.
has-collapsible	boolean	false	Apply when use with collapsible component
is-collapsible-open	boolean	false	Apply when use with collapsible component to track if content is expanded or not and apply border style changes

Product Uses