Card

Groups related content under a title, as one block on a page.

<script setup lang="ts">
import { FsCard } from '@fivespark/ui'
</script>

<template>
  <FsCard title="Openstaande offertes" description="4 offertes wachten op akkoord" class="w-full max-w-sm">
    <p class="type-figure">€ 18.420</p>
  </FsCard>
</template>

Usage

<script setup lang="ts">
import { FsCard } from '@fivespark/ui'
</script>

<template>
  <FsCard title="Openstaande offertes">
    <p>4 offertes wachten op akkoord.</p>
  </FsCard>
</template>

Give level to make the title a heading when the card introduces a topic in the page's outline; leave it out in a list of many cards. For a value with a label, use Stat.

Examples

With an action and a footer

The action slot holds one control at the end of the header; the footer slot sits below the body.

<script setup lang="ts">
import { FsButton, FsCard, FsLink } from '@fivespark/ui'
</script>

<template>
  <FsCard title="Openstaande offertes" :level="3" description="4 offertes wachten op akkoord" class="w-full max-w-sm">
    <template #action><FsButton icon="ellipsis" label="Meer acties voor openstaande offertes" variant="ghost" size="dense" /></template>
    <p class="type-figure">€ 18.420</p>
    <p class="type-meta text-text-muted">Oudste offerte 12 dagen open</p>
    <template #footer><FsLink to="/offertes">Alle offertes</FsLink></template>
  </FsCard>
</template>

As a link

Give to or href and the whole card leads there. A linked card needs a title, and has no action slot and no control in its footer.

<script setup lang="ts">
import { FsCard } from '@fivespark/ui'
</script>

<template>
  <FsCard title="Raamovereenkomst 2026" description="Acme BV, geldig tot 31 december" to="/contracten/acme" class="w-full max-w-sm" />
</template>

Flush

flush removes the body's padding, so a list, a table or an image runs to the edge.

<script setup lang="ts">
import { FsCard } from '@fivespark/ui'
</script>

<template>
  <FsCard flush title="Laatste orders" class="w-full max-w-sm">
    <ul class="type-body divide-y divide-border">
      <li class="px-region py-2">Order 2026-0412, Acme BV</li>
      <li class="px-region py-2">Order 2026-0411, De Vries Bouw</li>
      <li class="px-region py-2">Order 2026-0410, Van Dijk Kozijnen</li>
    </ul>
  </FsCard>
</template>

Dense

<script setup lang="ts">
import { FsCard } from '@fivespark/ui'
</script>

<template>
  <FsCard size="dense" title="Openstaande offertes" class="w-full max-w-sm">
    <p class="type-figure">€ 18.420</p>
  </FsCard>
</template>

API Reference

FsCard

Prop	Type	Default	Description
title	string		The card's title. Required when the card is a link.
level	2 | 3 | 4 | 5 | 6		Makes the title a heading of this level. Give one when the card introduces a topic in the page's outline; leave it out in a list of many cards.
description	string		One line or two below the title.
size	"default" | "dense"	"default"	`dense` beside dense controls.
flush	boolean	false	The body has no padding, so a table or an image runs to the card's edge.
to	string | object		Makes the card a link, through its title: navigates through the app's link component or a plain `<a>`. A linked card holds no other control.
href	string		Makes the card a link, through its title, with a plain `<a>`: another site, or a file.
newTab	boolean	false	Opens the link in a new tab, with an icon and hidden text that say so.
newTabText	string		Replaces the link's hidden new-tab text.

Slot	Props	Description
action	any	A control at the end of the header, such as a menu button. Not in a card that is a link.
default	any	The body.
footer	any	Below the body: the card's actions or a note.