<div class="site">
<section class="o-section">
<div class="wrapper o-section__content ">
<header>
<div class="row">
<div class="grid-18 grid-md-8 offset-md-1">
<h1 class="supersize">With header and assymetric grid</h1>
<p class="preamble">Internetstiftelsens vision är att alla vill, vågar och kan använda internet. Här har vi samlat våra utbildningssatsningar som gör att du enklare kan förstå och använda internets tjänster, och som bidrar till ökad digital kompetens.</p>
</div>
</div>
</header>
</div>
</section>
<section class="o-section o-section--white">
<div class="wrapper o-section__content o-section__content--rectangle-left o-section__content--peacock">
<header>
<div class="row">
<div class="grid-18 grid-md-8 offset-md-1">
<strong class="a-meta">Hjärtefråga</strong>
<h1>Section white</h1>
<p>Vi tycker om och tror på internet och brinner för att dela med oss av vår kunskap. Vår vision är att alla i Sverige vill, vågar och kan använda internet. För att det ska bli verklighet krävs kunskap om hur internet och digital teknik fungerar, både vad gäller tekniska aspekter och saker som källkritik och riskmedvetenhet.</p>
</div>
</div>
</header>
<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>
</div>
</section>
<section class="o-section">
<div class="wrapper o-section__content o-section__content--rectangle-right o-section__content--jade">
<header>
<div class="row">
<div class="grid-18 grid-md-8 offset-md-1">
<strong class="a-meta">Hjärtefråga</strong>
<h1>Section grey</h1>
<p>Vi verkar för ett internet som bidrar positivt till människan och samhället. Därför är vi intresserade av hur internet i Sverige används och hur vi kan hjälpa medborgarna att använda det bättre och försäkra sig om att de får vad de betalar för.</p>
</div>
</div>
</header>
<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>
</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": "With header and assymetric grid",
"heading_class": "supersize",
"has_header": true,
"text": "Internetstiftelsens vision är att alla vill, vågar och kan använda internet. Här har vi samlat våra utbildningssatsningar som gör att du enklare kan förstå och använda internets tjänster, och som bidrar till ökad digital kompetens."
},
{
"type": "white",
"modifier": "rectangle-left o-section__content--peacock",
"heading": "Section white",
"has_header": true,
"has_grid": true,
"meta": true,
"text": "Vi tycker om och tror på internet och brinner för att dela med oss av vår kunskap. Vår vision är att alla i Sverige vill, vågar och kan använda internet. För att det ska bli verklighet krävs kunskap om hur internet och digital teknik fungerar, både vad gäller tekniska aspekter och saker som källkritik och riskmedvetenhet."
},
{
"type": false,
"modifier": "rectangle-right o-section__content--jade",
"heading": "Section grey",
"has_header": true,
"has_grid": true,
"meta": true,
"text": "Vi verkar för ett internet som bidrar positivt till människan och samhället. Därför är vi intresserade av hur internet i Sverige används och hur vi kan hjälpa medborgarna att använda det bättre och försäkra sig om att de får vad de betalar för."
}
]
}
@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;
}
}
}
}
No notes defined.