Le Moyne Component Library

Share 

<div class="js-share-tools share_tools direction_right">
    <div class="share_tools_inner">
        <div class="share_tools_header">
            <h2 class="share_tools_title">Share Options</h2>
            <button class="js-share-tools-toggle share_tools_toggle" data-swap-target=".js-share-tools">
                <span class="share_tools_toggle_inner">
                    <span class="share_tools_toggle_label">Share This</span>
                </span>
            </button>
        </div>
        <ul class="js-share-tools-list share_tools_list" aria-label="Share Options">
            <li class="js-share-tool-item share_tool_item">
                <a class="js-share-tool js-share-twitter share_tool" href="#" target="_blank" rel="noopener">
                    <span class="share_tool_icon">
                        <svg class="icon icon_twitter">
                            <use href="/images/icons.svg#twitter" />
                        </svg>
                    </span>
                    <span class="share_tool_label">Share to Twitter</span>
                </a>
            </li>
            <li class="js-share-tool-item share_tool_item">
                <a class="js-share-tool js-share-facebook share_tool" href="#" target="_blank" rel="noopener">
                    <span class="share_tool_icon">
                        <svg class="icon icon_facebook">
                            <use href="/images/icons.svg#facebook" />
                        </svg>
                    </span>
                    <span class="share_tool_label">Share to Facebook</span>
                </a>
            </li>
            <li class="js-share-tool-item share_tool_item">
                <a class="js-share-tool js-share-linkedin share_tool" href="#" target="_blank" rel="noopener">
                    <span class="share_tool_icon">
                        <svg class="icon icon_linkedin">
                            <use href="/images/icons.svg#linkedin" />
                        </svg>
                    </span>
                    <span class="share_tool_label">Share to Linkedin</span>
                </a>
            </li>
        </ul>
    </div>
</div>
 
{#
	{% include '@partial-share' with {
		title: 'Share This',
		icon: 'plus',
		items: [
			'Twitter',
			'Facebook',
			'Linkedin'
		]
	} %}
#}
<div class="js-share-tools share_tools direction_{{ direction }}">
	<div class="share_tools_inner">
		<div class="share_tools_header">
			<h2 class="share_tools_title">Share Options</h2>
			<button class="js-share-tools-toggle share_tools_toggle" data-swap-target=".js-share-tools">
				<span class="share_tools_toggle_inner">
					<span class="share_tools_toggle_label">{{ title }}</span>
					{% if icon %}
						<span class="share_tools_toggle_icon">{{ icon(icon) }}</span>
					{% endif %}
				</span>
			</button>
		</div>
		<ul class="js-share-tools-list share_tools_list" aria-label="Share Options">
			{% for item in items %}
				<li class="js-share-tool-item share_tool_item">
					<a class="js-share-tool js-share-{{ item|lower }} share_tool" href="#" target="_blank" rel="noopener">
						<span class="share_tool_icon">{{ icon(item|lower) }}</span>
						<span class="share_tool_label">Share to {{ item }}</span>
					</a>
				</li>
			{% endfor %}
		</ul>
	</div>
</div>

No notes defined.