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 three parts:
<aside class="summary-box highlight highlight--top">
<div class="highlight__inner">
{% 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 '@accolade' %}
</div>
{% include '@button' with {
'text': 'Register for this event',
'type': 'primary',
'modifier': 'icon-arrow-right'
} %}
</aside>
<aside class="summary-box highlight highlight--top">
<div class="highlight__inner">
<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>
<div class="accolade "></div>
</div>
<button type="button" class="button button-primary icon-arrow-right ">
Register for this event
</button>
</aside>
{
"tags": [
"Inner city",
"Another tag"
]
}
.summary-box {
text-align: center;
ul.icon-list {
width: 100%;
margin: 0;
time {
@include bold-text;
display: block;
}
}
.highlight__inner {
position: relative;
margin-bottom: 1.5rem; // Save room for the accolade
text-align: left;
&::before {
top: -3.5rem;
}
.accolade {
bottom: -1rem;
background-color: inherit;
&::before,
&::after {
@include theme('background-color', 'color-secondary', 'summary-box-accolade-background');
}
}
}
.button {
@include button-large;
}
}