<div class="author-card ">
<figure class="author-card__figure">
<img src="/mocks/img/alexander-miletti.png" class="author-card__image" alt="#" />
</figure>
<div class="author-card__content">
<span class="author-card__label">Author</span>
<h3 class="author-card__title">Jakob Strømann-Andersen</h3>
<p class="author-card__body">Partner, Head of Sustainability Engineering at Henning Larsen, Charlottenlund, Denmark</p>
</div>
</div>
<div class="author-card {{getmodifiers modifiers 'author-card'}}">
<figure class="author-card__figure">
<img src="{{image}}" class="author-card__image" alt="#" />
</figure>
<div class="author-card__content">
<span class="author-card__label">{{label}}</span>
<h3 class="author-card__title">{{title}}</h3>
<p class="author-card__body">{{body}}</p>
</div>
</div>
{
"layoutMaxWidth": "360px",
"image": "/mocks/img/alexander-miletti.png",
"label": "Author",
"title": "Jakob Strømann-Andersen",
"body": "Partner, Head of Sustainability Engineering at Henning Larsen, Charlottenlund, Denmark"
}
.author-card {
text-align: center;
&--vertical {
display: flex;
align-items: center;
flex-direction: row;
text-align: left;
}
}
.author-card__figure {
margin: 0 0 size(1) 0;
flex-shrink: 0;
.author-card--vertical & {
margin: 0 size(1) 0 0;
@include breakpoint($l) {
margin-right: size(2);
}
}
}
.author-card__image {
width: size(6);
height: size(6);
border-radius: 100%;
display: block;
margin: 0 auto;
@include breakpoint($l) {
width: size(10);
height: size(10);
}
}
.author-card__title {
font-size: size(1.75);
line-height: size(2.25);
margin: 0;
@include breakpoint($l) {
font-size: size(2);
line-height: size(3);
}
}
.author-card__label,
.author-card__body {
color: $color-gray-3;
font-size: size(1.5);
line-height: size(2);
@include breakpoint($l) {
font-size: size(1.75);
line-height: size(2.5);
}
}
.author-card__body {
color: $color-gray-4;
margin: 0;
}
No notes defined.