<div class="actions-group ">
    <div class="actions-group__handler">
        <button class="button actions-group__button" type="button" aria-label="button">
            I am a button
        </button>

        <button class="button actions-group__button" type="button" aria-label="button">
            I am a button
        </button>

    </div>
    <div class="actions-group__handler">
        <a class="link actions-group__link" href="#" title="Title">
            Link
        </a>

        <a class="link actions-group__link" href="#" title="Title">
            Link
        </a>

        <a class="link actions-group__link" href="#" title="Title">
            Link
        </a>

    </div>
</div>
<div class="actions-group {{ class }}">
    {{#each sides }}
        <div class="actions-group__handler">
            {{#each action }}
                {{#if button }}
                    {{ render '@button' button merge=true }}
                {{else}}
                    {{ render '@link' link merge=true }}
                {{/if}}
            {{/each }}
        </div>
    {{/each}}
</div>
{
  "sides": [
    {
      "action": [
        {
          "button": {
            "class": "actions-group__button"
          }
        },
        {
          "button": {
            "class": "actions-group__button"
          }
        }
      ]
    },
    {
      "action": [
        {
          "link": {
            "class": "actions-group__link"
          }
        },
        {
          "link": {
            "class": "actions-group__link"
          }
        },
        {
          "link": {
            "class": "actions-group__link"
          }
        }
      ]
    }
  ]
}
  • Content:
    $actions-group__spacing               : $spacer--medium !default;
    $actions-group__width                 : 100% !default;
    
    $actions-group__handler-margin        : 0 0 $actions-group__spacing !default;
    $actions-group__handler-margin\@medium: 0 !default;
    
    $actions-group__button-margin         : 0 0 $actions-group__spacing !default;
    $actions-group__button-margin\@medium : 0 $actions-group__spacing auto 0 !default;
    $actions-group__button-width          : 100% !default;
    $actions-group__button-width\@medium  : auto !default;
    
    $actions-group__link-margin           : 0 $actions-group__spacing 0 0 !default;
    $actions-group__link-padding          : $actions-group__spacing 0 !default;
    $actions-group__link-text-decoration  : underline !default;
    $actions-group__link-background-clip  : content-box !default;
    $actions-group__link-font-size        : $font-size-medium !default;
    $actions-group__link-font-weight      : $font-weight-medium !default;
    
  • URL: /components/raw/actions-group/_actions-group-variables.scss
  • Filesystem Path: build/components/Organisms/actions-group/_actions-group-variables.scss
  • Size: 941 Bytes
  • Content:
    @import 'actions-group-variables';
    
    .actions-group {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        width: $actions-group__width;
    
        &__handler {
            flex-basis: 100%;
            margin: $actions-group__handler-margin;
    
            @include mq($screen-m) {
                flex-basis: auto;
                margin: $actions-group__handler-margin\@medium;
            }
        }
    
        &__button {
            margin: $actions-group__button-margin;
            width: $actions-group__button-width;
    
            @include mq($screen-m) {
                width: $actions-group__button-width\@medium;
                margin: $actions-group__button-margin\@medium;
            }
    
            &:last-child {
                margin-right: 0;
            }
        }
    
        &__link {
            padding: $actions-group__link-padding;
            margin: $actions-group__link-margin;
            text-decoration: $actions-group__link-text-decoration;
            background-clip: $actions-group__link-background-clip;
            font-size: $actions-group__link-font-size;
            font-weight: $actions-group__link-font-weight;
    
            &:last-child {
                margin-right: 0;
            }
        }
    }
    
  • URL: /components/raw/actions-group/_actions-group.scss
  • Filesystem Path: build/components/Organisms/actions-group/_actions-group.scss
  • Size: 1.2 KB

No notes defined.