List
Styled lists with rhythm-aligned spacing. Works with both unordered and ordered lists.
Unordered List
- Yellowstone National Park
- Yosemite National Park
- Grand Canyon National Park
- South Rim
- North Rim
- Zion National Park
<ul class="ug-list">
<li>Yellowstone National Park</li>
<li>Yosemite National Park</li>
<li>Grand Canyon National Park
<ul>
<li>South Rim</li>
<li>North Rim</li>
</ul>
</li>
<li>Zion National Park</li>
</ul>Ordered List
- Apply for a permit
- Choose your campsite
- Pack bear-proof containers
- Check weather conditions
<ol class="ug-list">
<li>Apply for a permit</li>
<li>Choose your campsite</li>
<li>Pack bear-proof containers</li>
<li>Check weather conditions</li>
</ol>Unstyled
No bullets, no left padding.
- No bullets
- No left padding
- Clean list of items
<ul class="ug-list ug-list--unstyled">
<li>No bullets</li>
<li>No left padding</li>
<li>Clean list of items</li>
</ul>Inline
Horizontal list with flex layout.
- Hiking
- Camping
- Fishing
- Wildlife
- Photography
<ul class="ug-list ug-list--inline">
<li>Hiking</li>
<li>Camping</li>
<li>Fishing</li>
<li>Wildlife</li>
<li>Photography</li>
</ul>Bordered
Items separated by horizontal borders.
- Old Faithful Visitor Center
- Canyon Village
- Mammoth Hot Springs
- Grant Village
<ul class="ug-list ug-list--bordered">
<li>Old Faithful Visitor Center</li>
<li>Canyon Village</li>
<li>Mammoth Hot Springs</li>
<li>Grant Village</li>
</ul>Compact
No spacing between items.
- Dense list item
- No extra spacing
- Tight layout
<ul class="ug-list ug-list--compact">
<li>Dense list item</li>
<li>No extra spacing</li>
<li>Tight layout</li>
</ul>Class Reference
| Class | Description |
|---|---|
.ug-list | Styled list with rhythm spacing |
.ug-list--unstyled | No bullets, no padding |
.ug-list--inline | Horizontal flex list |
.ug-list--bordered | Items separated by borders |
.ug-list--compact | No spacing between items |