<div class="c-social-links">
<a class="o-button o-button--secondary c-social-links__item" href="https://www.facebook.com/LADOTD/" aria-label="facebook">
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4277 12.0064H13.185C13.185 15.5895 13.185 20 13.185 20H9.86172C9.86172 20 9.86172 15.6323 9.86172 12.0064H8.28198V9.18119H9.86172V7.35381C9.86172 6.04505 10.4836 4 13.2155 4L15.6781 4.00944V6.7519C15.6781 6.7519 14.1817 6.7519 13.8907 6.7519C13.5998 6.7519 13.1861 6.89738 13.1861 7.5215V9.18175H15.7181L15.4277 12.0064Z" />
</svg>
</span>
</a>
<a class="o-button o-button--secondary c-social-links__item" href="https://twitter.com/La_DOTD" aria-label="twitter">
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4894 10.7749L19.3177 4H17.9365L12.8759 9.88253L8.83393 4H4.172L10.2843 12.8955L4.172 20H5.5532L10.8974 13.7878L15.166 20H19.8279L13.4894 10.7749ZM11.5977 12.9739L10.9784 12.0881L6.0508 5.03973H8.17226L12.1489 10.7279L12.7681 11.6137L17.9372 19.0075H15.8157L11.5977 12.9739Z" />
</svg>
</span>
</a>
<a class="o-button o-button--secondary c-social-links__item" href="https://instagram.com" aria-label="instagram">
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M16.2704 8.6896C16.8006 8.6896 17.2304 8.25979 17.2304 7.7296C17.2304 7.19941 16.8006 6.7696 16.2704 6.7696C15.7402 6.7696 15.3104 7.19941 15.3104 7.7296C15.3104 8.25979 15.7402 8.6896 16.2704 8.6896Z" />
<path d="M12 7.89187C11.1875 7.89187 10.3932 8.1328 9.71764 8.58421C9.04206 9.03562 8.51551 9.67722 8.20458 10.4279C7.89364 11.1785 7.81229 12.0046 7.9708 12.8015C8.12932 13.5984 8.52058 14.3304 9.09511 14.9049C9.66964 15.4794 10.4016 15.8707 11.1985 16.0292C11.9954 16.1877 12.8215 16.1064 13.5721 15.7954C14.3228 15.4845 14.9644 14.9579 15.4158 14.2824C15.8672 13.6068 16.1081 12.8125 16.1081 12C16.1081 10.9105 15.6753 9.86554 14.9049 9.09511C14.1345 8.32469 13.0895 7.89187 12 7.89187ZM12 14.6667C11.4726 14.6667 10.957 14.5103 10.5185 14.2173C10.0799 13.9242 9.73815 13.5078 9.53632 13.0205C9.33449 12.5332 9.28168 11.997 9.38457 11.4798C9.48747 10.9625 9.74144 10.4873 10.1144 10.1144C10.4873 9.74144 10.9625 9.48747 11.4798 9.38457C11.997 9.28168 12.5332 9.33449 13.0205 9.53632C13.5078 9.73815 13.9242 10.0799 14.2173 10.5185C14.5103 10.957 14.6667 11.4726 14.6667 12C14.6667 12.7072 14.3857 13.3855 13.8856 13.8856C13.3855 14.3857 12.7072 14.6667 12 14.6667Z" />
<path d="M12 5.44147C14.1361 5.44147 14.3891 5.4496 15.2327 5.48813C15.74 5.49417 16.2425 5.58735 16.7182 5.7636C17.0632 5.89672 17.3765 6.10058 17.638 6.36207C17.8995 6.62355 18.1033 6.93687 18.2365 7.28187C18.4127 7.75761 18.5059 8.2601 18.5119 8.7674C18.5504 9.61093 18.5586 9.864 18.5586 12.0001C18.5586 14.1361 18.5505 14.3892 18.5119 15.2327C18.5059 15.74 18.4127 16.2425 18.2365 16.7183C18.1033 17.0633 17.8995 17.3766 17.638 17.6381C17.3765 17.8996 17.0632 18.1034 16.7182 18.2365C16.2425 18.4128 15.74 18.506 15.2327 18.512C14.3892 18.5505 14.1363 18.5587 12 18.5587C9.86373 18.5587 9.6108 18.5505 8.76733 18.512C8.26003 18.506 7.75754 18.4128 7.2818 18.2365C6.9368 18.1034 6.62348 17.8996 6.362 17.6381C6.10052 17.3766 5.89666 17.0633 5.76353 16.7183C5.58728 16.2425 5.49411 15.74 5.48807 15.2327C5.4496 14.3892 5.4414 14.1361 5.4414 12.0001C5.4414 9.864 5.44953 9.61093 5.48807 8.7674C5.49411 8.2601 5.58728 7.75761 5.76353 7.28187C5.89665 6.93685 6.1005 6.62352 6.36199 6.36203C6.62347 6.10053 6.93679 5.89666 7.2818 5.76353C7.75754 5.58728 8.26003 5.49411 8.76733 5.48807C9.61087 5.4496 9.86393 5.44147 12 5.44147ZM12 4C9.82733 4 9.55487 4.0092 8.7016 4.04813C8.03803 4.06146 7.38153 4.18719 6.76 4.42C6.22849 4.62554 5.74578 4.93987 5.34283 5.34283C4.93987 5.74578 4.62554 6.22849 4.42 6.76C4.18716 7.38163 4.06142 8.03826 4.04813 8.70193C4.0092 9.55487 4 9.82733 4 12C4 14.1727 4.0092 14.4451 4.04813 15.2984C4.06143 15.9621 4.18716 16.6187 4.42 17.2403C4.62554 17.7718 4.93987 18.2545 5.34283 18.6575C5.74578 19.0605 6.22849 19.3748 6.76 19.5803C7.38163 19.8132 8.03826 19.9389 8.70193 19.9522C9.55487 19.9908 9.82733 20 12 20C14.1727 20 14.4451 19.9908 15.2984 19.9519C15.9621 19.9386 16.6187 19.8128 17.2403 19.58C17.7718 19.3745 18.2545 19.0601 18.6575 18.6572C19.0605 18.2542 19.3748 17.7715 19.5803 17.24C19.8132 16.6184 19.9389 15.9617 19.9522 15.2981C19.9908 14.4451 20 14.1727 20 12C20 9.82733 19.9908 9.55487 19.9519 8.7016C19.9385 8.03803 19.8128 7.38153 19.58 6.76C19.3744 6.22855 19.0601 5.74591 18.6571 5.34301C18.2542 4.94011 17.7715 4.62584 17.24 4.42033C16.6184 4.1875 15.9617 4.06176 15.2981 4.04847C14.4451 4.0092 14.1727 4 12 4Z" />
</svg>
</span>
</a>
<a class="o-button o-button--secondary c-social-links__item" href="https://linkedin.com" aria-label="linkedin">
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M7.51445 19.9537H4.27746V9.41031H7.51445V19.9537ZM5.9422 7.93054C4.92485 7.93054 4 7.09817 4 5.98834C4 4.87851 4.83237 4.04614 5.9422 4.04614C6.95954 4.04614 7.88439 4.87851 7.88439 5.98834C7.88439 7.09817 6.95954 7.93054 5.9422 7.93054ZM19.9075 19.8612H16.6705V14.682C16.6705 13.4797 16.6705 11.8149 14.9133 11.8149C13.1561 11.8149 12.9711 13.2022 12.9711 14.497V19.7687H9.7341V9.41031H12.7861V10.7976H12.8786C13.341 9.96522 14.4509 9.04036 16.0231 9.04036C19.3526 9.04036 20 11.26 20 14.1271V19.8612H19.9075Z" />
</svg>
</span>
</a>
<a class="o-button o-button--secondary c-social-links__item" href="http://www.youtube.com/user/LouisianaDOTD" aria-label="youtube">
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M19.6624 8.14887C19.5714 7.81062 19.3931 7.50222 19.1454 7.25454C18.8977 7.00685 18.5893 6.82856 18.2511 6.73752C17.0054 6.40039 12 6.40039 12 6.40039C12 6.40039 6.99455 6.40039 5.74891 6.73752C5.41066 6.82856 5.10226 7.00685 4.85458 7.25454C4.60689 7.50222 4.4286 7.81062 4.33755 8.14887C4.10496 9.41924 3.9921 10.7086 4.00043 12.0001C3.9921 13.2915 4.10496 14.5809 4.33755 15.8513C4.4286 16.1896 4.60689 16.498 4.85458 16.7456C5.10226 16.9933 5.41066 17.1716 5.74891 17.2627C6.99455 17.5998 12 17.5998 12 17.5998C12 17.5998 17.0054 17.5998 18.2511 17.2627C18.5893 17.1716 18.8977 16.9933 19.1454 16.7456C19.3931 16.498 19.5714 16.1896 19.6624 15.8513C19.895 14.5809 20.0079 13.2915 19.9996 12.0001C20.0079 10.7086 19.895 9.41924 19.6624 8.14887ZM10.4001 14.4V9.60022L14.5541 12.0001L10.4001 14.4Z" />
</svg>
</span>
</a>
</div>
{% set base_class = social_links.base_class|default('c-social-links') %}
{% if social_links.items %}
<div class="{{ bem(base_class, social_links.element, social_links.modifiers, social_links.extra) }}">
{% for item in social_links.items %}
{% include "@button" with {
"button": {
"url": item.url,
"target": "_blank",
"icon": {
"name": item.name|lower,
"modifiers": "md"
},
"attributes": {
"aria-label": item.name
},
"modifiers": "secondary",
"extra": bem(base_class, 'item')
}
} %}
{% endfor %}
</div>
{% endif %}
{
"social_links": {
"items": [
{
"url": "https://www.facebook.com/LADOTD/",
"name": "facebook"
},
{
"url": "https://twitter.com/La_DOTD",
"name": "twitter"
},
{
"url": "https://instagram.com",
"name": "instagram"
},
{
"url": "https://linkedin.com",
"name": "linkedin"
},
{
"url": "http://www.youtube.com/user/LouisianaDOTD",
"name": "youtube"
}
]
}
}
/* ------------------------------------*\
$SOCIAL-LINKS
\*------------------------------------ */
.c-social-links {
display: flex;
gap: var(--dotd-space-sm);
&__item {
padding: var(--dotd-space-sm);
width: var(--dotd-icon-lg);
min-width: var(--dotd-icon-lg);
height: var(--dotd-icon-lg);
border-radius: var(--dotd-icon-lg);
}
}
No notes defined.