<ul class="list-unstyled list-highlight key-dates__content">
<li class="list-highlight__item">
<h3 class="list-highlight__title">Stage 1</h3>
<p class="list-highlight__date">1 January 2017</p>
</li>
<li class="list-highlight__item">
<h3 class="list-highlight__title">Stage 2</h3>
<p class="list-highlight__date">2 January 2017</p>
</li>
<li class="list-highlight__item">
<h3 class="list-highlight__title">Stage 3</h3>
<p class="list-highlight__date">3 January 2017</p>
</li>
</ul>
// specificity wars, again because of .enhanced
.key-dates__content.key-dates__content {
.list-highlight {
margin-left: 0;
margin-top: $grid-typo-spacing-m;
}
.list-highlight-simple__item {
@include rem(margin-bottom, 10px);
padding-bottom: 0;
}
.list-highlight__item {
@include rem(margin, 0 0 0 5px);
@include rem(padding, 0 0 15px 20px);
@include rem(left, 5px);
border-top: 0;
position: relative;
&:last-child:before {
display: none;
}
&:before,
&:after {
content: '';
display: block;
position: absolute;
top: 0;
}
&:after {
@include rem(border-radius, 10px);
@include rem(width, 8px);
@include rem(height, 8px);
@include rem(border-width, 2px);
@include rem(left, -7px);
@include rem(top, 5px);
background-color: $bodyBackgroundColour;
border-color: $keydatesBorderColour;
border-style: solid;
z-index: 2;
}
&:before {
@include rem(width, 2px);
@include rem(left, -2px);
@include rem(top, 5px);
background-color: $keydatesBorderColour;
height: 100%;
z-index: 1;
}
}
.collapsible__content {
.list-unstyled {
.list-highlight__item {
@include rem(margin, 0 0 0 5px);
@include rem(padding, 0 0 15px 20px);
}
}
}
.list-highlight__date {
@include rem(font-size, $bodyFontSize);
clear: both;
display: block;
font-weight: normal;
line-height: inherit;
margin: 0;
}
.list-highlight__title {
@include rem(margin-bottom, $grid-typo-spacing-xxs);
}
.list-highlight__description {
font-weight: normal;
line-height: inherit;
}
}
A promo showing key dates for a funding scheme.
Example usage: https://wellcome.ac.uk/funding/senior-research-fellowships-basic-biomedical-science
{
"items": [
{
"title": "Stage 1",
"date": "1 January 2017"
},
{
"title": "Stage 2",
"date": "2 January 2017"
},
{
"title": "Stage 3",
"date": "3 January 2017"
}
]
}