<section class="share_on" role="region" aria-label="share on social media or email">
<p>Share on:</p>
<button class="button fab fa-twitter" data-sharer="Twitter" data-title="We have a new name!" data-hashtags="CollegeOfBusiness" data-url="https://es.pn"><span class="u-a11y-text">Share on Twitter</span></button>
<button class="button fab fa-facebook-f" data-sharer="Facebook" data-hashtags="CollegeOfBusiness" data-url="https://es.pn"><span class="u-a11y-text">Share on Facebook</span></button>
<button class="button fab fa-linkedin" data-sharer="LinkedIn" data-url="https://es.pn"><span class="u-a11y-text">Share on LinkedIn</span></button>
<button class="button fas fa-envelope" data-sharer="Email" data-title="We have a new name!" data-subject="We have a new name!" data-to="some@email.com" data-url="https://es.pn"><span class="u-a11y-text">Share via Email</span></button>
</section>
<section class="share_on" role="region" aria-label="share on social media or email">
<p>Share on:</p>
{% for icon in icons %}
<button class="button {{ icon.icon_class }}" data-sharer="{{ icon.platform_name }}" {{ icon.additional_tags }} data-url="https://es.pn"><span class="u-a11y-text">{{ icon.tagline }}</span></button>
{% endfor %}
</section>
{
"icons": {
"1": {
"platform_name": "Twitter",
"additional_tags": "data-title=\"We have a new name!\" data-hashtags=\"CollegeOfBusiness\"",
"tagline": "Share on Twitter",
"icon_class": "fab fa-twitter"
},
"2": {
"platform_name": "Facebook",
"additional_tags": "data-hashtags=\"CollegeOfBusiness\"",
"tagline": "Share on Facebook",
"icon_class": "fab fa-facebook-f"
},
"3": {
"platform_name": "LinkedIn",
"tagline": "Share on LinkedIn",
"icon_class": "fab fa-linkedin"
},
"4": {
"platform_name": "Email",
"additional_tags": "data-title=\"We have a new name!\" data-subject=\"We have a new name!\" data-to=\"some@email.com\"",
"tagline": "Share via Email",
"icon_class": "fas fa-envelope"
}
}
}
.share_on {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
font-size: 0.875rem;
margin: $space-double 0 0 0;
@media only screen and (min-width: $break-desktop) {
margin: $space-sextuple 0 0 0;
}
p {
margin: 0;
}
button {
margin: 0 $space;
padding: 0;
height: 30px;
width: 30px;
background-color: $lehigh-brown;
color: $white;
&:first-of-type {
margin: 0 $space 0 $space-double;
}
&:last-of-type {
margin: 0 0 0 $space;
}
&:hover,
&:focus {
color: $lehigh-brown;
}
}
}
No notes defined.