Internetstiftelsen Styleguide

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";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;

@include mixin.molecule(share) {
	@include bem.e(platforms) {
		visibility: visible;
		max-height: 80rem;
		padding: func.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 bem.e(button) {
		padding-left: 0;
	}

	@include bem.e(icon) {
		margin-right: func.rhythm(2);
		padding: 0;

		@include bem.b(icon) {
			width: var.$icon-size * 1.5;
			height: var.$icon-size * 1.5;

			&.icon-facebook {
				fill: colors.$color-facebook;
			}

			&.icon-twitter {
				fill: colors.$color-twitter;
			}

			&.icon-linkedin {
				fill: colors.$color-linkedin;
			}
		}
	}

	@include bem.m(inline) {
		display: inline-flex;
		align-items: center;
	}
}
  • URL: /components/raw/share/_share.scss
  • Filesystem Path: src/molecules/share/_share.scss
  • Size: 1.3 KB
  • 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