Card · Starbase

Playground

A cold, quiet world with excellent stargazing.

variant

A surface with optional media, heading, body and footer. Slots that get no content collapse, and href turns the whole card into one link.

Examples

Media, body and footer

A cold, quiet world with excellent stargazing. Visit

Details

<sb-card heading="Planet X-9" style="inline-size: 18rem">
  <img slot="media" src="/art/landscape.svg" alt="A violet planet rising over pixel hills" width="256" height="144">
  A cold, quiet world with excellent stargazing.
  <sb-button slot="footer" size="sm">Visit</sb-button>
  <sb-button slot="footer" size="sm" variant="ghost">Details</sb-button>
</sb-card>

Linked card

Props, codecs, slots and scoping, straight from the source.

<sb-card heading="Read the Rocket reference" href="https://data-star.dev/reference/rocket" variant="glow" style="inline-size: 18rem">
  Props, codecs, slots and scoping, straight from the source.
</sb-card>

Accessibility

A linked card renders one real <a> in the heading and stretches its click area over the card, so screen readers hear a single link. Always give media images alt text.

Installation

Add Datastar with Rocket and the Starbase autoloader once per page, then use the tag. The autoloader imports each component the first time its tag appears, including tags added later by a Datastar morph.

<!-- Once per page: Datastar with Rocket, and the Starbase autoloader.
     It loads every <sb-…> component the first time its tag appears. -->
<script type="importmap">
  { "imports": { "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar-rocket.js" } }
</script>
<script type="module" src="https://rocket.libretto.ch/c/autoloader.js"></script>
<!-- Optional, no flash of undefined elements: class="sb-cloak" on <html>, and -->
<style>.sb-cloak :not(:defined) { visibility: hidden }</style>

<sb-card variant="inset" style="inline-size: 13rem"><img slot="media" src="/art/landscape.svg" alt="A violet planet rising over pixel hills" width="256" height="144"></sb-card>

<!-- Or skip the autoloader and load just this component: -->
<!-- <script type="module" src="https://rocket.libretto.ch/c/card/card.js"></script> -->

API reference

Props

Attribute	Type	Default	Description
`heading`	string	`""`	Card title.
`href`	string	`""`	Makes the whole card a link.
`variant`	"default" \| "inset" \| "glow"	`"default"`	Surface style.

Slots

Name	Description
`media`	Image or illustration on top, edge to edge.
`default`	Body content.
`footer`	Actions or metadata at the bottom.