Divider
Horizontal rules and labeled dividers aligned to the vertical rhythm for separating content sections.
Default Divider
Thin horizontal rule
Content above the divider.
Content below the divider.
<p>Content above the divider.</p>
<hr class="ug-divider" />
<p>Content below the divider.</p>Bold Divider
Bold (3px) divider
Content above the bold divider.
Content below the bold divider.
<p>Content above the bold divider.</p>
<hr class="ug-divider ug-divider--bold" />
<p>Content below the bold divider.</p>Label Divider
A labeled divider with uppercase text and a bottom border, useful for section headings in sidebars, footers, or forms.
Default label divider
Content that follows the labeled section divider.
<div class="ug-label-divider">Related Articles</div>
<p>Content that follows the labeled section divider.</p>Bold Label Divider
Bold label divider
Content that follows the bold labeled section divider.
<div class="ug-label-divider ug-label-divider--bold">Featured Content</div>
<p>Content that follows the bold labeled section divider.</p>Light Label Divider
Light label divider
Content that follows the light labeled section divider.
<div class="ug-label-divider ug-label-divider--light">Optional Section</div>
<p>Content that follows the light labeled section divider.</p>Multiple Dividers in Context
Dividers separating content blocks
General information about park access, hours, and fees.
Additional notes on seasonal closures and construction.
In case of emergency, call 911 or contact the nearest ranger station.
<div class="ug-label-divider">Park Information</div>
<p>General information about park access, hours, and fees.</p>
<hr class="ug-divider" />
<p>Additional notes on seasonal closures and construction.</p>
<div class="ug-label-divider ug-label-divider--bold">Emergency Contacts</div>
<p>In case of emergency, call 911 or contact the nearest ranger station.</p>Class Reference
| Class | Description |
|---|---|
.ug-divider | Thin horizontal rule (1px), rhythm-aligned |
.ug-divider--bold | Bold horizontal rule (3px) |
.ug-label-divider | Labeled section divider with bottom border |
.ug-label-divider--bold | Bold bottom border variant |
.ug-label-divider--light | Light bottom border variant |