Styleguide

Share Block 

<div class="m-share-block">
    <div class="m-share-block__icon">
        <a href="https://twitter.com/intent/tweet?url&#x3D;https%3A%2F%2Fcss-tricks.com%2F&amp;text&#x3D;Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&amp;hashtags&#x3D;css,html" class="a-social-icon" aria-label="">
            <figure class="a-social-icon__figure">
                <svg role="img" class="a-social-icon__svg a-social-icon__svg--with-caption">
                    <title>twitter--no-outline</title>
                    <use xlink:href="#twitter--no-outline"></use>
                </svg>
                <figcaption class="a-social-icon__caption">Twitter</figcaption>
            </figure>
        </a>
    </div>
    <div class="m-share-block__icon">
        <a href="https://www.facebook.com/sharer.php?u&#x3D;https%3A%2F%2Fcss-tricks.com%2F" class="a-social-icon" aria-label="">
            <figure class="a-social-icon__figure">
                <svg role="img" class="a-social-icon__svg a-social-icon__svg--with-caption">
                    <title>facebook--no-outline</title>
                    <use xlink:href="#facebook--no-outline"></use>
                </svg>
                <figcaption class="a-social-icon__caption">Facebook</figcaption>
            </figure>
        </a>
    </div>
    <div class="m-share-block__icon">
        <a href="whatsapp://send?abid&#x3D;BROADCAST_ID&amp;text&#x3D;" class="a-social-icon" aria-label="">
            <figure class="a-social-icon__figure">
                <svg role="img" class="a-social-icon__svg a-social-icon__svg--with-caption">
                    <title>whatsapp--no-outline</title>
                    <use xlink:href="#whatsapp--no-outline"></use>
                </svg>
                <figcaption class="a-social-icon__caption">WhatsApp</figcaption>
            </figure>
        </a>
    </div>
    <div class="m-share-block__icon">
        <a href="telegram://send?abid&#x3D;BROADCAST_ID&amp;text&#x3D;" class="a-social-icon" aria-label="">
            <figure class="a-social-icon__figure">
                <svg role="img" class="a-social-icon__svg a-social-icon__svg--with-caption">
                    <title>telegram</title>
                    <use xlink:href="#telegram"></use>
                </svg>
                <figcaption class="a-social-icon__caption">Telegram</figcaption>
            </figure>
        </a>
    </div>
    <div class="m-share-block__icon">
        <a href="mailto:?subject&#x3D;Sitetitle&amp;body&#x3D;Some%20content" class="a-social-icon" aria-label="">
            <figure class="a-social-icon__figure">
                <svg role="img" class="a-social-icon__svg a-social-icon__svg--with-caption">
                    <title>mail--no-outline</title>
                    <use xlink:href="#mail--no-outline"></use>
                </svg>
                <figcaption class="a-social-icon__caption">E-Mail</figcaption>
            </figure>
        </a>
    </div>
    <div class="m-share-block__icon">
        <button data-link="https://example.com" class="a-social-icon" aria-label="">
            <figure class="a-social-icon__figure">
                <svg role="img" class="a-social-icon__svg a-social-icon__svg--with-caption">
                    <title>link</title>
                    <use xlink:href="#link"></use>
                </svg>
                <figcaption class="a-social-icon__caption">Copy Link</figcaption>
            </figure>
            <div class="a-social-icon__copied">Copied!</div>
        </button>
    </div>
</div>
 
<div class="m-share-block">
	{{#each icons}}
		<div class="m-share-block__icon">
			{{> @a-social-icon this}}
		</div>
	{{/each}}
</div>
  • Content: 
    .m-share-block {
	$icon-size-xs: 50px;
	$icon-size-sm: 80px;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0.5rem 0;

	&__icon {
		@include fluid-props(max-width, $size-tiny, $size-small, $icon-size-xs, $icon-size-sm);
		@include fluid-props(height, $size-tiny, $size-small, $icon-size-xs, $icon-size-sm);
	}
}
  • URL: /components/raw/m-share-block/_m-share-block.scss
  • Filesystem Path: styleguide/src/components/molecules/m-share-block/_m-share-block.scss
  • Size: 375 Bytes 
{
  "icons": [
    {
      "link": "https://twitter.com/intent/tweet?url=https%3A%2F%2Fcss-tricks.com%2F&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&hashtags=css,html",
      "type": "twitter--no-outline",
      "label": "Twitter"
    },
    {
      "link": "https://www.facebook.com/sharer.php?u=https%3A%2F%2Fcss-tricks.com%2F",
      "type": "facebook--no-outline",
      "label": "Facebook"
    },
    {
      "link": "whatsapp://send?abid=BROADCAST_ID&text=",
      "type": "whatsapp--no-outline",
      "label": "WhatsApp"
    },
    {
      "link": "telegram://send?abid=BROADCAST_ID&text=",
      "type": "telegram",
      "label": "Telegram"
    },
    {
      "link": "mailto:?subject=Sitetitle&body=Some%20content",
      "type": "mail--no-outline",
      "label": "E-Mail"
    },
    {
      "link": "https://example.com",
      "type": "link",
      "label": "Copy Link",
      "linkButton": "yes"
    }
  ]
}

No notes defined.