Use the summary component on detail pages to highlight the data that you want users to remember after they’ve seen the page.
The summary component works best:
Do not use the summary component to show long text or complex content.
Do not use the summary component on overview or filter pages. Only use the summary component on detail pages.
The summary component consists of 2 parts:
<aside class="summary-box">
{% include '@list' with {
'type': 'icon-list',
'icon_items': [
'<i class="icon-calendar" aria-hidden="true"></i><span><time datetime="2018-11-18T18:00:00+02:00">Saturday 18 november 2018 between 18:00 and 22:00</time>Saturday 18 november with continuous activities</span>',
'<i class="icon-marker" aria-hidden="true"></i>Inner city',
]
} %}
{% include '@button' with {
'text': 'Register for this event',
'type': 'secondary',
'modifier': 'icon-arrow-right'
} %}
</aside>
<aside class="summary-box">
<ul class="icon-list ">
<li><i class="icon-calendar" aria-hidden="true"></i><span><time datetime="2018-11-18T18:00:00+02:00">Saturday 18 november 2018 between 18:00 and 22:00</time>Saturday 18 november with continuous activities</span></li>
<li><i class="icon-marker" aria-hidden="true"></i>Inner city</li>
</ul>
<button type="button" class="button button-secondary icon-arrow-right ">
Register for this event
</button>
</aside>
/* No context defined. */
.summary-box {
@include theme('background-color', 'color-secondary-light', 'summary-box-background-color');
padding: 1.5rem;
ul.icon-list {
@include medium-text;
width: 100%;
margin: 0 0 1rem;
@include tablet {
@include large-text;
}
i {
&::before {
position: relative;
top: 2px;
}
}
time {
@include semi-bold-text;
display: block;
}
li {
line-height: 1.6rem;
&:last-of-type {
@include semi-bold-text;
}
}
}
.button {
@include button-medium;
@include tablet {
@include button-large;
}
}
}