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://starbase.zweiundeins.gmbh/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>

<!-- In production, pin today's catalog instead of the latest: the browser then
     refuses any file that changed. Add "integrity" to the import map above: the
     hashes from https://starbase.zweiundeins.gmbh/c/@0a1ad1bf98a4/importmap.json and Datastar's, below. -->
<!--
<script type="importmap">
  { "imports": { "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar-rocket.js" },
    "integrity": { "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar-rocket.js": "sha384-vUxZojLrF1Ar3de5h7VINqhJXBgjyZS4U49pHvGa87kum6j5Xn6JRziuARNw5ELG", "…": "…from importmap.json" } }
</script>
<script type="module" src="https://starbase.zweiundeins.gmbh/c/@0a1ad1bf98a4/autoloader.js" integrity="sha384-IvSCUjEWPS+wwXunU+48x96KmyWDx/Y4LeCwCL8cWFqJ/zHmTsTOsSMrzTOcpW3D"></script>
-->

<!-- Or load just this component, pinned to this version: -->
<!-- <script type="module" src="https://starbase.zweiundeins.gmbh/c/card@5974b404941a/card.js" integrity="sha384-H98ZNXFUlvUBZygC4wMz/c6gtTYziSCk/uZzwIvjlLIHdfLieogE+F808Ufo+4Vu"></script> -->

Size

Each file compressed on its own, the way it is served (gzip -9, brotli -11). Datastar and Rocket are shared by every component and not counted.

File	Original	gzip	brotli
`card.js`	3.1 kB	1.4 kB	1.2 kB

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.