<a href="#" class="download " download>
<div class="download__content">
<span class="download__name">Shifting Gears: Passive House Car Dealership in the Making</span>
<p class="download__description">PDF, 538.87 kb</p>
</div>
<div class="download__icon-wrapper">
<svg class="icon download__icon" focusable="false">
<use xlink:href="#icon-download"></use>
</svg>
<span class="download__label">Download</span>
</div>
</a>
<a href="#" class="download {{getmodifiers modifiers 'download'}}" download>
<div class="download__content">
<span class="download__name">{{name}}</span>
<p class="download__description">{{description}}</p>
</div>
<div class="download__icon-wrapper">
{{> @icon id='download' additionalClasses="download__icon"}}
<span class="download__label">Download</span>
</div>
</a>
{
"name": "Shifting Gears: Passive House Car Dealership in the Making",
"description": "PDF, 538.87 kb"
}
.download {
display: block;
color: $color-black;
border: 1px solid $color-gray-2;
&:hover {
text-decoration: none;
}
@include breakpoint($s) {
display: flex;
}
&--margin-y {
margin: size(4) 0;
+ .download {
margin-top: size(-2);
}
}
}
.download__content {
flex-grow: 1;
padding: size(3);
}
.download__name {
font-weight: $font-weight-bold;
}
.download__description {
color: $color-gray-4;
margin: 0;
}
.download__icon-wrapper {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
padding: size(2);
border-top: 1px solid $color-gray-2;
@include breakpoint($s) {
flex-direction: column;
justify-content: center;
border: none;
border-left: 1px solid $color-gray-2;
}
}
.download__icon {
display: block;
width: size(4);
height: size(4);
fill: $color-green-dark;
@include color-theme {
fill: $arg-theme-color;
}
}
.download__label {
font-size: size(1.75);
color: $color-green-dark;
@include color-theme {
color: $arg-theme-color;
}
}
No notes defined.