<div class="info-item">
<div class="info-details">
<div class="row">
<div class="col-sm-2 col-item col-item-border">
<div class="info-details-date">01.01.2020 <br>20:00 Uhr</div>
</div>
<div class="col-sm-5 col-item col-item-border">
<div class="info-details-event">Thema</div>
</div>
<div class="col-sm-3 col-item">
<div class="info-details-location">Ort</div>
</div>
<div class="col-sm-2 info-details-cta">
<a href="#lorem" class="btn btn-primary">Details</a>
</div>
</div>
</div>
</div>
<div class="info-item">
<div class="info-details">
<div class="row">
<div class="col-sm-2 col-item col-item-border">
<div class="info-details-date">{{ date|raw }}</div>
</div>
<div class="col-sm-5 col-item col-item-border">
<div class="info-details-event">{{ event }}</div>
</div>
<div class="col-sm-3 col-item">
<div class="info-details-location">{{ location }}</div>
</div>
<div class="col-sm-2 info-details-cta">
<a href="{{ link_href }}" class="btn btn-primary">{{ link_text }}</a>
</div>
</div>
</div>
</div>
{
"location": "Ort",
"event": "Thema",
"date": "01.01.2020 <br>20:00 Uhr",
"link_href": "#lorem",
"link_text": "Details"
}
.info-item {
background: #fff;
//border-radius: 5px;
padding: 0 1rem !important;
margin-bottom: 2rem;
&:first-child {
margin-top: 1rem;
}
.info-details {
//font-family: "Crimson Text";
font-variant-numeric: lining-nums;
.col-item {
display: flex;
align-items: center;
}
.col-item-border {
@include media-breakpoint-up(sm) {
border-right: 1px solid $color-medium-grey;
}
}
.info-details-location {
}
.info-details-event {
font-size: 2.4rem;
font-style: italic;
}
.info-details-date {
br {
display: none;
@include media-breakpoint-up(md) {
display: block;
}
}
}
}
.btn {
width: 100%;
justify-content: center;
height: 5rem;
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 2rem;
}
}
There are no notes for this item.