<section class="author-bio" role="region" aria-label="about the author">
<img src="/images/headshot@2x.png" alt="John Smith headshot" />
<div class="author-bio-text">
<h2>John Smith</h2>
<p>This is content about John. This is content about John. This is content about John. This is content about John. This is content about John.</p>
</div>
</section>
<section class="author-bio" role="region" aria-label="about the author">
{% block cms_override %}
<img src="{{ img_src }}" alt="{{ img_alt }}" />
{% endblock cms_override %}
<div class="author-bio-text">
<h2>{{ author_name }}</h2>
<p>{{ author_bio_content }}</p>
</div>
</section>
{
"img_src": "/images/headshot@2x.png",
"img_alt": "John Smith headshot",
"author_name": "John Smith",
"author_bio_content": "This is content about John. This is content about John. This is content about John. This is content about John. This is content about John."
}
.author-bio {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
border-top: 1px solid $grey_dark;
padding: $space 0;
&:last-of-type {
padding: $space 0 0 0;
}
img {
max-width: 100px;
max-height: 100px;
border-radius: 50px;
}
&-text {
margin: 0 0 0 $space;
h2 {
font-size: 1.375rem;
font-weight: bold;
color: $grey_dark;
}
p {
margin: 0;
}
}
}
No notes defined.