Use the viewport controls to check responsive behavior, then copy the implementation that fits your stack.
4 patterns
Simple content list
A readable unordered list with supporting descriptions.
contentsemantic
Accessibility
Uses native unordered-list semantics for a non-sequential group.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Icon list
Benefits reinforced by decorative, text-independent icons.
iconsbenefits
Accessibility
Icons are decorative because the benefit headings contain all meaning.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Resource link list
Generous linked rows with descriptive destination text.
linksresources
Accessibility
The navigation landmark is labelled and every row contains descriptive link text.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Description list
Term and value pairs for compact metadata or specifications.
metadatadefinitions
Accessibility
Uses description-list semantics for explicit term and value relationships.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Implementation notes
These examples use plain CSS and no external dependencies. Replace sample content and destinations while preserving the semantic structure, labels, focus treatment and responsive behavior.