Internetstiftelsen Styleguide

Event listing: With Jade Border Color 

<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 bem.e(button) {

	}

	@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(
			var.$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.