SideCard

A card of metadata, links and tags beside the text of a detail page, collapsed on a phone.

Preview

src/examples/side-card/example.astro

---
import { SideCard } from "@/presentation/components/site/side-card";
---

<SideCard
  rows={[
    { label: "Version", value: "1.2.0" },
    { label: "License", value: "MIT" },
    { label: "Runtime", value: "Node 22 or newer" },
    { label: "Checksum", value: "9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08" },
  ]}
  links={[
    { label: "Repository", href: "https://github.com/demo/widget" },
    { label: "Guide", href: "#" },
  ]}
  tags={["Plugin", "Forms"]}
/>

Add to your site

npx docs-sitekit add side-card

It writes these files, and keeps a file you changed:

src/presentation/components/site/side-card.tsx
src/presentation/side-card/side-card.ts
src/domain/side-card.ts

It requires these entries of the registry, which add restores first:

catalog-filter

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of SideCard
Key	Type	Default	Allowed values	Description
`rows`	readonly SideCardRow[]	required	-	The metadata, one label and value for each line.
`links`	readonly SideCardLink[]	-	-	Links, under the rows.
`tags`	readonly string[]	-	-	Tags, under the links.
`label`	string	"Details"	-	The accessible name of the card.
`className`	string	-	-	Classes added to the card.

Fields of SideCardRow
Key	Type	Default	Allowed values	Description
`label`	string	required	-	The name of the row, in mono capitals.
`value`	string	required	-	The value. A long one, such as a hash or an address, wraps.

Fields of SideCardLink
Key	Type	Default	Allowed values	Description
`label`	string	required	-	The text of the link.
`href`	string	required	-	Where it leads.

About

The card of a detail page: a version, a license, links and tags beside the text. A page gets it from meta, links and tags in its frontmatter, and the component takes its data through props and imports no content. It builds on the tag rules of CatalogFilter, so sitekit add side-card restores that component too.

Its script belongs to the page, so a page shows one card. On a phone the card shows its first three rows and an “All details” button; the preview above does that on a narrow screen. A second card on the same page would not be collapsed, because the script takes the first one.

Accessibility

The card is an <aside> named by label, which is “Details” unless you change it.
The metadata is a description list, so a screen reader says each label with its value. The links and the tags are lists named “Links” and “Tags”.
A long value, such as a hash or an address, wraps.
The button has aria-expanded and is 44 px high. It is hidden in the HTML and shown by the script, so without JavaScript the whole card is shown and there is no dead control.
A link is 44 px high.

Source

Edit this page

Last updated 5 November 2026