<article class="o-event-listing-item u-b-jade">
<div class="row">
<div class="o-event-listing-item__upper grid-18">
<span class="meta">22 januari 2021, 17:00-20:00</span>
<h3 class="o-event-listing-item__heading"><a href="#" class="u-link-area">Förvaltning och ansvar kring öppna data</a></h3>
<strong>Arrangeras av:</strong> Job Tech Dev (Arbetsförmedlingen), TrafikLab (Samtrafiken)
</div>
</div>
<div class="row o-event-listing-item__lower align-items-sm-end">
<div class="grid-auto u-position-static">
<div class="o-event-listing-item__footer row no-gutters flex-wrap">
<div class="o-event-listing-item__icon-wrapper grid-auto">
<svg class="icon o-event-listing-item__icon u-icon u-icon--medium">
<use xlink:href="#icon-pin"></use>
</svg>
Stockholm <span class="u-divider-pipe u-m-x-2"></span>
</div>
<div class="o-event-listing-item__icon-wrapper grid-auto">
<svg class="icon o-event-listing-item__icon u-icon u-icon--medium">
<use xlink:href="#icon-streaming"></use>
</svg>
Sänds live
</div>
</div>
</div>
<a class="a-button a-button--lemon o-event-listing-item__button">
<span class="a-button__text">Läs mer</span>
</a>
</div>
</article>
<article class="o-event-listing-item u-b-{{borderColor}}">
<div class="row">
<div class="o-event-listing-item__upper grid-18">
<span class="meta">22 januari 2021, 17:00-20:00</span>
<h3 class="o-event-listing-item__heading"><a href="#" class="u-link-area">Förvaltning och ansvar kring öppna data</a></h3>
<strong>Arrangeras av:</strong> Job Tech Dev (Arbetsförmedlingen), TrafikLab (Samtrafiken)
</div>
</div>
<div class="row o-event-listing-item__lower align-items-sm-end">
<div class="grid-auto u-position-static">
<div class="o-event-listing-item__footer row no-gutters flex-wrap">
<div class="o-event-listing-item__icon-wrapper grid-auto">
{{> @icon id="pin" additional_classes="o-event-listing-item__icon u-icon u-icon--medium"}}
Stockholm <span class="u-divider-pipe u-m-x-2"></span>
</div>
<div class="o-event-listing-item__icon-wrapper grid-auto">
{{> @icon id="streaming" additional_classes="o-event-listing-item__icon u-icon u-icon--medium"}}
Sänds live
</div>
</div>
</div>
{{> @button text="Läs mer" modifiers="lemon" additional_classes="o-event-listing-item__button" }}
</div>
</article>
{
"borderColor": "jade"
}
@charset "UTF-8";
@include organism(event-listing-item) {
@include e(button) {
}
position: relative;
padding: rhythm(2);
border-left: 4px solid;
border-radius: $border-radius;
background-color: $color-snow;
font-size: $size-medium-plus;
@include bp-up(md) {
font-size: $size-base;
}
@include e(upper) {
position: static;
flex-direction: column;
margin-bottom: rhythm(1);
}
@include e(lower) {
align-items: center;
justify-content: space-between;
margin-top: rhythm(1);
}
@include e(heading) {
@include plumber(
$font-size: 2.5,
$leading-bottom: 1
);
font-family: $font-family-headings;
line-height: 1.75rem;
}
@include e(footer) {
margin-bottom: rhythm(2);
margin-top: rhythm(2);
@include bp-up(sm-xs) {
margin-bottom: 0;
margin-top: 0;
}
}
@include e(button) {
margin-right: rhythm(1);
margin-left: rhythm(1);
}
@include e(icon-wrapper) {
display: flex;
align-items: center;
}
@include e(icon) {
margin-right: rhythm(1);
}
}
No notes defined.