<div class="c-author-callout o-container" data-bkg-theme="base">
<div class="o-row">
<div class="o-col o-col-xs-10 o-col-xs--offset-1 o-col-sm-md-8 o-col-sm--offset-2">
<div class="c-author-callout__details">
<div class="c-author-callout__image">
<img src="/images/author.jpg" alt="" />
</div>
<div class="c-author-callout__content">
<h2 class="c-author-callout__name f-text--credit">
Written by: <span class="c-author-callout__name-text f-text--reg f-bold">Firstname Lastname</span>
</h2>
<p class="c-author-callout__title f-text--xsmall">Title One</p>
</div>
</div>
<div class="c-author-callout__share f-italic">
<h2 class="c-author-callout__share-title f-text--caption">Share on social media</h2>
<div class="c-author-callout__share-links">
<a href="https://www.facebook.com/sharer/sharer.php?u=#url" class="c-author-callout__share-link" target="blank" rel="nofollow noopener">
<span class="u-sr-only">Share on Facebook</span>
<span class="c-author-callout__share-icon" aria-hidden="true">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.4063 23.1102C16.8395 23.1102 15.3445 23.1102 13.807 23.1102C13.807 25.4347 13.807 27.6924 13.807 30.0329C15.3047 30.0329 16.813 30.0329 18.3691 30.0329C18.3691 35.2762 18.3691 40.4368 18.3691 45.7041C14.2239 44.8484 10.623 43.0278 7.56123 40.2049C3.04423 36.0412 0.465747 30.8592 0.0541446 24.6989C-0.854035 11.0483 9.79185 0.367074 22.2647 0.00987932C35.4705 -0.36864 46.0792 10.1793 45.9996 23.1502C45.9172 36.7316 35.1226 45.2829 25.3902 46C25.3902 40.7061 25.3902 35.4148 25.3902 30.0649C27.6687 30.0649 29.9179 30.0649 32.2043 30.0649C32.2043 27.7324 32.2043 25.4613 32.2043 23.1182C29.9152 23.1182 27.6687 23.1182 25.377 23.1182C25.377 21.3483 25.3079 19.6422 25.4035 17.9442C25.4593 16.9393 26.5082 16.2009 27.5863 16.1956C29.1106 16.1903 30.6348 16.1929 32.2043 16.1929C32.2043 13.8685 32.2043 11.5947 32.2043 9.24629C31.1659 9.24629 30.1542 9.2303 29.1425 9.24895C27.751 9.27561 26.3409 9.18498 24.976 9.39556C21.2477 9.97134 18.4328 13.354 18.4089 17.1259C18.3983 18.8586 18.4063 20.5912 18.4063 22.3239C18.4063 22.5664 18.4063 22.8037 18.4063 23.1102Z" fill="black" />
</svg>
</span>
</a>
<a href="https://twitter.com/share?url=#url" class="c-author-callout__share-link" target="blank" rel="nofollow noopener">
<span class="u-sr-only">Share on Twitter</span>
<span class="c-author-callout__share-icon" aria-hidden="true">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.0282333 22.6179C0.128356 16.6881 2.16335 11.5715 6.13573 7.32545C10.3359 2.83105 15.4972 0.423051 21.4595 0.0517861C27.9575 -0.356083 33.7521 1.64143 38.6556 6.18289C42.7231 9.95307 45.1561 14.6749 45.8269 20.3223C46.4527 25.5854 45.3814 30.506 42.6155 34.9455C38.5805 41.4191 32.7659 45.0324 25.4644 45.8429C18.7387 46.5907 12.6888 44.6716 7.52744 40.0256C3.15457 36.0907 0.66151 31.0943 0.0432517 25.0965C-0.0443558 24.2782 0.0282333 23.4441 0.0282333 22.6179ZM13.3346 26.5084C14.3108 28.9425 16.0329 30.0615 18.4984 30.3517C16.0529 32.195 13.4847 32.8826 10.4861 32.697C10.7914 32.8957 10.9191 32.9898 11.0568 33.0656C14.5511 35.0475 18.2656 35.4815 22.1379 34.7572C29.174 33.4395 34.493 26.8221 34.488 19.3654C34.488 18.8242 34.6707 18.5052 35.0437 18.1653C35.7771 17.5013 36.4529 16.7666 37.1538 16.0633C37.1187 16.0319 37.0812 16.0031 37.0462 15.9717C36.1526 16.2071 35.2565 16.4424 34.3629 16.6803C34.3328 16.628 34.3053 16.5757 34.2753 16.526C35.254 15.8227 36.0199 14.9521 36.4229 13.8147C35.4167 14.1625 34.4254 14.5233 33.4167 14.8344C33.224 14.8946 32.9111 14.8213 32.7609 14.6828C31.4618 13.4749 29.9374 13.0565 28.2454 13.25C25.6296 13.5481 23.5871 15.8123 23.4745 18.5209C23.4545 18.9889 23.5121 19.4569 23.5371 20.006C18.979 19.7105 15.2219 17.7941 12.1131 14.2278C10.814 17.1823 11.4422 19.5563 13.7651 21.5303C13.7351 21.5747 13.705 21.6192 13.675 21.6636C12.914 21.4623 12.1531 21.261 11.3722 21.0518C11.6024 23.8886 13.1418 25.5305 15.5973 26.5057C14.8915 26.5084 14.1881 26.5084 13.3346 26.5084Z" fill="black" />
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-author-callout o-container" data-bkg-theme="base">
<div class="o-row">
<div class="o-col o-col-xs-10 o-col-xs--offset-1 o-col-sm-md-8 o-col-sm--offset-2">
<div class="c-author-callout__details">
{% if image %}
<div class="c-author-callout__image">
{{ image }}
</div>
{% endif %}
<div class="c-author-callout__content">
<h2 class="c-author-callout__name f-text--credit">
Written by: <span class="c-author-callout__name-text f-text--reg f-bold">{{ name }}</span>
</h2>
{% if title %}
<p class="c-author-callout__title f-text--xsmall">{{ title }}</p>
{% endif %}
</div>
</div>
{% if share %}
<div class="c-author-callout__share f-italic">
<h2 class="c-author-callout__share-title f-text--caption">Share on social media</h2>
<div class="c-author-callout__share-links">
{% for item in share %}
<a href="{{ item.link }}" class="c-author-callout__share-link" target="blank" rel="nofollow noopener">
<span class="u-sr-only">{{ item.title }}</span>
<span class="c-author-callout__share-icon" aria-hidden="true">
{% include "03-icons/" ~ item.icon %}
</span>
</a>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"name": "Firstname Lastname",
"image": "<img src=\"/images/author.jpg\" alt=\"\" />",
"title": "Title One",
"share": [
{
"icon": "facebook",
"link": "https://www.facebook.com/sharer/sharer.php?u=#url",
"title": "Share on Facebook"
},
{
"icon": "twitter",
"link": "https://twitter.com/share?url=#url",
"title": "Share on Twitter"
}
]
}
.c-author-callout {
margin-top: 4.8rem;
margin-bottom: 4.8rem;
@include break($sm) {
margin-top: 6.4rem;
margin-bottom: 12rem;
}
}
.c-author-callout__details {
display: flex;
align-items: center;
}
.c-author-callout__image {
padding-right: 2.4rem;
max-width: 10rem;
}
.c-author-callout__name-text {
display: block;
font-style: normal;
}
.c-author-callout__share {
margin-top: 3.2rem;
border-top: 0.1rem solid var(--ct-txt);
padding-top: 2.4rem;
}
.c-author-callout__share-title {
margin-bottom: 2rem;
}
.c-author-callout__share-links {
display: flex;
}
.c-author-callout__share-link {
margin-right: 1.6rem;
@include break($sm) {
margin-right: 2.4rem;
}
&:hover,
&:focus {
.c-author-callout__share-icon:before {
width: 5.4rem;
height: 5.4rem;
border: 0.1rem solid currentColor;
}
}
}
.c-author-callout__share-icon {
display: block;
position: relative;
width: 3.2rem;
height: 3.2rem;
color: var(--ct-dark);
@include break($sm) {
width: 4.4rem;
height: 4.4rem;
}
&:before {
content: '';
display: block;
width: 3.2rem;
height: 3.2rem;
border: 0.1rem solid transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
transition: all 0.3s $ease-standard-cubic;
@include break($sm) {
width: 4.4rem;
height: 4.4rem;
}
}
svg {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3.2rem;
height: auto;
@include break($sm) {
width: 4.4rem;
}
* {
transition: all 0.3s $ease-standard-cubic;
fill: currentColor;
}
}
}
No notes defined.