<div class="summary">
<header class="summary__header">
<h5 class="summary__headline">Allgemeine Angaben</h5>
<a class="icon-block summary__link" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-ab8d" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Bearbeiten
</a>
</header>
<dl class="summary__list">
<dt class="summary__list-title">Ich bin</dt>
<dd class="summary__list-description">Arbeitnehmer</dd>
<dt class="summary__list-title">bei</dt>
<dd class="summary__list-description">AOK - Die Gesundheitskasse für Niedersachsen</dd>
<dt class="summary__list-title">bisher</dt>
<dd class="summary__list-description">gesetzlich familienversichert</dd>
</dl>
</div>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
//- Render summary
.summary&attributes(attr)
if headline || link
header.summary__header
if headline
h5.summary__headline #{headline}
if link
!= include('@icon-block', { link: '#', text: link.title, icon: link.icon, attr: { class: 'summary__link' } })
if items
dl.summary__list
each item in items
dt.summary__list-title #{item.title}
dd.summary__list-description #{item.description}
{
"headline": "Allgemeine Angaben",
"link": {
"title": "Bearbeiten",
"icon": "internal-link"
},
"items": [
{
"title": "Ich bin",
"description": "Arbeitnehmer"
},
{
"title": "bei",
"description": "AOK - Die Gesundheitskasse für Niedersachsen"
},
{
"title": "bisher",
"description": "gesetzlich familienversichert"
}
]
}
.summary {
padding-bottom: 3rem;
padding-top: 2rem;
}
.summary__header {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.summary__headline {
color: $color-blue;
font-size: 1.7rem;
}
.summary__link {
font-size: 1.5rem;
}
.summary__list {
@include clearfix();
font-size: 1.2rem;
@include mq($from: m) {
font-size: 1.5rem;
}
}
.summary__list-title {
clear: left;
float: left;
width: 40%;
}
.summary__list-description {
float: right;
margin-left: 0;
width: 60%;
}
.summary__list-title,
.summary__list-description {
margin-bottom: 1.5rem;
&:last-of-type {
margin-bottom: 0;
}
}
There are no notes for this item.