Button Wrapper 

<div class="button-wrapper">
    <a class="btn btn--cta" data-label="Mehr erfahren" href="#">Mehr erfahren</a>
    <a class="btn btn--medium" href="#">Kontakt aufnehmen</a>
</div>
 
<div class="button-wrapper">
    <a class="btn btn--cta" data-label="{{cta_label}}" href="#">{{cta_text}}</a>
    <a class="btn btn--medium" href="#">{{button_text}}</a>
</div>
 
{
  "cta_label": "Mehr erfahren",
  "cta_text": "Mehr erfahren",
  "button_text": "Kontakt aufnehmen"
}
  • Content: 
    .button-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: $spacer-sm $spacer-md;
  justify-content: center;

  padding: $spacer-base 0;

  .btn {
    width: 100%;
    margin-left: 0;
  }
}

@media screen and (min-width: $grid-breakpoint-md-lg) {
  .button-wrapper .btn {
    width: auto;
  }
}
  • URL: /components/raw/button-wrapper/_button-wrapper.scss
  • Filesystem Path: components/04-molecules/button-wrapper/_button-wrapper.scss
  • Size: 297 Bytes
  • Handle: @button-wrapper
  • Preview:
  • Filesystem Path: components/04-molecules/button-wrapper/button-wrapper.html

No notes defined.