Edge

Attach an element to the edge of an element.

The following code examples shows how to use the edge component:

  <p class="edge">
    <span class="edge__attach">Lorem ipsum dolor sit</span>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
  </p>

The following list describe all existing block/element/modifier classes of the component.

  • .edge - required Define that this element has an attachment within.
  • .edge__attach - required The attachment that is moved to an edge of the parent element. In default it is the upper right corner.
  • Modifier - you can combine the modifier
    • .edge__attach--start - move to the left corner
    • .edge__attach--bottom - move to the bottom corner

Basic Example:

Theme basic Screen size XL
html