Gigaclear Pattern Library

Share Button 

<div class="relative inline-block" data-vanilla-module="ShareButton">
    <button aria-controls="SocialOptions" aria-expanded="false" class="js-trigger w-10 h-10 rounded-full bg-grey-50 hover:bg-grey-100 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-grey" aria-hidden="true">
                <use href="/front-end/sprite.svg?v=1.2#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 top-2/4 left-auto -translate-y-2/4 -right-4 lg:right-48 shadow-lg translate-x-full w-32 opacity-0 invisible">
        <div class="w-full p-3 justify-center bg-grey-100 z-0 relative rounded-md border-2 border-grey-50">
            <div class="triangle border-b-transparent border-r-grey-100 absolute top-2/4 -translate-y-2/4 left-0 -translate-x-full lg:rotate-180 lg:left-auto lg:-right-[34px]"></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-grey w-full h-full group-hover:fill-alpha" aria-hidden="true">
                                <use href="/front-end/sprite.svg?v=1.2#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-grey w-full h-full group-hover:fill-alpha" aria-hidden="true">
                                <use href="/front-end/sprite.svg?v=1.2#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-grey w-full h-full group-hover:fill-alpha" aria-hidden="true">
                                <use href="/front-end/sprite.svg?v=1.2#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-10 h-10 rounded-full bg-grey-50 hover:bg-grey-100 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-grey", ariaHidden: true } %}
        </div>
        <span class="sr-only">Share article</span>
    </button>
    <div id="SocialOptions" class="js-reveal absolute transition ease-in-out duration-300 top-2/4 left-auto -translate-y-2/4 -right-4 lg:right-48 shadow-lg translate-x-full w-32 opacity-0 invisible">
        <div class="w-full p-3 justify-center bg-grey-100 z-0 relative rounded-md border-2 border-grey-50">
            <div class="triangle border-b-transparent border-r-grey-100 absolute top-2/4 -translate-y-2/4 left-0 -translate-x-full lg:rotate-180 lg:left-auto lg:-right-[34px]"></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-grey 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-grey 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-grey w-full h-full group-hover:fill-alpha", ariaHidden: true } %}
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
 
{
  "siteName": "Gigaclear Pattern Library"
}

No notes defined.