<div class="buttons" data-buttons-centered>
<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"
}
],
"centered": true
}
.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;
}
}
No notes defined.