<article class="m-card m-card--teaser">
<img src="/assets/images/KPA_5090-5-4.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
<div class="m-card__content">
<h1 class="alpha">
Nätneutraliteten och den svenska lagstiftningen
</h1>
<p class="m-card__text">Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.</p>
<div class="m-card__bottom">
<a href="#" class="a-button a-button--lemon">
<span class="a-button__text">Button</span>
</a>
</div>
</div>
</article>
<{{#if top_level}}article{{else}}div{{/if}} class="m-card{{#if is_padded}} m-card--padded{{/if}}{{#if is_wide}} m-card--wide{{/if}}{{#if has_shadow}} m-card--shadow{{/if}}{{#if has_border}} m-card--bordered{{/if}}{{#if teaser}} m-card--teaser{{/if}}{{#if modifier}} {{modifier}}{{/if}}" {{#if id}} id="{{id}}"{{/if}}>
{{#if has_icon_overlay}}
{{>@icon-overlay overlay_icon="play" additional_classes="m-card__image m-card__media" data-youtube="3GfOTUoBpRw"}}
{{/if}}
{{#if img_url}}
<img src="{{img_url}}" class="m-card__image m-card__media" alt="{{alt}}">
{{/if}}
{{#if has_map}}
<div class="m-card__map m-card__media">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d8147.136286742923!2d18.0823964!3d59.3031634!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd9fb0cec146dfb7a!2sGoto%2010!5e0!3m2!1sen!2sse!4v1587631996713!5m2!1sen!2sse"
class="m-card__map__elm" width="100%" height="100%" allowfullscreen="" aria-hidden="false"
tabindex="0"></iframe>
</div>
{{/if}}
<div class="m-card__content">
{{#if has_meta}}
<div class="m-card__meta">
{{#if date}}{{> @meta text="2018-10-05" icon=false }}{{/if}}
{{#if read_time}}{{render '@meta--lower-case'}}{{/if}}
</div>
{{/if}}
{{#if url}}
<a href="{{url}}" class="m-card__link">
<{{#if top_level}}h1{{else}}h2{{/if}} class="{{#if teaser}}alpha{{/if}}">
{{{title}}}
{{#if icon}}
{{> @icon id=icon additional_classes="m-card__headline__icon"}}
{{/if}}
</{{#if top_level}}h1{{else}}h2{{/if}}>
</a>
{{else}}
<{{#if top_level}}h1{{else}}h2{{/if}} class="{{#if teaser}}alpha{{/if}}">
{{{title}}}
{{#if icon}}
{{> @icon id=icon additional_classes="m-card__headline__icon"}}
{{/if}}
</{{#if top_level}}h1{{else}}h2{{/if}}>
{{/if}}
{{#if excerpt}}<p class="m-card__text">{{{excerpt}}}</p>{{/if}}
{{#if has_contact_info}}{{> '@features-box' (contextData '@features-box--contact-info') additional_classes="u-p-0" modifier="contact-info" color="snow"}}{{/if}}
{{#if tag}}
<div class="m-card__bottom">
{{> @tag text="Utbildning" href="#" }}
{{> @tag text="goto10" href="#" }}
</div>
{{else if has_button}}
<div class="m-card__bottom">
<a href="#" class="a-button {{#if button_color}}a-button--{{button_color}}{{/if}}">
<span class="a-button__text">{{button_text}}</span>
</a>
</div>
{{/if}}
{{#if youtube}}
<div class="m-card__bottom u-visuallyhidden">
<a href="#" class="a-button" data-youtube-play>
<span class="a-button__text">Play video</span>
</a>
<a href="#" class="a-button" data-youtube-stop>
<span class="a-button__text">Stop video</span>
</a>
</div>
<script>
function playVideo(el) {
const parent = el.closest('.m-card');
if (!parent) {
return;
}
const youtubeEl = parent.querySelector('[data-youtube]');
youtubeEl.click();
}
function stopVideo(el) {
const parent = el.closest('.m-card');
if (!parent) {
return;
}
const youtubeEl = parent.querySelector('[data-youtube]');
if (youtubeEl.youtube) {
youtubeEl.youtube.stopVideo();
}
}
document.addEventListener('click', (e) => {
const play = e.target.closest('[data-youtube-play]');
if (play) {
e.preventDefault();
playVideo(play);
}
const stop = e.target.closest('[data-youtube-stop]');
if (stop) {
e.preventDefault();
stopVideo(stop);
}
})
</script>
{{/if}}
</div>
</{{#if top_level}}article{{else}}div{{/if}}>
{
"id": false,
"alt": "Hands typing on laptop",
"img_url": "/assets/images/KPA_5090-5-4.jpg",
"title": "Nätneutraliteten och den svenska lagstiftningen",
"url": false,
"excerpt": "Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.",
"is_padded": false,
"is_wide": false,
"has_shadow": false,
"has_button": true,
"has_border": false,
"has_meta": false,
"read_time": true,
"date": true,
"has_map": false,
"has_contact_info": false,
"has_icon_overlay": false,
"overlay_icon": false,
"teaser": true,
"top_level": true,
"icon": false,
"button_color": "lemon",
"button_text": "Button",
"modifier": false
}
@charset 'UTF-8';
@include molecule(card) {
display: flex;
position: relative;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: $border-radius;
@include e(image) {
display: block;
width: 100%;
border-radius: $border-radius;
}
@include e(map) {
display: block;
position: relative;
padding-top: 56.25%;
overflow: hidden;
border-radius: $border-radius;
> iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
@include bp-up(lg) {
min-height: rhythm(44);
padding-top: 0;
> iframe {
position: static;
}
}
}
@include e(link) {
color: var(---cyberspace-color);
text-decoration: none;
&::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
&:hover,
&:focus {
color: $color-ruby;
text-decoration: underline;
> h1,
> h2 {
> span[class*='color'] {
color: $color-ruby !important;
text-decoration: underline !important;
}
}
}
}
@include e(headline) {
@include e(icon) {
position: relative;
width: $icon-size-medium;
height: $icon-size-medium;
transform: translateY(rem(1px));
fill: currentColor;
}
}
@include e(meta) {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-between;
margin-bottom: rhythm(1);
}
@include e(content) {
&:first-child {
padding: rhythm(3) 0;
}
&:not(:first-child) {
margin-top: rhythm(2);
padding-bottom: rhythm(3);
}
> :last-child {
margin-bottom: 0;
}
}
@include e(text) {
margin-top: rhythm(1);
}
@include m(shadow) {
@include card-shadow($color-cyberspace, 0.2);
}
@include m(padded) {
background-color: var(--snow-color);
@include e(media) {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
@include e(content) {
padding-right: rhythm(2);
padding-left: rhythm(2);
p {
margin-top: rhythm(1);
}
@include bp-up(md) {
padding-right: rhythm(4);
padding-left: rhythm(4);
}
}
&.wp-block-iis-visualization {
background-color: transparent;
@include e(content) {
p {
margin-top: 0;
}
}
&--no-padding > {
@include e(content) {
padding: 0;
}
}
}
}
@include m(bordered) {
border-top: rem(4px) solid $color-ocean;
}
@include e(bottom) {
margin-top: rhythm(2);
}
@include m(wide) {
height: auto;
@include bp-up(md) {
flex-direction: row;
height: auto;
h1,
h2 {
font-size: rem(32px);
line-height: 1.2;
}
@include e(content) {
display: flex;
flex-basis: 50%;
flex-direction: column;
padding-top: rhythm(2);
}
@include e(image) {
display: block;
object-fit: cover;
object-position: 50% center;
}
@include e(media) {
max-width: 50%;
margin-bottom: 0;
border-top-left-radius: $border-radius;
border-top-right-radius: 0;
border-bottom-left-radius: $border-radius;
}
picture {
display: flex;
width: 100%;
max-width: 50%;
@include e(media) {
max-width: 100%;
}
}
@include e(bottom) {
margin-top: 0;
}
@include m(flipped) {
flex-direction: row-reverse;
@include e(media) {
border-top-right-radius: $border-radius;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: $border-radius;
}
}
@include m(stretch) {
height: 100%;
}
}
}
@include m(teaser) {
display: block;
overflow: hidden;
&:hover,
&:focus {
img {
opacity: 0.8;
}
}
&::after {
content: '';
position: absolute;
z-index: z_index(background);
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity 0.75s ease-out;
border-radius: $border-radius;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-cyberspace, 0) 35%, rgba($color-cyberspace, 1) 100%);
}
@include e(image) {
width: 100%;
max-width: none;
height: 100%;
transition: opacity 0.25s ease-out;
border-radius: 0;
object-fit: cover;
}
@include e(content) {
display: flex;
position: absolute;
z-index: z_index(middleground);
top: 0;
right: 0;
bottom: 0;
left: 0;
flex-direction: column;
align-content: stretch;
justify-content: flex-end;
padding: rhythm(4);
color: var(--snow-color);
text-shadow: $text-shadow;
}
@include e(link) {
color: var(--snow-color);
}
@include e(text) {
margin-top: 0;
color: var(--snow-color);
}
@include e(bottom) {
margin-top: 0;
}
@include e(meta) {
* {
color: var(--snow-color);
}
svg {
fill: var(--snow-color);
}
}
}
@include m(mini) {
padding: rhythm(1) rhythm(2);
background-color: $color-snow;
@include bp-up(md) {
padding: rhythm(2) rhythm(3);
}
}
}
No notes defined.