1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul class="m-carousel-buttons">
<li>
<a href="javascript:void(0);" aria-label="Previous"><span class="a-icon ">
<svg class="icon--arrow--md-circle-left icon" role="img">
<use role="presentation" xlink:href="#icon--arrow--md-circle-left" />
</svg>
</span>
</a>
</li>
<li>
<a href="javascript:void(0);" aria-label="Next"><span class="a-icon ">
<svg class="icon--arrow--md-circle-right icon" role="img">
<use role="presentation" xlink:href="#icon--arrow--md-circle-right" />
</svg>
</span>
</a>
</li>
</ul>
1
2
3
4
5
6
7
8
<ul class="m-carousel-buttons">
<li>
<a href="javascript:void(0);" aria-label="Previous">{% include 'components/atoms/icon/icon' with { icon: 'arrow--md-circle-left' } %}</a>
</li>
<li>
<a href="javascript:void(0);" aria-label="Next">{% include 'components/atoms/icon/icon' with { icon: 'arrow--md-circle-right' } %}</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
.m-carousel-buttons {
display: flex;
@include child-spacing-x(
(
xsmall: 8px
)
);
a {
display: block;
border-radius: 50%;
@include standard-link(var(--color--action));
@include key-focus {
outline: none;
color: var(--color--action);
}
&.is-disabled {
color: var(--color--text--aux);
}
}
}