SGDS Description List Component Skill

<sgds-description-list> renders a single label–value row. <sgds-description-list-group> wraps multiple rows with an optional group title and description. Use this instead of raw <dl>/<dt>/<dd> elements for consistent SGDS styling.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on these components.

Quick Decision Guide

Single row or grouped?

• One label–value pair → <sgds-description-list> alone
• Multiple rows with a shared title → wrap in <sgds-description-list-group>

Layout

• Side-by-side (default) → omit stacked
• Stacked (label above value) → add stacked on the group (propagates to all children automatically)