Framework Component Library

Share 

<div class="share_tools direction_right" id="share_tools_3" data-js-share-tools>
    <div class="share_tools_header">
        <h2 class="share_tools_title" id="share_tools_3_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_3">
                <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_3_title">
        <li class="share_tool_item" data-js-share-tool-item>

            <a class="
		share_tool
				
	" data-js-share-tool="x" target="_blank" rel="noopener" title="opens in a new window" href="#">
                <span class="share_tool_inner">
                    <span class="share_tool_label">
                        Share to X
                    </span>
                    <span class="share_tool_icon" aria-hidden="true">
                        <svg class="icon icon_x">
                            <use href="/images/icons.svg#x" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
        <li class="share_tool_item" data-js-share-tool-item>

            <a class="
		share_tool
				
	" data-js-share-tool="facebook" target="_blank" rel="noopener" title="opens in a new window" href="#">
                <span class="share_tool_inner">
                    <span class="share_tool_label">
                        Share to Facebook
                    </span>
                    <span class="share_tool_icon" aria-hidden="true">
                        <svg class="icon icon_facebook">
                            <use href="/images/icons.svg#facebook" />
                        </svg>
                    </span>
                </span>
            </a>
        </li>
        <li class="share_tool_item" data-js-share-tool-item>

            <a class="
		share_tool
				
	" data-js-share-tool="linkedin" target="_blank" rel="noopener" title="opens in a new window" href="#">
                <span class="share_tool_inner">
                    <span class="share_tool_label">
                        Share to Linkedin
                    </span>
                    <span class="share_tool_icon" aria-hidden="true">
                        <svg class="icon icon_linkedin">
                            <use href="/images/icons.svg#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 direction_{{ 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
				},
				id: null,
				title: title
			} %}
		</div>
	</div>
	<ul
		class="share_tools_list"
		data-js-share-tools-list
		aria-labelledby="{{ id }}_title"
	>
		{% for item in items %}
			<li class="share_tool_item" data-js-share-tool-item>
				{% include '@partial-link' with {
					classes: {
						base: 'share_tool'
					},
					id: null,
					attributes: {
						'data-js-share-tool': item|lower,
						'target': '_blank'
					},
					title: 'Share to ' ~ item,
					url: '#',
					icon: item|lower
				} %}
			</li>
		{% endfor %}
	</ul>
</div>

No notes defined.