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
<ul class="m-detail-actions">
    <li>

        <a class="arrow--md-right a-btn a-btn--primary">
            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>
    <li>

        <a class="action--download a-btn a-btn--secondary">
            Download PDF
            <span class="a-icon  a-btn__icon">
                <svg class="icon--action--download icon" role="img">
                    <use role="presentation" xlink:href="#icon--action--download" />
                </svg>
            </span>
        </a>
    </li>
    <li>

        <a class="action--subscribe a-btn a-btn--secondary">
            Stay in Touch
            <span class="a-icon  a-btn__icon">
                <svg class="icon--action--subscribe icon" role="img">
                    <use role="presentation" xlink:href="#icon--action--subscribe" />
                </svg>
            </span>
        </a>
    </li>
    <li>

        <a class="content--event a-btn a-btn--secondary">
            Attend Info Session
            <span class="a-icon  a-btn__icon">
                <svg class="icon--content--event icon" role="img">
                    <use role="presentation" xlink:href="#icon--content--event" />
                </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
{
  "items": [
    {
      "text": "Apply Now",
      "icon": "arrow--md-right"
    },
    {
      "text": "Download PDF",
      "icon": "action--download"
    },
    {
      "text": "Stay in Touch",
      "icon": "action--subscribe"
    },
    {
      "text": "Attend Info Session",
      "icon": "content--event"
    }
  ]
}
1
2
3
4
5
6
7
<ul class="m-detail-actions">
	{% for item in items %}
		<li>
			{% include 'components/atoms/btn/btn' with ({ style: loop.first ? 'primary' : 'secondary', element: 'a', justified: true })|merge(item) %}
		</li>
	{% endfor %}
</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
.m-detail-actions {
  width: 100%;

  @include width-multi(
    (
      medium: 4,
      large: 6,
      xlarge: 3,
      xxlarge: 3,
      xxxlarge: 3
    )
  );
  @include child-spacing-y(
    (
      xsmall: 16px,
      "medium+": 20px
    )
  );
  // @include breakpoint("xlarge+") {
  //   :first-child a {
  //     @include a-btn--sm;
  //   }
  //   :not(:first-child) {
  //     @include f-ui-1;
  //   }
  //   :nth-child(2n) {
  //     padding-top: 20px;
  //   }
  //   :nth-child(n + 3) {
  //     padding-top: 8px;
  //   }
  // }

  // @include breakpoint("large-") {
  //   :not(:first-child) {
  //     @include spacing($inner-spacing-03);
  //     a {
  //       @include a-btn;
  //       @include a-btn--secondary;
  //     }
  //   }
  // }
}