Display

Description List

A responsive term/description grid built on a semantic <dl>, styled with the quebi design system. Stacks on mobile and splits into two columns on larger screens.

displaydatalistkey-valuemetadata

Default

Terms in muted foreground, descriptions in white, with subtle row dividers.

Name: Aurelia Vance
Email: aurelia@quebi.de
Role: Platform Engineer

Invoice summary

Useful for rendering structured metadata such as an order or invoice.

Invoice: #QB-2026-0042
Status: Paid
Amount: €1,280.00
Issued: June 30, 2026

Long descriptions

Descriptions wrap independently of their terms.

Project: Quebi UI Library
Summary: A copy-paste React component library styled with the quebi design system, rendered live in a gallery and auto-published to a static AI-discovery API at build time.

Source

Copy this into your project. Resolve its dependencies from the registryDependencies in the component's API entry.

import { cn } from "@/lib/utils"

/**
 * DescriptionList — quebi design system
 *
 * A responsive term/description grid (`<dl>`). Single column on small
 * screens, a two-column term + description layout on `sm` and up. Terms
 * read in muted foreground, descriptions in white, with subtle cyan
 * dividers separating each row.
 */
export function DescriptionList({ className, ref, ...props }: React.ComponentProps<"dl">) {
  return (
    <dl
      ref={ref}
      data-slot="description-list"
      className={cn(
        "grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,calc(var(--spacing)*80))_auto] sm:text-sm/6",
        className,
      )}
      {...props}
    />
  )
}

export function DescriptionTerm({ className, ref, ...props }: React.ComponentProps<"dt">) {
  return (
    <dt
      ref={ref}
      data-slot="description-term"
      className={cn(
        "col-start-1 border-t border-cyan-500/10 pt-3 text-quebi-fg-muted first:border-none sm:py-3",
        className,
      )}
      {...props}
    />
  )
}

export function DescriptionDetails({ className, ref, ...props }: React.ComponentProps<"dd">) {
  return (
    <dd
      ref={ref}
      data-slot="description-details"
      className={cn(
        "pt-1 pb-3 text-white sm:border-t sm:border-cyan-500/10 sm:nth-2:border-none sm:py-3",
        className,
      )}
      {...props}
    />
  )
}