Framework Component Library

Share 

<div class="share-tools share-tools--right" id="share-tools-1" data-js-share-tools>
    <div class="share-tools__header">
        <h2 class="share-tools__title" id="share-tools-1__title">
            Share Options
        </h2>
        <div class="share-tools__button">

            <button class="button-filled
 		 			button-filled--large
 				" data-js-share-tools-toggle="" data-swap-target="#share-tools-1">
                <span class="button-filled__inner"> <span class="button-filled__label">Share This</span>
                </span>
            </button>
        </div>
    </div>
    <ul class="share-tools__list" data-js-share-tools-list aria-labelledby="share-tools-1__title">
        <li class="share-tools__item" data-js-share-tools-item>

            <a class="share-tools__link
 				" data-js-share-tool="x" target="_blank" rel="noopener" title="opens in a new window" href="#">
                <span class="share-tools__link-inner"> <span class="share-tools__link-label">Share to X</span>
                    <span class="share-tools__link-icon" aria-hidden="true">
                        <svg class="icon icon--x">
                            <use href="/images/icons.svg?1.0.0#x" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
        <li class="share-tools__item" data-js-share-tools-item>

            <a class="share-tools__link
 				" data-js-share-tool="facebook" target="_blank" rel="noopener" title="opens in a new window" href="#">
                <span class="share-tools__link-inner"> <span class="share-tools__link-label">Share to Facebook</span>
                    <span class="share-tools__link-icon" aria-hidden="true">
                        <svg class="icon icon--facebook">
                            <use href="/images/icons.svg?1.0.0#facebook" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
        <li class="share-tools__item" data-js-share-tools-item>

            <a class="share-tools__link
 				" data-js-share-tool="linkedin" target="_blank" rel="noopener" title="opens in a new window" href="#">
                <span class="share-tools__link-inner"> <span class="share-tools__link-label">Share to Linkedin</span>
                    <span class="share-tools__link-icon" aria-hidden="true">
                        <svg class="icon icon--linkedin">
                            <use href="/images/icons.svg?1.0.0#linkedin" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
    </ul>
</div>
 
{#
	{% include '@partial-share' with {
		title: 'Share This',
		icon: 'plus',
		items: [
			'X',
			'Facebook',
			'Linkedin'
		]
	} %}
#}

{% set id = uniqid('share-tools') %}

<div
	class="share-tools {{ 'share-tools--' ~ direction }}"
	id="{{ id }}"
	data-js-share-tools
>
	<div class="share-tools__header">
		<h2 class="share-tools__title" id="{{ id ~ '__title' }}">
			Share Options
		</h2>
		<div class="share-tools__button">
			{% include '@partial-button' with {
				classes: {
					base: 'button-filled',
					modifiers: [
						'large'
					]
				},
				attributes: {
					'data-js-share-tools-toggle': '',
					'data-swap-target': '#' ~ id
				},
				title: title
			} only %}
		</div>
	</div>
	<ul
		class="share-tools__list"
		data-js-share-tools-list
		aria-labelledby="{{ id ~ '__title' }}"
	>
		{% for item in items %}
			<li class="share-tools__item" data-js-share-tools-item>
				{% include '@partial-link' with {
					classes: {
						base: 'share-tools__link'
					},
					attributes: {
						'data-js-share-tool': item|lower,
						'target': '_blank'
					},
					title: 'Share to ' ~ item,
					url: '#',
					icon: item|lower
				} only %}
			</li>
		{% endfor %}
	</ul>
</div>

No notes defined.