@e-fellows/website-2022

Button-Box: Rechtsbündig 

<div class="button-box button-box--right">
    <div class="button-box__item">
        <a class="button u-underline" href="#">Lorem ipsum</a>
    </div>
    <div class="button-box__item">
        <a class="button u-underline" href="#">Dolor sit</a>
    </div>
    <div class="button-box__item">
        <a class="button u-underline" href="#">Amet consetetur</a>
    </div>
</div>
 
{% set align = align ??? 'left' -%}

<div {{ html_attributes({
  id: id ?? false,
  class: ['button-box', "button-box--#{align}"],
}, attrs ?? {}) }}>
  {% for item in items %}
    <div class="button-box__item">
      {% include '@button' with item only %}
    </div>
  {% endfor %}
</div>
 
{
  "items": [
    {
      "text": "Lorem ipsum",
      "link": "#"
    },
    {
      "text": "Dolor sit",
      "link": "#"
    },
    {
      "text": "Amet consetetur",
      "link": "#"
    }
  ],
  "align": "right"
}
  • Content: 
    :root {
  --button-box-gap: 2rem;
}

.button-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--button-box-gap);
}

.button-box--left {
  justify-content: flex-start;
}

.button-box--center {
  justify-content: center;
}

.button-box--right {
  justify-content: flex-end;
}
  • URL: /components/raw/button-box/button-box.scss
  • Filesystem Path: src/components/2-molecules/button-box/button-box.scss
  • Size: 278 Bytes

No notes defined.