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
{
  "title": "Key Dates",
  "type": "term-list",
  "content": {
    "terms": [
      {
        "term": "August 2020 Entry",
        "value": [
          {
            "text": "Early: <time datetime=\"2019-10-04\">October 4, 2019</time>"
          },
          {
            "text": "Merit Fellowship: <time datetime=\"2020-01-03\">January 3, 2020</time>"
          },
          {
            "text": "Final: <time datetime=\"2020-04-10\">April 10, 2020</time>"
          }
        ]
      },
      {
        "term": "Deferred Enrollment Program",
        "value": "Deadline: <time datetime=\"2020-04-15\">April 15, 2020</time>"
      },
      {
        "term": "January 2020 Entry",
        "value": "Deadline: <time datetime=\"2019-10-04\">October 4, 2019</time>"
      }
    ],
    "footnote": "All deadlines are at <time datetime=\"23:59\">11:59 p.m. EST</time>"
  }
}

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
<article class="m-box" data-behavior="Toggle" data-toggle-tween="0.2" data-toggle-media="small-" data-toggle-scroll="true" data-toggle-open-class="m-box--open">
	<header class="m-box__header">
		<a href="#" data-toggle-trigger aria-controls="box-content-{{ id | default('example') }}" aria-expanded="false" class="m-box__link" aria-label="Toggle {{ heading }}">
			<svg class="m-box__icon" role="img">
				<use class="icon--action--md-plus" role="presentation" xlink:href="#icon--action--md-plus"/>
				<use class="icon--action--md-minus" role="presentation" xlink:href="#icon--action--md-minus"/>
			</svg>
		</a>
		<h2 class="m-box__title">
			<span class="m-box__focus">{{ title }}</span>
		</h2>
	</header>

	<div id="box-content-{{ id | default('example') }}" data-toggle-content>
		<div class="m-box__content m-rich-text">
			{% if type == 'term-list' %}
				{% include 'components/molecules/term-list/term-list' with content %}
			{% elseif content is iterable  %}
				{{ content|join("\n") }}
			{% else %}
				{{ content }}
			{% endif %}
		</div>
	</div>
</article>

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
81
82
83
84
85
86
87
88
.m-box {
  &__content {
    @include spacing(
      (
        "medium+": $spacing-05,
        "xlarge+": $spacing-06
      )
    );
  }

  @media print {
    &__content {
      padding-bottom: $spacing-08;
      padding-top: $spacing-05;
    }

    &__header {
      border-top-width: 1px;
    }

    &__title {
      padding-top: $spacing-03;
      @include f-heading-3;
    }

    &__link {
      display: none;
    }
  }

  @include breakpoint("small-") {
    @include icon-swap--openable;
    @include underline-focus;
    @include block-link;

    &__header {
      @include keyline;
      @include bar;
      flex-direction: row-reverse;
      padding: $spacing-04 0;
      position: relative;
    }

    &__title {
      @include f-heading-1;
    }

    &__link {
      position: static;
      display: flex;
      color: var(--color--action);
    }

    &__content {
      padding-bottom: $spacing-08;
    }

    [data-toggle-content] {
      height: 0;
      overflow: hidden;
      @include trans-show-hide;
    }

    &--open [data-toggle-content] {
      height: auto;
      @include trans-show-hide--active;
    }
  }

  @include breakpoint("medium+") {
    &__header {
      border-top-width: 1px;
    }

    &__title {
      padding-top: $spacing-03;
      @include f-heading-3;
    }

    &__link {
      display: none;
    }

    [data-toggle-content] {
      height: auto !important;
    }
  }
}