<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--download" id="icon-64f2" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg>Download-Link<span class="icon-block__sub"> (PDF, 2MB)</span>
</a>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
//- Tag
tag = 'span';
if (attr.href || link) {
attr.href = attr.href || link || '';
tag = 'a';
}
//- Process options
if (modifier) {
attr.class.push(`icon-block--${modifier}`);
}
//- Render atom
#{tag}.icon-block&attributes(attr)
//- Icon
!= include('@icon', {icon, attr: {class: 'icon-block__icon'}})
//- Content/text
if content
!= renderPug(content)
else if text
| #{text}
//- Subinformation
if sub
span.icon-block__sub #{sub}
{
"text": "Download-Link",
"icon": "download",
"sub": "(PDF, 2MB)",
"link": "#"
}
.icon-block {
display: inline-block;
&[href] {
@include link($color-blue-light, $color-blue);
font-weight: bold;
}
}
.icon-block__icon {
color: $color-red;
margin-right: 1.2rem;
}
.icon-block__sub {
display: inline-block;
font-weight: $root-font-weight;
margin-left: 0.5rem;
}
.icon-list .icon-block {
display: block;
padding-left: calc(1em + 1.2rem);
}
.icon-list .icon-block__icon {
margin-left: calc(-1em - 1.2rem);
}
There are no notes for this item.