<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"
}
  • Content:
    @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);
    	}
    }
    
  • URL: /components/raw/event-listing-item/_event-listing-item.scss
  • Filesystem Path: src/organisms/event-listing-item/_event-listing-item.scss
  • Size: 1.6 KB

No notes defined.