<article class="o-event-listing-item u-b-ruby">
<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": "ruby"
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;
@use '../../vendor/baseline/plumber' as plumber;
@include mixin.organism(event-listing-item) {
position: relative;
padding: func.rhythm(2);
border-left: 4px solid;
border-radius: var.$border-radius;
background-color: colors.$color-snow;
font-size: var.$size-medium-plus;
@include breakpoint.bp-up(md) {
font-size: var.$size-base;
}
@include bem.e(upper) {
position: static;
flex-direction: column;
margin-bottom: func.rhythm(1);
}
@include bem.e(lower) {
align-items: center;
justify-content: space-between;
margin-top: func.rhythm(1);
}
@include bem.e(heading) {
@include plumber.plumber(
$font-size: 2.5,
$leading-bottom: 1
);
font-family: var.$font-family-headings;
line-height: 1.75rem;
}
@include bem.e(footer) {
margin-bottom: func.rhythm(2);
margin-top: func.rhythm(2);
@include breakpoint.bp-up(sm-xs) {
margin-bottom: 0;
margin-top: 0;
}
}
@include bem.e(button) {
margin-right: func.rhythm(1);
margin-left: func.rhythm(1);
}
@include bem.e(icon-wrapper) {
display: flex;
align-items: center;
}
@include bem.e(icon) {
margin-right: func.rhythm(1);
}
}
No notes defined.