<div class="header-event">
<div class="header-event__back"><a class="link link--back" href="#">Zur Übersicht</a></div>
<div class="header-event__headline"><span class="headline-kicker">Konferenzen<span class="u-hidden-visually">: </span></span>
<h1 class="headline headline--1">RDA Deutschland Tagung 2021</h1>
</div>
<div class="header-event__details">
<div class="header-event__details__item"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-calendar"></use>
</svg><span class="header-event__details__item__text">Fr, 22.02. – Mo, 26.02.2021 · 15:00 – 17:00 Uhr</span></div>
<div class="header-event__details__item"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-location"></use>
</svg><span class="header-event__details__item__text">Online</span></div><a class="header-event__details__item header-event__details__item--a" href="#"><svg class="icon icon--calendar-check" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-calendar-check"></use>
</svg><span class="header-event__details__item__text">Kalendereintrag</span></a>
</div>
<div class="header-event__button"><a class="button button--primary" href="#"><span class="button__inner"><svg class="icon icon--ticket" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-ticket"></use>
</svg><span class="button__text">zur Anmeldung</span></span></a></div>
</div>
#{tag || 'div'}.header-event()&attributes(attr)
if backlink
.header-event__back
+include('@link--back', backlink)
if headline
.header-event__headline
+include('@headline--headline-1', headline)
if details
.header-event__details
each item in details
if item.href
a.header-event__details__item.header-event__details__item--a(href=item.href)
+include('@icon', { icon: item.icon })
span.header-event__details__item__text #{item.text}
else
.header-event__details__item
+include('@icon', { icon: item.icon })
span.header-event__details__item__text #{item.text}
if button
.header-event__button
+include('@button', button)
{
"backlink": {
"href": "#",
"text": "Zur Übersicht"
},
"headline": {
"kicker": "Konferenzen",
"text": "RDA Deutschland Tagung 2021"
},
"details": [
{
"icon": "calendar",
"text": "Fr, 22.02. – Mo, 26.02.2021 · 15:00 – 17:00 Uhr"
},
{
"icon": "location",
"text": "Online"
},
{
"href": "#",
"icon": "calendar-check",
"text": "Kalendereintrag"
}
],
"button": {
"href": "#",
"icon": "ticket",
"text": "zur Anmeldung"
}
}
.header-event {
padding-bottom: 2rem;
@include mq($from: m) {
padding-bottom: 1rem;
}
}
.header-event__back {
padding-bottom: 3rem;
@include mq($from: xl) {
left: 9rem;
position: absolute;
top: -0.7rem;
}
}
.header-event__back__a {
color: $color-primary;
padding-left: 3rem;
position: relative;
}
.header-event__back__a .icon {
left: 0;
position: absolute;
top: 0.3rem;
}
.header-event__back__a__text {
display: inline-block;
font-weight: $font-weight-demi;
}
.header-event__headline {
margin-bottom: 3rem;
}
.header-event__details {
margin-bottom: 5rem;
@include mq($from: l) {
display: flex;
margin-bottom: 3rem;
}
}
.header-event__details__item--a .header-event__details__item__text {
color: $color-primary;
font-weight: $font-weight-demi;
position: relative;
&::after {
background: currentColor;
bottom: 0;
content: '';
display: block;
height: 0.2rem;
left: 0;
opacity: 0;
position: absolute;
right: 0;
transition: opacity 0.2s;
}
@media(hover: hover) and (pointer: fine) {
&:hover::after {
opacity: 1;
}
}
}
.header-event__details__item {
margin: 0 3rem 1rem 0;
padding-left: 3rem;
position: relative;
@include mq($from: m) {
margin: 0 3rem 0 0;
}
}
.header-event__details__item .icon {
left: 0;
position: absolute;
top: 0.4rem;
}
.header-event__details__item--a {
color: $color-primary;
}
There are no notes for this item.