Description List
Semantic description list for displaying key-value pairs. Available in stacked, horizontal, and striped styles. Uses proper dl/dt/dd HTML elements for accessibility.
Stacked
Label stacked above value, separated by dividers
_description_list.html.erb
███
███████████ ████ █████████ █ ███████ █████ █████████
██████
███ ██████ ██████████████████████████████████████ ██████ █
█ ██████ █████ ██████ ██████ █████ ████ ██
█ ██████ ████████ ██████ ██████████████████ ██
█ ██████ ███████ ██████ ███████████████ █
█ ██
██
description_list_stacked_component.html.erb
███ ██████████ █████████████████ ████
██ ██████████ ██ ██████ ██
████ █████████████
███ ██████████ █████████████ ████
███ ████████████ ██
█████
███ ██████████ █████████████ ████
███ ████████████ ██
█████
██████
description_list_stacked_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████████ █ ███████████████████
███ ██████████████████ ████████████████
██████ █ █████
██████████████ █ █████████████████████ ██ ██
███
███████████ ██████
Horizontal
Label left, value right in a side-by-side layout
_description_list.html.erb
███
███████████ ████ █████████ █ ██████████ █████ █████████
██████
███ ██████ █████████████████████████████████████████ ██████ █
█ ██████ █████ ██████ ██████ █████ ████ ██
█ ██████ ████████ ██████ ██████████████████ ██
█ ██████ ███████ ██████ ███████████████ █
██ ████████████ ███████ ██
██
description_list_horizontal_component.rb
█ ██████████████████████ ████
█████ ██████████████████████████████████ █ ███████████████████
███ ██████████████████ ████████████ ████████ ████████████████
██████ █ █████
████████████ █ ███████████
██████████████ █ █████████████████████ ██ ██
███
███████████ ██████
description_list_horizontal_component.html.erb
███ ██████████ █████████████████ ████
██ ██████████ ██ ██████ ██
████ ███████████ ██████
███ ██████████ █████████████ ████
███ ████████████ ██
█████
███ ██████████ █████████████ ████
███ ████████████ ██
█████
██████
Striped
Alternating row backgrounds for improved readability
_description_list.html.erb
███
███████████ ████ █████████ █ ███████ █████ █████████
██████
███ ██████ ██████████████████████████████████████ ██████ █
█ ██████ █████ ██████ ██████ █████ ████ ██
█ ██████ ████████ ██████ ██████████████████ ██
█ ██████ ███████ ██████ ███████████████ █
██ ████████████ ███████ ██
██
description_list_striped_component.html.erb
███ ██████████ █████████████████ ████
██ █████████████████████ ██ ██████ ██████ ██
████ ██████████ ██████████████████ ████
███ ██████████ █████████████ ████
███ ████████████ ██
█████
███ ██████████ █████████████ ████
███ ████████████ ██
█████
██████
description_list_striped_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████████ █ ███████████████████
███ ██████████████████ ████████████ ████████ ████████████████
██████ █ █████
████████████ █ ███████████
██████████████ █ █████████████████████ ██ ██
███
███████████ ██████
Changelog
- Initial release with stacked, horizontal, and striped styles
- Semantic dl/dt/dd HTML
- Dark mode support
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now