Divider / HR

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"/>

Inside a Flex Container (Demo)

test

---

test

---

Show Code

<div class="h-flex h-flex-column h-align-center h-width-100">
  <div class="h-highlight-block -small">test</div>
  <hr class="l-divider -fullwidth">
  <div class="h-highlight-block -small">test</div>
</div>

<div class="h-flex h-flex-row h-align-center h-space-between m-t-xl">
  <div class="h-highlight-block"><button type="button" class="c-btn -secondary">Button</button></div>
  <hr class="l-divider -vertical -fullwidth">
  <div class="h-highlight-block"><button type="button" class="c-btn -secondary">Button</button></div>
</div>

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 p-b-0">oder</span>
  <div class="l-divider -light -fullwidth"></div>
</div>