<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">
        <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">
		<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";
    
    @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);
    
    		@include bp-up(sm) {
    			margin-bottom: 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);
    	}
    }
    
  • URL: /components/raw/event-listing-item/_event-listing-item.scss
  • Filesystem Path: src/organisms/event-listing-item/_event-listing-item.scss
  • Size: 970 Bytes

No notes defined.