Cards

Cards arranges Card children in a numbered horizontal collection with scrolling controls when the track overflows.

01Preview

Chaos Machine

Crypto-jukebox

Time Zone

Art as protocol

02Usage

Load @dg/ui/styles.css once in the root layout.

<script>
  import { Cards, Card } from "@dg/ui";
</script>

<Cards label="Resources">
  <Card title="Collection" href="/artworks"><p>Browse the works.</p></Card>
  <Card title="About" href="/about"><p>Read about the project.</p></Card>
  <Card title="Archive" href="/archive"><p>Explore earlier projects.</p></Card>
</Cards>

03Examples

Automatic numbering

Digital cultures

Flexible content in a shared structure, ready to use across applications.

Chaos Machine

An artwork with a custom number and its own metadata.

A card without a footer

No number or footer: only populated areas appear.

A reference

Flexible content in a shared structure, ready to use across applications.

Explore further

Flexible content in a shared structure, ready to use across applications.

The next card stays partially visible when the row overflows. Drag with the mouse, use the arrows, a trackpad or a touch gesture to scroll. Tab reaches every link. Custom numbers stay visible when automatic numbering is disabled.

A standalone card

Without a link, the card is a static container that can hold controls.

A link in the content

04Notes

Native HTML attributes, DOM callbacks, class and style are forwarded to the outer section.
Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
Boundary controls use --disabled-opacity but remain focusable with guarded activation; inset focus uses the shared stroke and color.
The scrolling group and the previous and next controls use built-in names in the Page language.
Mouse dragging suppresses accidental clicks. Touch, trackpads and keyboard scrolling remain native; reduced motion disables smooth scrolling.

05Parameters

Name	Type	Default	Description
`label`	`string`	`undefined`	Accessible name of the card collection, such as "Artworks". Defaults to the built-in text in the `Page` language.
`numbered`	`boolean`	`true`	Automatically number `Cards` children that do not supply their own num.
`minWidth`	`string`	`"17.5rem"`	Preferred minimum card width as a CSS length. Narrow containers still fit one card; an overflowing track reveals the next card.
`children`	`Snippet`	`undefined`	Direct `Card` children. Controls appear only when the track overflows.

06Accessibility

Give the collection a useful label in the audience language; Page's lang translates the built-in control names. The overflowing track is keyboard-focusable and scrolls natively. Previous/Next controls remain focusable at their boundaries with aria-disabled. There is no automatic scrolling.

Related subjects

Markdown source: components/cards