Card

A raised surface that groups related content, with an optional heading.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Card-0.tess

<template>
  <Card>
    <span slot="header">Billing</span>
    Your plan renews on the first of the month.
  </Card>
</template>

Installation

CLIManual

npmpnpmyarnbun

npx @pixelscriptio/tessera add Card

pnpm exec tessera add Card

yarn tessera add Card

bunx @pixelscriptio/tessera add Card

Works with Tessera 0.9.0 or newer.

Copy and paste the code into your project

Put it in system/components.

system/components/Card.tess

<contract>
{
  "name": "Card",
  "role": "generic",
  "description": "A raised surface that groups related content, with an optional heading.",
  "parts": ["root", "header", "body"],
  "variants": {
    "padding": ["md", "sm", "lg"] // first value is the default
  },
  "slots": {
    "default": "the card content",
    "header": "an optional heading"
  },
  "contrast": [{ "foreground": "body", "background": "root" }],
  "preview": {
    "slots": {
      "default": "A card holds related content."
    }
  }
}
</contract>

<template>
  <div class="root">
    <div class="header"><slot name="header" /></div>
    <div class="body"><slot /></div>
  </div>
</template>

<style>
.root {
  display: flex;
  flex-direction: column;
  gap: $space.3;
  padding: $space.6;
  border: 1px solid $color.border.default;
  border-radius: $radius.lg;
  background: $color.surface.raised;
  color: $color.text.default;
  box-shadow: $shadow.sm;

  &[data-padding='sm'] {
    padding: $space.4;
  }

  &[data-padding='lg'] {
    padding: $space.8;
  }
}

.header {
  font-size: $font.size.lg;
  font-weight: 600;
}

.header:empty {
  display: none;
}

.body {
  color: $color.text.muted;
  font-size: $font.size.base;
  line-height: 1.6;
}
</style>

Check your design tokens
Your design system needs these. tessera add reports the ones that are missing; by hand, run npx @pixelscriptio/tessera check.
color.border.default color.surface.raised color.text.default color.text.muted font.size.base font.size.lg radius.lg shadow.sm space.3 space.4 space.6 space.8

Usage

Using Card

A raised surface that groups related content, with an optional heading.

Put the heading in the header slot; it is left out when empty.
padding is md by default, sm for dense lists and lg for a hero.
A card has no behavior of its own. Put a Button or a link inside for something to do.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Card-0.tess

<template>
  <Card>
    <span slot="header">Billing</span>
    Your plan renews on the first of the month.
  </Card>
</template>

API reference

Variants

Variant	Values
`padding`	`md` default `sm` `lg`

Slots

Slot	Content
`default`	the card content
`header`	an optional heading

Anatomy


Role	`generic`
Parts	`root` `header` `body`

Design tokens it uses

Your design system needs these. tessera add checks that it has them, and can add the ones it lacks.

color.border.default color.surface.raised color.text.default color.text.muted font.size.base font.size.lg radius.lg shadow.sm space.3 space.4 space.6 space.8

Checksum

b664e33160dc80b8739f0c106707ac291bd32c4508b78c60f42e3963ae4456cd