Divider / HR

TIP

The layout Divider is a horizontal or vertical rule that can be used to separate content.

• use the <hr> tag if you want to define thematic changes in the content (e.g. between sections of an article, or between different topics on a page). The <hr> tag has a default margin!
• use a <div> if you just want to create a visual separation between content.

.l-divider

Size Modifiers

.l-divider[.-large, h-width-100]

---

---

---

<hr class="l-divider" />
<hr class="l-divider -large" />
<hr class="l-divider h-width-100" />

Color Modifiers

.l-divider[.-light]

---

<hr class="l-divider -light h-width-100"/>

Vertical Divider

.l-divider[.-vertical] + [.-large, h-height-100]

---

---

---

<hr class="l-divider -vertical"/>
<hr class="l-divider -vertical -large"/>
<hr class="l-divider -vertical h-height-100"/>

Divider with Text content

NEU!

oder

Show Code

<div class="h-flex h-flex-row h-vertical-center gap-16 m-y-xl">
  <div class="l-divider -light -fullwidth"></div>
  <span class="c-tag -small -success-dark">NEU!</span>
  <div class="l-divider -light -fullwidth"></div>
</div>
<div class="h-flex h-flex-row h-vertical-center gap-16 m-y-xl">
  <div class="l-divider -light -fullwidth"></div>
  <span class="h5">oder</span>
  <div class="l-divider -light -fullwidth"></div>
</div>