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
{
  "items": [
    {
      "text": "All",
      "suffix": "(99)",
      "href": "javascript:void(0)"
    },
    {
      "text": "Information Sessions",
      "href": "javascript:void(0)"
    },
    {
      "text": "Student Chats",
      "href": "javascript:void(0)"
    },
    {
      "text": "Class Visits",
      "href": "javascript:void(0)"
    },
    {
      "text": "Online",
      "href": "javascript:void(0)",
      "current": true
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="a-full-bleed-scroll" data-behavior="ScrollToCurrent">
	<ul class="m-tabs {{ bottom ? 'm-tabs--bottom' }}">
		{% for item in items %}
			<li class="m-tabs__item">
				<a href="{{ item.href }}" data-barba-noscroll {{ '#' in item.href ? 'data-ajaxpartial-link' }} class="m-tabs__item-link {{ item.current ? 'is-current' }}">
					<span class="m-tabs__item-label">
						{{ item.text }}
						{% if item.suffix %}
							<small class="m-tabs__item-suffix">{{ item.suffix }}</small>
						{% endif %}
					</span>
				</a>
			</li>
		{% endfor %}
	</ul>
</div>

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.m-tabs {
  display: flex;
  align-items: center;

  &__item {
    color: var(--color--text--aux);
    @include f-heading-1;
    white-space: nowrap;

    &:not(:first-child) {
      padding-left: 24px;
    }

    &:last-child {
      @each $name, $point in $breakpoints {
        @include breakpoint("#{$name}") {
          @if map-get($main-col-widths, $name) == "fluid" {
            padding-right: map-get($outer-gutters, $name);
          } @else {
            padding-right: calc(
              (100vw - #{map-get($main-col-widths, $name)}) / 2
            );
          }
        }
      }
    }
  }

  &__item-suffix {
    color: var(--color--text--aux);
  }

  &__item-link {
    display: block;
    padding-top: 20px;
    outline: none;
    transition: color $timing--short $bezier--standard;

    &:focus[data-focus-method="key"],
    &:hover,
    &.is-current {
      color: var(--color--text);
    }

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 24px;
      border-top: 2px solid var(--color--action);
      opacity: 0;
      transform: scaleX(0.6);
      transform-origin: 0 0;
      transition: opacity $timing--short $bezier--standard,
        transform $timing--short $bezier--standard;
    }

    &:hover:before,
    &.is-current:before {
      opacity: 1;
      transform: none;
    }
  }

  &__item-link:focus[data-focus-method="key"] &__item-label {
    outline: 1px solid var(--color--outline);
    outline-offset: 4px;
  }

  &--bottom &__item-link {
    padding-top: 0;
    padding-bottom: 20px;
    &:before {
      top: auto;
      bottom: 0;
    }
  }
}