<div class="m-teaser-news">
<p class="alpha">Nyheter</p>
<ul class="m-teaser-news__list">
<li class="m-teaser-news__item">
<div class="a-meta">2018-12-04</div>
<a href="#" class="m-teaser-news__link">
<h2>Internetdagarna 2019</h2>
</a>
<a href="" class="a-tag">
<span class="a-tag__text">stockholm</span>
</a>
<a href="" class="a-tag">
<span class="a-tag__text">göteborg</span>
</a>
</li>
<li class="m-teaser-news__item">
<div class="a-meta">2019-01-22, Tid: 10:00</div>
<a href="#" class="m-teaser-news__link">
<h2>Lansering av Svenskarna och internet 2019</h2>
</a>
</li>
<li class="m-teaser-news__item">
<div class="a-meta">2019-05-13</div>
<a href="#" class="m-teaser-news__link">
<h2>Så säkrar du dina konton</h2>
</a>
<a href="" class="a-tag">
<span class="a-tag__text">stockholm</span>
</a>
<a href="" class="a-tag">
<span class="a-tag__text">göteborg</span>
</a>
</li>
</ul>
</div>
<div class="m-teaser-news">
<p class="alpha">{{title}}</p>
<ul class="m-teaser-news__list">
{{#each items}}
<li class="m-teaser-news__item">
{{> @meta text=time}}
<a href="#" class="m-teaser-news__link">
<h2>{{heading}}</h2>
</a>
{{#each tags}}
{{> @tag text=text url=url }}
{{/each}}
</li>
{{/each}}
</ul>
</div>
{
"title": "Nyheter",
"link_text": "Nätneutraliteten och den svenska lagstiftningen",
"background_image": "/assets/images/KPA_5090-5-4.jpg",
"items": [
{
"url": "http://www.iis.se",
"heading": "Internetdagarna 2019",
"time": "2018-12-04",
"tags": [
{
"text": "stockholm",
"url": "#"
},
{
"text": "göteborg",
"url": "#"
}
]
},
{
"url": "http://www.iis.se",
"heading": "Lansering av Svenskarna och internet 2019",
"time": "2019-01-22, Tid: 10:00",
"tags": false
},
{
"url": "http://www.iis.se",
"heading": "Så säkrar du dina konton",
"time": "2019-05-13",
"tags": [
{
"text": "stockholm",
"url": "#"
},
{
"text": "göteborg",
"url": "#"
}
]
}
]
}
@charset 'UTF-8';
@include molecule(teaser-news) {
height: 100%;
padding: rhythm(2);
border-radius: $border-radius;
background-color: var(--snow-color);
@include bp-up(md) {
padding: rhythm(2) rhythm(4);
}
@include e(list) {
margin: 0;
padding: 0;
list-style: none;
}
@include e(item) {
position: relative;
&:not(:last-child) {
margin-bottom: rhythm(3);
}
}
@include e(link) {
@extend %normalize-links;
color: currentcolor;
text-decoration: none;
&:hover,
&:focus {
color: $color-ruby;
text-decoration: underline;
}
&::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
No notes defined.