Dream Academy Component Library

Share 

<div class="share-tools" id="share-tools-1" data-js-share-tools>
    <h2 class="share-tools__title" id="share-tools-1__title">
        Share
    </h2>
    <ul class="share-tools__list" aria-labelledby="share-tools-1__title">
        <li class="share-tools__item">

            <a class="share-tools__link
 				" data-js-share-tool="x" target="_blank" rel="noopener noreferrer" rel="noopener noreferrer" 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--share-x">
                            <use href="/images/icons.svg?1.0.0#share-x" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
        <li class="share-tools__item">

            <a class="share-tools__link
 				" data-js-share-tool="facebook" target="_blank" rel="noopener noreferrer" rel="noopener noreferrer" 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--share-facebook">
                            <use href="/images/icons.svg?1.0.0#share-facebook" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
        <li class="share-tools__item">

            <a class="share-tools__link
 				" data-js-share-tool="linkedin" target="_blank" rel="noopener noreferrer" rel="noopener noreferrer" 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--share-linkedin">
                            <use href="/images/icons.svg?1.0.0#share-linkedin" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
    </ul>
</div>
 
{#
	{% include '@partial-share' with {
		items: [
			'X',
			'Facebook',
			'Linkedin'
		]
	} %}
#}

{% set id = uniqid('share-tools') %}
{% set heading_level = heading_level ?? 2 %}
{% set heading_tag = 'h' ~ (heading_level) %}

<div
	class="share-tools"
	id="{{ id }}"
	data-js-share-tools
>
	<{{ heading_tag }} class="share-tools__title" id="{{ id ~ '__title' }}">
		Share
	</{{ heading_tag }}>
	<ul
		class="share-tools__list"
		aria-labelledby="{{ id ~ '__title' }}"
	>
		{% for item in items %}
			<li class="share-tools__item">
				{% include '@partial-link' with {
					classes: {
						base: 'share-tools__link'
					},
					attributes: {
						'data-js-share-tool': item|lower,
						'target': '_blank',
						'rel': 'noopener noreferrer'
					},
					title: 'Share to ' ~ item,
					url: '#',
					icon: 'share-' ~ item|lower
				} only %}
			</li>
		{% endfor %}
	</ul>
</div>

No notes defined.