Description List
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
Install
Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).
Unstyled — behavior only, you write the CSS
npx astrocraft-ui add display/description-listPlain-CSS theme — no build step
npx astrocraft-ui add display/description-list --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add display/description-list --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add display/description-list --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add display/description-list --theme tailwind --bridge lumosLive demo
DescriptionList
The content model is the component: a <dl> may contain <dt>, <dd> and a wrapping <div>, and nothing else. Written with <p>s or <li>s — which is how most of them are written — the term/value association is simply gone.
- Status
- Shipped
- Carrier
- Royal Mail
- Tracking
- RM-8841-220
Attribute surface
With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `DescriptionDetails.astro` | `description-details` | — | — | — |
| `DescriptionList.astro` | `description-list` | `data-orientation`: `vertical` · `horizontal` | — | — |
| `DescriptionTerm.astro` | `description-term` | — | — | — |
Source
What the command copies — 4 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"dd">;
const { class: className, ...rest } = Astro.props;
---
<dd class={className} data-slot="description-details" {...rest}><slot /></dd>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"dl"> & { orientation?: "vertical" | "horizontal" };
const { orientation = "vertical", class: className, ...rest } = Astro.props;
---
<dl class={className} data-slot="description-list" data-orientation={orientation} {...rest}>
<slot />
</dl>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"dt">;
const { class: className, ...rest } = Astro.props;
---
<dt class={className} data-slot="description-term" {...rest}><slot /></dt>
import DescriptionDetails from "./DescriptionDetails.astro";
import DescriptionList from "./DescriptionList.astro";
import DescriptionTerm from "./DescriptionTerm.astro";
export { DescriptionDetails, DescriptionList, DescriptionTerm };
export default DescriptionList;
What you get
The component source, copied into your project by npx astrocraft-ui add display/description-list — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.