divider

Dividers can be used as-is, within a text or as a vertical divider.

table of content

description
component variations
style scss

component variations

horizontal divider

<hr class="a-divider" />

horizontal divider within text example

Open on blank page

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<div class="container">
  <div class="a-text">
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
      sit amet.
    </p>
  </div>
  <hr class="a-divider -within-text" />
  <div class="a-text">
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
      sit amet.
    </p>
  </div>
</div>

vertical divider within two HTML elements

Open on blank page

This is a demo text. Instead of this DIV, you can use any other HTML tag.

<div class="container -row">
  <div
    style="align-items:center;background-color:lightblue;display:flex;justify-content:center;padding:20px;text-align:center"
  >
    This is a demo text. Instead of this DIV, you can use any other HTML tag.
  </div>
  <hr class="a-divider a-divider--vertical" />
  <div
    style="align-items:center;background-color:lightblue;display:flex;justify-content:center;padding:20px;text-align:center"
  >
    This is a demo text. Instead of this DIV, you can use any other HTML tag.
  </div>
</div>

additional content

styles SCSS

.a-divider {
  background-color: var(--small__enabled__fill__default);
  border: 0;
  height: 0.0625rem;
  margin: 0.5rem 0;

  &.-within-text {
    margin: 2rem 0;
  }

  &--vertical {
    min-width: 0.0625rem;
    height: auto;
    margin: 0 1rem;
  }
}