380
800
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<ul class="m-btn-list ">
    <li class="m-btn-list__item">

        <a class=" a-btn a-btn--secondary" href="javascript:void(0)">
            Stay in Touch
            <span class="a-icon  a-btn__icon">
                <svg class="icon--arrow--md-right icon" role="img">
                    <use role="presentation" xlink:href="#icon--arrow--md-right" />
                </svg>
            </span>
        </a>
    </li>
    <li class="m-btn-list__item">

        <a class=" a-btn a-btn--secondary" href="javascript:void(0)">
            Attend Info Session
            <span class="a-icon  a-btn__icon">
                <svg class="icon--arrow--md-right icon" role="img">
                    <use role="presentation" xlink:href="#icon--arrow--md-right" />
                </svg>
            </span>
        </a>
    </li>
    <li class="m-btn-list__item">

        <a class="[object Object] a-btn a-btn--secondary" href="javascript:void(0)" download="MBA program">
            Download PDF
            <span class="a-icon  a-btn__icon">
                <svg class="icon--action--download icon" role="img" aria-labelledby="download-pdf-title download-pdf-desc ">
                    <title id="download-pdf-title">Download document</title>
                    <desc id="download-pdf-desc"></desc>
                    <use role="presentation" xlink:href="#icon--action--download" />
                </svg>
            </span>
        </a>
    </li>
    <li class="m-btn-list__item">

        <a class="arrow--md-right a-btn a-btn--primary" href="javascript:void(0)">
            Apply Now
            <span class="a-icon  a-btn__icon">
                <svg class="icon--arrow--md-right icon" role="img">
                    <use role="presentation" xlink:href="#icon--arrow--md-right" />
                </svg>
            </span>
        </a>
    </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{
  "element": "a",
  "buttons": [
    {
      "text": "Stay in Touch",
      "attributes": {
        "href": "javascript:void(0)"
      },
      "style": "secondary"
    },
    {
      "text": "Attend Info Session",
      "attributes": {
        "href": "javascript:void(0)"
      },
      "style": "secondary"
    },
    {
      "text": "Download PDF",
      "icon": {
        "icon": "action--download",
        "id": "download-pdf",
        "labels": {
          "title": "Download document",
          "desc": ""
        }
      },
      "attributes": {
        "href": "javascript:void(0)",
        "download": "MBA program"
      },
      "style": "secondary"
    },
    {
      "text": "Apply Now",
      "attributes": {
        "href": "javascript:void(0)"
      },
      "icon": "arrow--md-right",
      "style": "primary"
    }
  ]
}
1
2
3
4
5
6
7
<ul class="m-btn-list {{ right ? 'm-btn-list--right' }}">
	{% for button in buttons %}
		<li class="m-btn-list__item">
			{% include 'components/atoms/btn/btn' with button %}
		</li>
	{% endfor %}
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$m-btn-list__item: (
  xlarge: 3,
  xxlarge: 3,
  xxxlarge: 3
);

.m-btn-list {
  @include child-spacing-y($inner-spacing-03);

  @include breakpoint("xlarge+") {
    @include columns-container;

    &--right {
      justify-content: flex-end;
    }

    &__item {
      @include column($m-btn-list__item);
    }
  }
}