1
2
3
4
{
  "title": "MBA Deadlines",
  "content": "<ol class=\"m-timeline-list\">\n\t\t\t<li class=\"m-timeline-list__item \">\n\t\t\t<strong class=\"m-timeline-list__item-title\">Entry</strong>\n\t\t\t<time datetime=\"2020-08\">August 2020</time>\n\t\t</li>\n\t\t\t<li class=\"m-timeline-list__item \">\n\t\t\t<strong class=\"m-timeline-list__item-title\">Early</strong>\n\t\t\t<time datetime=\"2019-10-04\">October 4, 2019</time>\n\t\t</li>\n\t\t\t<li class=\"m-timeline-list__item  m-timeline-list__item--current\">\n\t\t\t<strong class=\"m-timeline-list__item-title\">Merit Fellowship </strong>\n\t\t\t<time datetime=\"2020-01-03\">January 3, 2020</time>\n\t\t</li>\n\t\t\t<li class=\"m-timeline-list__item \">\n\t\t\t<strong class=\"m-timeline-list__item-title\">Final</strong>\n\t\t\t<time datetime=\"2020-04-10\">April 10, 2020</time>\n\t\t</li>\n\t\t\t<li class=\"m-timeline-list__item \">\n\t\t\t<strong class=\"m-timeline-list__item-title\">Deferred Enrollment</strong>\n\t\t\t<time datetime=\"2020-04-15\">April 15, 2020</time>\n\t\t</li>\n\t\t\t<li class=\"m-timeline-list__item \">\n\t\t\t<strong class=\"m-timeline-list__item-title\">January ’20 Entry </strong>\n\t\t\t<time datetime=\"2019-10-04\">October 4, 2019</time>\n\t\t</li>\n\t</ol>\n"
}

1
2
3
4
5
6
7
8
9
10
11
<article class="m-detail-box">
	<header class="m-detail-box__header">
		<h2 class="m-detail-box__title">{{ title }}</h4>
	</header>

	<div class="m-detail-box__content">
		<div>
			{{ content }}
		</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
.m-detail-box {
  &__header {
    @include spacing(
      (
        "xsmall": 8px,
        "medium+": 12px // @TODO - maybe should use $inner-spacing-01
      )
    );
  }

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

  &__content {
    @include spacing(
      (
        "xsmall": 16px,
        "medium+": 20px,
        "xlarge+": 28px
      )
    );

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    @include child-spacing-y();
    @include child-spacing-x();
  }

  @media print {
    width: 100%;
  }
}