Content

Description List

Two-column label/value list built on CSS Grid subgrid. Pairs a `DescriptionList` parent with `DescriptionListItem` rows for opening hours, spec sheets, and key/value summaries.

Loading playground

Overview

DescriptionList is a two-column key/value list. The parent is a CSS Grid with auto 1fr columns, and each DescriptionListItem row uses grid-template-columns: subgrid so labels align across rows even when their widths vary. The variant prop picks between two visual treatments: outlined (the default) wraps the list in a bordered box with dividers between rows, while plain drops the chrome and keeps consistent row spacing.

Each item exposes a label prop for the text-only case and a #label slot for the rich case (icons, badges). The default slot is the value cell.

OpeningHoursWeeklyTable uses this primitive to render its weekly schedule.

Key Business & UX Benefits

Subgrid column alignment keeps labels lined up even when one row has a long label and the next has a short one, so the list reads as a single scannable column.
Two variants cover the two common contexts: a bordered list for spec-style content (opening hours, product attributes) and a plain list for inline detail panels.
Slot-based item content means rows can carry icons, badges, or formatted values without a fork of the component.

Usage

LDescriptionList

Feature List

Two variants (`outlined`, `plain`) cover bordered spec lists and plain inline detail panels
CSS Grid subgrid keeps labels aligned across rows even when widths vary
`label` prop for text rows; `#label` slot for icons, badges, or rich label content
Default slot is the value cell, so rows can render formatted prices, dates, or pill clusters
Used by `OpeningHoursWeeklyTable` to render weekly schedules with grouped consecutive days

API Reference

DescriptionList

Prop	Default	Type
`variant`	`outlined`	`"plain" \| "outlined"` Visual treatment. `outlined` (default) wraps rows in a bordered/divided box. `plain` removes the border + dividers and keeps consistent row spacing.

Slot	Type
`default`	`any`

DescriptionListItem

Prop	Default	Type
`label`		`string` Text-only shortcut for the label cell. Overridden by the `#label` slot.

Slot	Type
`default`	`any`
`label`	`any`

OpeningHoursWeeklyTable: renders a weekly schedule with consecutive same-hours days grouped into a single row.

Edit this pageorReport an issue

Card

Flexible content card with mixed media and text for marketing tiles, editorial highlights, and feature callouts.

Link Tile

Category-promoting tile that routes to a Basic, Compact, or Big internal layout based on the `variant` prop.