@zplane-web/craft-licensing

Buttons: Horizontal Centered 

<div class="buttons" data-buttons-centered data-buttons-horizontal>
    <div class="buttons__button">

        <a class="button" href="#">
            <span class="button__text u-underline">Button 1</span>
        </a>
    </div>
    <div class="buttons__button">

        <a class="button button--secondary" href="#">
            <span class="button__text u-underline">Button 2</span>
        </a>
    </div>
    <div class="buttons__button">

        <a class="button button--secondary" title="Button 3" href="#">
            <span class="button__icon">
                <svg class="icon icon--house" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#house"></use>
                </svg> </span>
        </a>
    </div>
</div>
 
<div {{ html_attributes({
  id: id ?? false,
  class: 'buttons',
  'data-buttons-centered': centered ?? false,
  'data-buttons-horizontal': horizontal ?? false,
}, attrs ?? {}) }}>
  {% for button in buttons %}
    <div class="buttons__button">
      {% include button.use|default('@button') with button only %}
    </div>
  {% endfor %}
</div>
 
{
  "buttons": [
    {
      "text": "Button 1",
      "link": "#"
    },
    {
      "text": "Button 2",
      "link": "#",
      "secondary": true
    },
    {
      "title": "Button 3",
      "link": "#",
      "secondary": true,
      "icon": "house"
    }
  ],
  "horizontal": true,
  "centered": true
}
  • Content: 
    .buttons {
  align-items: var(--buttons-align-items, flex-start);
  display: flex;
  flex-direction: var(--buttons-flex-direction, column);
  flex-wrap: wrap;
  gap: var(--buttons-gap, 2rem);
  justify-content: var(--buttons-justify-content, flex-start);
  padding-block: var(--buttons-padding-block, 0);
  padding-inline: var(--buttons-padding-inline, 0);
  text-align: var(--buttons-text-align, left);

  &:is([data-buttons-centered]) {
    --buttons-align-items: center;
    --buttons-text-align: center;
    --buttons-justify-content: center;
  }

  &:is([data-buttons-horizontal]) {
    --buttons-align-items: center;
    --buttons-flex-direction: row;
  }
}
  • URL: /components/raw/buttons/buttons.scss
  • Filesystem Path: src/components/3-molecules/buttons/buttons.scss
  • Size: 664 Bytes

No notes defined.