<div class="c-pictogram">
<span class="c-pictogram__icon">
<svg class="c-icon--24 u-color-night-40">
<use xlink:href="#ic-person-black-24px"></use>
</svg> </span>
<p class="c-pictogram__text"><strong>Mario Rossi</strong></p>
</div>
<div class="c-pictogram{{#if modifier}} {{modifier}}{{/if}}">
{{#if icon}}
<span class="c-pictogram__icon">
{{> @icon icon }}
</span>
{{/if}}
<p class="c-pictogram__text">{{{ text }}}</p>
</div>
{
"icon": {
"symbol": "ic-person-black-24px",
"class": "c-icon--24 u-color-night-40"
},
"text": "<strong>Mario Rossi</strong>"
}
.c-pictogram {
display: flex;
align-items: center;
}
.c-pictogram__icon {
margin-right: remify(8px);
svg * {
fill: currentColor;
}
}
.c-pictogram__text {
@include font-scale(level-2);
color: primary(night, 120);
}
No notes defined.