Description List Blocks for Shadcn UI

Description lists are the unsung hero of product pages. They’re what you reach for when a paragraph would be too vague and a table would be too heavy—spec sheets, metadata panels, and "what’s included" rows.

When to use a description list

Description lists are the right tool whenever a paragraph would be too vague and a table would be too heavy. They show up more often than you’d expect.

• Product spec sheets ("Display: 14.2-inch / Weight: 1.6 kg")
• Plan or policy summaries ("Refund window: 30 days")
• Metadata panels in dashboards
• "What’s included" or "What’s not included" rows in pricing
• Author or post metadata on blog articles

Patterns

Description lists are a thin shape with a lot of variants. The right pattern depends on density: how many terms you have and how much each one needs to say.

1. Two-column term/definition with vertical dividers
2. Stacked list with subtle eyebrow labels
3. Cards-as-rows with icon, term, value
4. Grouped lists by section heading

Semantics

<dl> is one of the few HTML elements people skip in favor of <div>. Don’t—the structure conveys the relationship between term and value for free.

• Use real <dl>, <dt>, <dd> elements; don’t mimic the look with <div>s
• Keep terms short and consistent in length
• One value per term unless the list is intentionally multi-value

Accessibility

Used correctly, a description list is one of the most accessible patterns in HTML. Used as a fake table, it’s one of the most confusing for assistive tech.

• A <dl> conveys the term/definition relationship to assistive tech for free
• Don’t flatten the list with display utilities that hide the semantics
• Maintain visible focus on any interactive value (e.g., copy buttons, links)
• Use sufficient contrast for muted term labels

Copy and content

Description lists punish inconsistency more than most patterns. Mixed sentence styles or units make the whole block read as half-finished.

• Pick one writing style: full sentences or fragments, never both
• Avoid putting marketing copy in a description list—keep it factual
• Order rows by importance, not alphabet, unless users will scan for a specific row

Tailark Pro Description List Blocks

Tailark Pro shadcn ui blocks include modern, premium description list layouts for spec sheets, plans, and documentation.

Preview Description List Blocks

Related guides

• Pair with Stats for headline numbers
• Use inside Comparator sections for plan details
• Add FAQs for context that doesn’t fit a row