Card

Each part — title, subtitle, body and actions — is a prop for plain text or a slot for anything else. Parts you leave out aren’t rendered.

Consultation

30 min, online

We'll go through your project and pick the right components.

---
import { Button, Card } from 'bws-astro-ui';
---

<Card
  title="Consultation"
  subtitle="30 min, online"
  text="We'll go through your project…"
>
  <Fragment slot="actions">
    <Button variant="text">Later</Button>
    <Button variant="text">Book</Button>
  </Fragment>
</Card>

Variants

Elevated

With a shadow — the default.

Flat

No shadow, no border.

Outlined

A border instead of a shadow.

Tonal

A light tint of the text color.

Colors

With a color, elevated and flat cards get a solid background; outlined and tonal take the color for the border or tint and the text.

Elevated, primary

Solid background, text in on-primary.

Tonal, secondary

Tinted background and colored text.

Outlined, success

Colored border and text.

<Card color="primary" title="Elevated, primary" text="…" />
<Card variant="tonal" color="secondary" title="Tonal, secondary" text="…" />

Slots

Favourites

3 saved items

Warszawa
Kraków
Gdańsk

<Card variant="outlined" rounded="xl">
  <div slot="title" class="flex items-center gap-2">
    <Icon icon={Heart} size="sm" /> Favourites
  </div>
  <Fragment slot="subtitle">3 saved items</Fragment>
  <ul>…</ul>
  <Button slot="actions" variant="text">
    Show all
  </Button>
</Card>

The actions stay at the bottom when cards in a grid stretch to the same height.

API

Prop	Type	Default
`title`	`string`	—
`subtitle`	`string`	—
`text`	`string` — body text	—
`variant`	`elevated` · `flat` · `outlined` · `tonal`	`elevated`
`color`	`primary` · `secondary` · `success` · `warning` · `info` · `error`	— (neutral surface)
`rounded`	`xs` · `sm` · `default` · `lg` · `xl` · `full`	`default`
`titleTag`	`h2` … `h6` · `div` — put the title in the heading outline	`div`
`class`	`string`	—

Any other attribute goes to the card’s <div> — e.g. data-theme="dark" for a dark card.

Slot	Content
`title`	replaces `title`
`subtitle`	replaces `subtitle`
default	the body — replaces `text`
`actions`	buttons at the bottom

Created by