Partystreusel

Button Group 

<div class="button-group" role="group" aria-label="...">
    <a class="btn btn--primary" href="">Button 1</a>

    <a class="btn " href="">Button 2</a>

    <a class="btn " href="">Button 3</a>

</div>
 
<div class="button-group" role="group" aria-label="...">
  {{#each buttons}}
    {{render (lookup . 'componentName') context}}
  {{/each}}
</div>
 
{
  "buttons": [
    {
      "componentName": "@button",
      "context": {
        "text": "Button 1",
        "modifier": "btn--primary"
      }
    },
    {
      "componentName": "@button",
      "context": {
        "text": "Button 2"
      }
    },
    {
      "componentName": "@button",
      "context": {
        "text": "Button 3"
      }
    }
  ]
}
  • Content: 
    .button-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: rem(12) 0 rem(18);

  > .btn {
    position: relative;
    float: left;
    margin-right: rem(1);
    margin-bottom: rem(1);

    &:last-child {
      margin-right: 0;
    }
  }
}
  • URL: /components/raw/button-group/_button-group.scss
  • Filesystem Path: patterns/02-molecules/button-group/_button-group.scss
  • Size: 279 Bytes

There are no notes for this item.