Components

Card

A surface that groups a header, body, and footer.

Usage

Basic

Deployment

Ship the current branch to production.

HTML

<bs:bsui-card>
  <bs:bsui-card-header>
    <bs:bsui-card-title label="Deployment" />
    <bs:bsui-card-description label="Ship the current branch to production." />
  </bs:bsui-card-header>
  <bs:bsui-card-content>
    <bs:bsui-input placeholder="Release name" />
  </bs:bsui-card-content>
  <bs:bsui-card-footer>
    <bs:bsui-button label="Deploy" />
  </bs:bsui-card-footer>
</bs:bsui-card>

Metric card

No footer, and the content holds the number rather than a form.

Active installs

Counted across every site on this licence.

12,480

+8.2%

Up from 11,530 at the end of last month.

HTML

<bs:bsui-card>
  <bs:bsui-card-header>
    <bs:bsui-card-title label="Active installs" />
    <bs:bsui-card-description label="Counted across every site on this licence." />
  </bs:bsui-card-header>
  <bs:bsui-card-content>
    <bs:bsui-stack direction="row" gap="3" align="center">
      <bs:bsui-text content="12,480" variant="heading" tag="p" />
      <bs:bsui-badge label="+8.2%" variant="success" />
    </bs:bsui-stack>
    <bs:bsui-text content="Up from 11,530 at the end of last month." variant="caption" />
  </bs:bsui-card-content>
</bs:bsui-card>

Card with media

An aspect ratio in the content keeps the image area a fixed shape.

Latest snapshot

Captured from the homepage after the last deploy.

Homepage

Taken 4 minutes ago

HTML

<bs:bsui-card>
  <bs:bsui-card-header>
    <bs:bsui-card-title label="Latest snapshot" />
    <bs:bsui-card-description label="Captured from the homepage after the last deploy." />
  </bs:bsui-card-header>
  <bs:bsui-card-content>
    <bs:bsui-aspect-ratio ratio="16/9" background="var(--color-surface)">
      <bs:bsui-text content="Homepage" variant="muted" />
    </bs:bsui-aspect-ratio>
    <bs:bsui-text content="Taken 4 minutes ago" variant="caption" />
  </bs:bsui-card-content>
  <bs:bsui-card-footer>
    <bs:bsui-button label="Open the site" variant="outline" size="sm" />
    <bs:bsui-button label="Recapture" variant="ghost" size="sm" />
  </bs:bsui-card-footer>
</bs:bsui-card>

Cards side by side

A stack turns cards into columns of equal height.

Starter

For a single site and the person who runs it.

99 euro a year

Studio

For agencies shipping client work every week.

249 euro a year

HTML

<bs:bsui-stack direction="row" gap="4" align="stretch">
  <bs:bsui-card>
    <bs:bsui-card-header>
      <bs:bsui-card-title label="Starter" />
      <bs:bsui-card-description label="For a single site and the person who runs it." />
    </bs:bsui-card-header>
    <bs:bsui-card-content>
      <bs:bsui-text content="99 euro a year" variant="title" tag="p" />
    </bs:bsui-card-content>
    <bs:bsui-card-footer>
      <bs:bsui-button label="Choose Starter" variant="outline" />
    </bs:bsui-card-footer>
  </bs:bsui-card>
  <bs:bsui-card>
    <bs:bsui-card-header>
      <bs:bsui-card-title label="Studio" />
      <bs:bsui-card-description label="For agencies shipping client work every week." />
    </bs:bsui-card-header>
    <bs:bsui-card-content>
      <bs:bsui-text content="249 euro a year" variant="title" tag="p" />
    </bs:bsui-card-content>
    <bs:bsui-card-footer>
      <bs:bsui-button label="Choose Studio" />
    </bs:bsui-card-footer>
  </bs:bsui-card>
</bs:bsui-stack>

Anatomy

Card is composed of the blocks below. Each one is a separate block that only renders inside its parent.

bsui/card
bsui/card-content
bsui/card-footer
bsui/card-header
bsui/card-description
bsui/card-title

Attributes

This block takes no attributes.

`bsui/card-content`

This block takes no attributes.

`bsui/card-footer`

Attribute	Type	Default
`justify`	`start` `center` `end` `between`	`start`

`bsui/card-header`

This block takes no attributes.

`bsui/card-description`

Attribute	Type	Default
`label`	`richtext`	—

`bsui/card-title`

Attribute	Type	Default
`label`	`richtext`	—