Card

SCard is a card container with header / content / footer slots and style variants (border or shadow). It uses semantic tokens; the root is polymorphic (as), so a card can also be a selectable item or a link.

Variants

Outline

A card with a border.

Elevated

A card with a shadow.

<template>
  <SCard variant="elevated">
    <template #header>Title</template>
    Card content.
    <template #footer><SButton size="sm">Action</SButton></template>
  </SCard>
</template>

Square corners

The square prop removes the frame rounding (the radius is on by default).

Regular

Rounded corners.

Square

Square corners.

<template>
  <SCard
    square
    variant="outline"
  >
    <template #header>Square</template>
    Square corners.
  </SCard>
</template>

Content only

A card without a header or footer, just the body.

<template>
  <SCard>A card without a header or footer.</SCard>
</template>

Interactivity

interactive adds hover and focus feedback, selected renders the selected look, disabled dims the card and disables the pointer. The clickability itself comes from the as prop and the content: a card can be a link (as="a"), a button (as="button"), or a control wrapper (as="label").

Hover over me

Selected

Unavailable

Link card

<template>
  <SCard interactive>Hover over me</SCard>
  <SCard
    interactive
    selected
  >
    Selected
  </SCard>
  <SCard
    interactive
    disabled
  >
    Unavailable
  </SCard>
  <SCard
    as="a"
    href="/orders/1024"
    interactive
  >
    Link card
  </SCard>
</template>

Custom content layout

The default slot is wrapped in .s-card__body with its own padding. The body-class prop passes a class to that wrapper, so the content can be laid out as a row or a grid without rules targeting the internal class. The --s-card-padding variable sets the padding of the header, body, and footer: setting it on the card itself is enough, and nested cards do not inherit it.

Cargo

Weight

12 kg

Dimensions

40 × 30 × 20 cm

Content flush with the edges

<template>
  <SCard body-class="cargo">
    <template #header>Cargo</template>
    <CargoField label="Weight" />
    <CargoField label="Dimensions" />
  </SCard>

  <SCard class="flush">
    <MapPreview />
  </SCard>
</template>

<style>
.cargo {
  display: flex;
  gap: var(--s-space-3);
}

.flush {
  --s-card-padding: 0;
}
</style>

Selection card

The interactive prop adds hover and focus feedback, selected renders the selected look. The clickability comes from as: a label around a native radio is the most reliable option, because arrow keys, toggling, and screen reader announcements work without a custom keyboard handler.

Size S

up to 5 kg · 30 × 20 × 10 cm

Size M

up to 15 kg · 40 × 30 × 20 cm

Size L

up to 30 kg · 60 × 40 × 30 cm

<template>
  <div
    role="radiogroup"
    aria-label="Parcel size"
  >
    <SCard
      v-for="size in sizes"
      :key="size.code"
      as="label"
      interactive
      :selected="picked === size.code"
    >
      <input
        v-model="picked"
        type="radio"
        name="typosize"
        :value="size.code"
        class="s-sr-only"
      />
      Size {{ size.code }}
    </SCard>
  </div>
</template>

The radio is hidden with the .s-sr-only class: it removes the element from the screen but keeps it in the flow, so focus, keyboard, and screen readers keep working.

Elevation

The elevated variant provides a shadow, but the shadow is configured separately: flat removes it from any variant, and elevation sets a level even on an outlined card. See Elevation for details.

elevated

elevated + flat

elevation 3

Selected, shadow stays

<template>
  <SCard
    variant="elevated"
    flat
  >
    No shadow
  </SCard>
  <SCard :elevation="3">Above the rest</SCard>
</template>

API

Props

Name	Type	Default	Description
as	| "label" | "button" | "div" | "a" | "form" | "h2" | "h3" | "img" | "input" | "li" | "nav" | "ol" | "p" | "span" | "svg" | "ul" | "template" | { toString: ()) }	"div"	Root tag. label wraps a native radio/checkbox to get a selectable card with keyboard support and screen reader announcements out of the box; a/button for a link card.
variant	"outline" | "elevated"	"outline"	Style: border (outline) or shadow (elevated).
square	boolean	undefined	Square corners: removes the border radius.
interactive	boolean	false	The card responds to hover and focus: state layer, pointer cursor, focus ring. It does not make the card clickable by itself — set as and a handler or put a control inside.
selected	boolean	false	The card is selected: accent border and data-selected for custom styles.
disabled	boolean	false	The card is disabled: dimmed and ignores the pointer.
body-class	| null | string | false | Record	undefined	Class of the content wrapper (.s-card__body) for a custom layout inside the card. Header, body and footer padding is set by the --s-card-padding variable on the card itself.
flat	boolean	undefined	Removes the shadow. Overridden by the elevation prop when it is set.
elevation	0 | 1 | 2 | 3 | 4 | 5	undefined	Shadow level 0–5 (scale); 0 means no shadow. Overrides flat.

Slots

Name	Description
header	Card header.
default	Main content.
footer	Card footer.