Internetstiftelsen Styleguide

Sections: Default 

<div class="site">
    <section class="o-section">
        <div class="wrapper o-section__content ">

            <h1>Section grey</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.</p>
        </div>
    </section>
    <section class="o-section o-section--white">
        <div class="wrapper o-section__content  o-section__content--rectangle-left">

            <h1>Section white</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.</p>
        </div>
    </section>
    <section class="o-section">
        <div class="wrapper o-section__content ">

            <h1>Section grey</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.</p>
        </div>
    </section>
    <section class="o-section o-section--white">
        <div class="wrapper o-section__content  o-section__content--rectangle-right">

            <h1>Section white</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.</p>
        </div>
    </section>
</div>
 
<div class="site">
	{{#each sections}}
	<section class="o-section{{#if type}} o-section--{{type}}{{/if}}">
		<div class="wrapper o-section__content {{#if modifier}} o-section__content--{{modifier}}{{/if}}">
			{{#if has_header}}
			<header>
				<div class="row">
					<div class="grid-18 grid-md-8 offset-md-1">
			{{/if}}
			{{#if meta}}<strong class="a-meta">Hjärtefråga</strong>{{/if}}
			<h1{{#if heading_class}} class="{{heading_class}}"{{/if}}>{{heading}}</h1>
			<p{{#if heading_class}} class="preamble"{{/if}}>{{text}}</p>
			{{#if has_header}}
					</div>
				</div>
			</header>
			{{/if}}
			{{#if has_grid}}
			<div class="row asymmetric-md u-m-b-2">
				<div class="grid-18 grid-md-6 u-m-b-2">
					<article class="m-card m-card--padded m-card--shadow">
						<img width="500" height="290" class="m-card__image m-card__media" alt="kvinna sitter med mobil." src="https://internetstiftelsen.se/app/uploads/2019/01/kvinna-med-mobil-500x290.jpg">
						<div class="m-card__content">
							<a href="https://digitalalektioner.se/" class="m-card__link"><h1 class="beta">Digitala lektioner</h1></a>
							<p>Digitala lektioner är en fri lärresurs med lektioner som täcker allt som rör digital kompetens i grundskolan.</p>
						</div>
					</article>
				</div>
				<div class="grid-18 grid-md-6 u-m-b-2">
					<article class="m-card m-card--padded m-card--shadow">
						<img width="500" height="290" class="m-card__image m-card__media" alt="Kvinna sitter vid dator i ett klassrum." src="https://internetstiftelsen.se/app/uploads/2019/01/ALX_7293-500x290.jpg">
						<div class="m-card__content">
							<a href="https://digitalalektioner.se/fortbildning/" class="m-card__link"><h1 class="beta">Fortbildning för pedagoger</h1></a>
							<p>Internetstiftelsen erbjuder kostnadsfri fortbildning för pedagoger kring digital kompetens.</p>
						</div>
					</article>
				</div>
				<div class="grid-18 grid-md-6 u-m-b-2">
					<article class="m-card m-card--padded m-card--shadow">
						<img width="500" height="290" class="m-card__image m-card__media" alt="Pojke sitter i en soffa och läser på sin laptop som finns i knäet" src="https://internetstiftelsen.se/app/uploads/2020/08/pojke-studerar-hemma-500x290.jpg">
						<div class="m-card__content">
							<a href="https://digitalalektioner.se/skola-overallt/" class="m-card__link"><h1 class="beta">Skola överallt med Digitala lektioner</h1></a>
							<p>Spridningen av coronaviruset gör att distansundervisning kan bli det nya normala för många lärare och elever.</p>
						</div>
					</article>
				</div>
			</div>
			{{/if}}
		</div>
	</section>
	{{/each}}
</div>
 
{
  "sections": [
    {
      "type": false,
      "modifier": false,
      "heading": "Section grey",
      "heading_class": false,
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum."
    },
    {
      "type": "white",
      "modifier": "rectangle-left",
      "heading": "Section white",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum."
    },
    {
      "type": false,
      "modifier": false,
      "heading": "Section grey",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum."
    },
    {
      "type": "white",
      "modifier": "rectangle-right",
      "heading": "Section white",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum."
    }
  ]
}
  • Content: 
    @charset "UTF-8";
@use "sass:math";
@use "sass:list";
@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;

$spacing: func.rhythm(6);

@include mixin.organism(section) {
	position: relative;
	padding: math.div($spacing, 1.5) 0;
	background-color: var(--ash-color);

	@include bem.m(white) {
		padding: $spacing 0;
		background-color: var(--snow-color);

		&::before,
		&::after {
			content: '';
			position: absolute;
			right: 0;
			left: 0;
			height: $spacing;
		}

		&::before {
			top: 0;
			background-image: linear-gradient(to right top, var(--snow-color) 0, var(--snow-color) 50%, var(--ash-color) 50.1%);
		}

		&::after {
			bottom: 0;
			background-image: linear-gradient(to left top, var(--ash-color) 0, var(--ash-color) 50%, var(--snow-color) 50.1%);
		}

		&:last-child {
			&::after {
				display: none;
			}
		}
	}

	@include breakpoint.bp-up(md) {
		padding: math.div($spacing * 1.25, 1.5) 0;

		@include bem.m('white') {
			padding: $spacing * 1.25 0;

			&::before,
			&::after {
				height: $spacing * 1.25;
			}
		}
	}

	@include breakpoint.bp-up(lg) {
		padding: math.div($spacing * 1.5, 1.5) 0;

		@include bem.m('white') {
			padding: $spacing * 1.5 0;

			&::before,
			&::after {
				height: $spacing * 1.5;
			}
		}
	}

	@include breakpoint.bp-up(xl) {
		padding: math.div($spacing * 2, 1.5) 0;

		@include bem.m('white') {
			padding: $spacing * 2 0;

			&::before,
			&::after {
				height: $spacing * 2;
			}
		}
	}

	@include bem.e(content) {
		position: relative;
		z-index: func.z_index(background);

		@include bem.m(peacock) {
			::selection {
				background-color: colors.$color-peacock-light;
			}

			::-moz-selection {
				background-color: colors.$color-peacock-light;
			}
		}

		@include bem.m(jade) {
			::selection {
				background-color: colors.$color-jade-light;
			}

			::-moz-selection {
				background-color: colors.$color-jade-light;
			}
		}

		@include bem.m(rectangle-left) {
			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: func.to_rem(575px);
				height: func.to_rem(575px);
				transform: translate(calc(-100% - #{func.to_rem(20px)}), -50%) rotate(-20deg);
				transform-origin: right bottom;
				background-color: colors.$color-peacock;
			}

			// Hide in IE11
			*::-ms-backdrop,
			&::after {
				display: none;
			}
		}

		@include bem.m(rectangle-right) {
			&::after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				z-index: 2;
				width: func.to_rem(450px);
				height: func.to_rem(166px);
				transform: translate(calc(100% + #{func.to_rem(20px)}), 50%) rotate(20deg);
				transform-origin: left bottom;
				background-color: colors.$color-ruby;
			}

			// Hide in IE11
			*::-ms-backdrop,
			&::after {
				display: none;
			}
		}
	}
}
  • URL: /components/raw/sections/_sections.scss
  • Filesystem Path: src/organisms/sections/_sections.scss
  • Size: 3.2 KB

No notes defined.