<div class="person ">
<figure class="image image--fluid person__image ">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<div class="person__name">Name Ipsum</div>
<div class="person__info">CEO of Assistant Managers <br> <a href="mailto:ceo@mail.com">ceo@mail.com</a> <br> <a href="tel:+37253251166">+372 53 251 166</a></div>
<a href="#" class="link person__link">Visit Linkedin<svg class="icon link__icon person__link-icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-right-top-24"></use>
</svg>
</a>
</div>
<div class="person {{ modifier }} {{ class }}">
{% if data.image %}
{% include '@image' with { class: 'person__image ', modifier: 'image--fluid', data: data.image|srcset('389x505') } %}
{% endif %}
{% if data.name %}
<div class="person__name">{{ data.name }}</div>
{% endif %}
{% if data.info %}
<div class="person__info">{{ data.info }}</div>
{% endif %}
{% if data.links %}
{% for link in data.links %}
<a href="{{ link.link }}" class="link person__link">{{ link.title }}{% include '@icon' with {name: 'tiny-right-top-24', modifier: '', class: 'link__icon person__link-icon'} %}</a>
{% endfor %}
{% endif %}
</div>
{
"language": "en-US",
"data": {
"image": true,
"name": "Name Ipsum",
"info": "CEO of Assistant Managers <br> <a href=\"mailto:ceo@mail.com\">ceo@mail.com</a> <br> <a href=\"tel:+37253251166\">+372 53 251 166</a>",
"links": [
{
"title": "Visit Linkedin",
"link": "#"
}
]
}
}
.person {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.person__name {
margin-top: 16px;
margin-bottom: 5px;
@include bp(sm-min) {
margin-top: 25px;
}
}
.person__info {
padding: 0 5px;
font-size: $font-size-small;
line-height: 1.8;
}
.person__info a {
text-decoration: underline;
font-weight: $font-weight-regular;
line-height: $line-height-small;
@include bp(sm-min) {
text-decoration: none;
}
}
.person__link {
font-weight: $font-weight-regular;
text-decoration: underline;
font-size: $font-size-tiny;
line-height: $line-height-tiny;
@include bp(sm-min) {
font-size: $font-size-small;
line-height: $line-height-small;
text-decoration: none;
}
}
.person__link-icon {
display: none;
@include bp(sm-min) {
display: inline-block;
}
}
.person__image {
width: 100%;
}
.image__img {
.person__image & {
width: 100%;
}
}
import './person.scss';