<div class="m-byline">
<img class="m-byline__portrait" src="/assets/images/author.png" alt="Pennan Modemberg">
<span class="a-meta"><span class="small">Skribent</span></span>
<a href="" class="m-byline__link" title="Visa alla artiklar från skribenten">Pennan Modemberg</a>
<ul class="m-byline__list">
<li class="m-byline__list__item"><strong>Publicerad:</strong> 29 september 2020</li>
<li class="m-byline__list__item"><strong>Senast uppdaterad:</strong> 2 december 2020</li>
<li class="m-byline__list__item"><strong>Granskad av:</strong> Charlotte Sandberg, Polismyndigheten</li>
</ul>
</div>
<div class="m-byline">
{{#if author_image}}<img class="m-byline__portrait" src="{{author_image}}" alt="{{author_name}}">{{/if}}
<span class="a-meta"><span class="small">{{#if author_image}}Skribent{{else}}Skribent{{/if}}</span></span>
<a href="{{author_archive}}" class="m-byline__link" title="{{archive_text}}">{{author_name}}</a>
<ul class="m-byline__list">
<li class="m-byline__list__item"><strong>Publicerad:</strong> {{publish_date}}</li>
<li class="m-byline__list__item"><strong>Senast uppdaterad:</strong> {{update_date}}</li>
{{#if reviewer_name}}
<li class="m-byline__list__item"><strong>Granskad av:</strong> {{reviewer_name}}</li>
{{/if}}
</ul>
{{#if author_email}}
<figure class="m-byline__figure">
<svg class="m-byline__icon" viewbox="0 0 32 32" width="100%" height="100%">
<path d="M4 29h24v2H4zM10.3 26H4v-6.3L22.1 1.6l6.3 6.3L10.3 26zM6 24h3.5L25.6 7.9l-3.5-3.5L6 20.5V24z"></path><path d="M17.07 6.69l1.414-1.414 6.293 6.293-1.414 1.415z"></path>
</svg>
<a class="m-byline__link small" href="mailto:{{author_email}}">Kontakta mig</a>
</figure>
{{/if}}
</div>
{
"author_name": "Pennan Modemberg",
"author_archive": "",
"archive_text": "Visa alla artiklar från skribenten",
"author_email": false,
"author_image": "/assets/images/author.png",
"publish_date": "29 september 2020",
"update_date": "2 december 2020",
"reviewer_name": "Charlotte Sandberg, Polismyndigheten"
}
@charset 'UTF-8';
@include molecule(byline) {
width: 100%;
max-width: rem(400px);
[class*='meta'] {
margin-bottom: rhythm(1);
}
@include e(figure) {
display: flex;
align-items: center;
}
@include e(icon) {
width: rem(22px);
height: rem(22px);
margin-right: rhythm(0.5);
}
@include e(link) {
@extend %link-styles;
margin-left: rhythm(-0.5);
}
@include e(portrait) {
display: block;
width: rem(64px);
height: rem(64px);
margin-bottom: rhythm(1);
border-radius: 50%;
background-color: $color-concrete;
}
@include e(list) {
margin: rhythm(2) 0 rhythm(1) 0;
padding: 0;
list-style: none;
@include e(item) {
padding-top: 0;
padding-bottom: 0;
font-size: $size-medium-plus;
}
}
}
No notes defined.