<div class="m-download">
<div class="row align-items-center justify-content-center">
<div class="grid-auto">
<figure class="m-download__icon-file">
<svg class="icon">
<use xlink:href="#icon-file"></use>
</svg>
</figure>
</div>
<div class="grid u-position-static">
<div class="row flex-column">
<div class="grid-18 u-position-static">
<a href="https://www.iis.se/docs/Remiss_se_sv.pdf" class="beta m-download__link" download>
Svenskarna och internet 2019
</a>
</div>
<div class="grid-18 display-flex flex-column flex-sm-row justify-content-between align-items-start">
<p class="u-m-b-0">Rapport om Svenskarnas internetanvändande i pdf-format</p>
<div class="display-flex align-self-end flex-nowrap m-download__trigger">
<strong class="m-download__text">Ladda ner</strong>
<figure class="m-download__icon-download">
<svg class="icon">
<use xlink:href="#icon-download"></use>
</svg>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-download">
<div class="row align-items-center justify-content-center">
<div class="grid-auto">
<figure class="m-download__icon-file">
{{> @icon id="file"}}
</figure>
</div>
<div class="grid u-position-static">
<div class="row flex-column">
<div class="grid-18 u-position-static">
<a href="{{url}}" class="beta m-download__link" download>
{{link_text}}
</a>
</div>
<div class="grid-18 display-flex flex-column flex-sm-row justify-content-between align-items-start">
<p class="u-m-b-0">{{description}}</p>
<div class="display-flex align-self-end flex-nowrap m-download__trigger">
<strong class="m-download__text">{{download}}</strong>
<figure class="m-download__icon-download">
{{> @icon id="download"}}
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
{
"url": "https://www.iis.se/docs/Remiss_se_sv.pdf",
"link_text": "Svenskarna och internet 2019",
"description": "Rapport om Svenskarnas internetanvändande i pdf-format",
"background_image": "/assets/images/KPA_5090-5-4.jpg",
"download": "Ladda ner",
"icon": "arrow-forwards"
}
@charset 'UTF-8';
@include molecule(download) {
position: relative;
padding: rhythm(2.5);
border: 1px solid $color-peacock;
border-radius: $border-radius;
background-color: var(--snow-color);
@include e(link) {
display: block;
margin-bottom: rhythm(1);
color: currentcolor;
text-decoration: none;
&:hover,
&:focus {
color: $color-peacock;
text-decoration: underline;
}
&::after {
content: '';
display: block;
position: absolute;
z-index: z_index(background);
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@include e(icon-file) {
margin-bottom: rhythm(1);
line-height: 0;
@include bp-up(sm) {
margin-right: rhythm(0.5);
margin-bottom: 0;
}
}
@include e(icon-download) {
display: flex;
align-items: center;
justify-content: center;
width: rhythm(3.5);
height: rhythm(3.5);
margin-left: rhythm(1);
border-radius: $border-radius;
background-color: $color-peacock-light;
}
@include e(text) {
white-space: nowrap;
}
@include b(icon) {
width: rem(57px);
height: rem(78px);
color: var(--cyberspace-color);
fill: currentColor;
}
@include e(trigger) {
margin-top: rhythm(1);
margin-left: 0;
@include b(icon) {
width: $icon-size-medium;
height: $icon-size-medium;
color: var(--dark-color);
fill: currentColor;
}
@include bp-up(sm) {
margin-top: 0;
margin-left: rhythm(1);
}
}
}
No notes defined.