MentorKit Pattern Library

Share Button 

<div class="relative inline-block" data-vanilla-module="ShareButton">
    <button aria-controls="SocialOptions" aria-expanded="false" class="js-trigger w-12 h-12 rounded-full bg-bravo hover:bg-bravo-600 transition ease-in-out duration-300 flex items-center justify-center relative">
        <div class="w-5 h-5">
            <svg class="w-full h-full fill-current text-white" aria-hidden="true">
                <use href="/front-end/sprite.svg#icon-share"></use>
            </svg>
        </div>
        <span class="sr-only">Share article</span>
    </button>
    <div id="SocialOptions" class="js-reveal absolute transition ease-in-out duration-300  left-0 -bottom-4 translate-y-full md:top-2/4 md:left-auto md:-translate-y-2/4 md:bottom-auto md:-right-4 shadow-lg md:translate-x-full w-32  opacity-0 invisible">
        <div class="w-full p-3 justify-center bg-bravo z-0 relative rounded-md border-2  border-white">
            <div class="triangle border-b-bravo md:border-b-transparent md:border-r-bravo absolute top-0 -translate-y-full -translate-x-2/4 left-2/4 md:top-2/4 md:-translate-y-2/4 md:left-0 md:-translate-x-full"></div>
            <ul class="flex space-x-3 justify-around w-full">
                <li>
                    <a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="block relative group">
                        <span class="sr-only">Share on facebook</span>
                        <div class="w-5 h-5">
                            <svg class="transition ease-in-out duration-300 fill-current text-white w-full h-full group-hover:fill-alpha" aria-hidden="true">
                                <use href="/front-end/sprite.svg#icon-facebook"></use>
                            </svg>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://twitter.com/intent/tweet?text=" class="block relative group" target="_blank">
                        <span class="sr-only">Share on twitter</span>
                        <div class="w-5 h-5">
                            <svg class="transition ease-in-out duration-300 fill-current text-white w-full h-full group-hover:fill-alpha" aria-hidden="true">
                                <use href="/front-end/sprite.svg#icon-twitter"></use>
                            </svg>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" class="relative group" target="_blank">
                        <span class="sr-only">Share on linkedin</span>
                        <div class="w-5 h-5">
                            <svg class="transition ease-in-out duration-300 fill-current text-white w-full h-full group-hover:fill-alpha" aria-hidden="true">
                                <use href="/front-end/sprite.svg#icon-linkedin"></use>
                            </svg>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
 
<div class="relative inline-block" data-vanilla-module="ShareButton">
    <button aria-controls="SocialOptions" aria-expanded="false" class="js-trigger w-12 h-12 rounded-full bg-bravo hover:bg-bravo-600 transition ease-in-out duration-300 flex items-center justify-center relative">
        <div class="w-5 h-5">
            {% render "@icon", { name: "icon-share", modifier: "w-full h-full fill-current text-white", ariaHidden: true } %}
        </div>
        <span class="sr-only">Share article</span>
    </button>
    <div id="SocialOptions" class="js-reveal absolute transition ease-in-out duration-300  left-0 -bottom-4 translate-y-full md:top-2/4 md:left-auto md:-translate-y-2/4 md:bottom-auto md:-right-4 shadow-lg md:translate-x-full w-32  opacity-0 invisible">
        <div class="w-full p-3 justify-center bg-bravo z-0 relative rounded-md border-2  border-white">
            <div class="triangle border-b-bravo md:border-b-transparent md:border-r-bravo absolute top-0 -translate-y-full -translate-x-2/4 left-2/4 md:top-2/4 md:-translate-y-2/4 md:left-0 md:-translate-x-full"></div>
            <ul class="flex space-x-3 justify-around w-full">
                <li>
                    <a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="block relative group">
                        <span class="sr-only">Share on facebook</span>
                        <div class="w-5 h-5">
                            {% render "@icon", { name: "icon-facebook", modifier: "transition ease-in-out duration-300 fill-current text-white w-full h-full group-hover:fill-alpha", ariaHidden: true } %}
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://twitter.com/intent/tweet?text=" class="block relative group" target="_blank">
                    <span class="sr-only">Share on twitter</span>
                        <div class="w-5 h-5">
                            {% render "@icon", { name: "icon-twitter", modifier: "transition ease-in-out duration-300 fill-current text-white w-full h-full group-hover:fill-alpha", ariaHidden: true } %}
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" class="relative group" target="_blank">
                    <span class="sr-only">Share on linkedin</span>
                        <div class="w-5 h-5">
                            {% render "@icon", { name: "icon-linkedin", modifier: "transition ease-in-out duration-300 fill-current text-white w-full h-full group-hover:fill-alpha", ariaHidden: true } %}
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
 
{
  "siteName": "MentorKit Pattern Library"
}

No notes defined.