Share

<div class="m-share">
    <button type="button" class="a-button a-button--transparent a-button--icon m-share__button" data-a11y-toggle="share-platforms">
        <span class="a-button__text">Dela</span>
        <svg class="icon a-button__icon">
            <use xlink:href="#icon-share"></use>
        </svg>
    </button>
    <div class="m-share__platforms" aria-hidden="true" id="share-platforms">
        <a href="http://facebook.com/sharer/sharer.php?u=https://www.iis.se/press/pressmeddelanden/internetstiftelsen-far-utmarkelsen-svensk-kvalitet-for-andra-gangen//&amp;title=Internetstiftelsen får utmärkelsen Svensk Kvalitet för andra gången" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
            <span class="a-button__text"></span>
            <svg class="icon icon-facebook">
                <use xlink:href="#icon-facebook"></use>
            </svg>
        </a>
        <a href="https://twitter.com/intent/tweet?url=https://www.iis.se/press/pressmeddelanden/internetstiftelsen-far-utmarkelsen-svensk-kvalitet-for-andra-gangen//&amp;text=Internetstiftelsen får utmärkelsen Svensk Kvalitet för andra gången" type="button" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
            <span class="a-button__text"></span>
            <svg class="icon icon-x">
                <use xlink:href="#icon-x"></use>
            </svg>
        </a>
        <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https://www.iis.se/press/pressmeddelanden/internetstiftelsen-far-utmarkelsen-svensk-kvalitet-for-andra-gangen//&amp;title=Internetstiftelsen får utmärkelsen Svensk Kvalitet för andra gången" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
            <span class="a-button__text"></span>
            <svg class="icon icon-linkedin">
                <use xlink:href="#icon-linkedin"></use>
            </svg>
        </a>
    </div>
</div>
<div class="m-share{{#if modifiers}} {{getmodifiers modifiers "m-share"}}{{/if}}">
	<button type="button" class="a-button a-button--transparent a-button--icon m-share__button" data-a11y-toggle="share-platforms">
		<span class="a-button__text">Dela</span>
		<svg class="icon a-button__icon">
			<use xlink:href="#icon-share"></use>
		</svg>
	</button>
	<div class="m-share__platforms" aria-hidden="true" id="share-platforms">
		<a href="http://facebook.com/sharer/sharer.php?u={{url}}/&amp;title={{text}}" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
			<span class="a-button__text"></span>
			<svg class="icon icon-facebook">
				<use xlink:href="#icon-facebook"></use>
			</svg>
		</a>
		<a href="https://twitter.com/intent/tweet?url={{url}}/&amp;text={{text}}" type="button" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
		<span class="a-button__text"></span>
		<svg class="icon icon-x">
			<use xlink:href="#icon-x"></use>
		</svg>
		</a>
		<a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{url}}/&amp;title={{text}}" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
			<span class="a-button__text"></span>
			<svg class="icon icon-linkedin">
				<use xlink:href="#icon-linkedin"></use>
			</svg>
		</a>
	</div>
</div>
{
  "url": "https://www.iis.se/press/pressmeddelanden/internetstiftelsen-far-utmarkelsen-svensk-kvalitet-for-andra-gangen/",
  "text": "Internetstiftelsen får utmärkelsen Svensk Kvalitet för andra gången"
}
  • Content:
    @charset 'UTF-8';
    
    @include molecule(share) {
    	@include e(platforms) {
    		visibility: visible;
    		max-height: 80rem;
    		padding: rhythm(1) 0;
    		overflow: hidden;
    		transition:
    			visibility 0s ease-out,
    			max-height 0.25s ease-out,
    			opacity    0.5s ease-out;
    		transition-delay: 0 0.25 0;
    		opacity: 1;
    
    		&[aria-hidden='true'] {
    			visibility: hidden;
    			max-height: 0;
    			transition-delay: 0.25s, 0, 0.5s;
    			opacity: 0;
    		}
    	}
    
    	@include e(button) {
    		padding-left: 0;
    	}
    
    	@include e(icon) {
    		margin-right: rhythm(2);
    		padding: 0;
    
    		@include b(icon) {
    			width: $icon-size * 1.5;
    			height: $icon-size * 1.5;
    
    			&.icon-facebook {
    				fill: $color-facebook;
    			}
    
    			&.icon-twitter {
    				fill: $color-twitter;
    			}
    
    			&.icon-linkedin {
    				fill: $color-linkedin;
    			}
    		}
    	}
    
    	@include m(inline) {
    		display: inline-flex;
    		align-items: center;
    	}
    }
    
  • URL: /components/raw/share/_share.scss
  • Filesystem Path: src/molecules/share/_share.scss
  • Size: 858 Bytes
  • Content:
    function openPopup(e) {
    	e.preventDefault();
    
    	const width = 500;
    	const height = 550;
    	const left = window.innerWidth / 2 - width / 2;
    	const top = window.innerHeight / 2 - height / 2;
    	const url = this.href;
    	const opts = `${'status=1'
    				+ ',width='}${width
    	},height=${height
    	},top=${top
    	},left=${left}`;
    	window.open(url, 'socialMedia', opts);
    
    	return false;
    }
    
    const popupButtons = Array.prototype.slice.call(
    	document.querySelectorAll('.js-share-popup'),
    );
    
    if (popupButtons) {
    	popupButtons.forEach((popup) => {
    		popup.addEventListener('click', openPopup);
    	});
    }
    
  • URL: /components/raw/share/share.js
  • Filesystem Path: src/molecules/share/share.js
  • Size: 579 Bytes

Share on social media

NOTE: Can only be tested in fullscreen preview mode, otherwise the browser will block the popup since it it triggered within an iframe