Children and Screens Component Library

Share Sidebar 

<div class="js-share-tools share_tools share_sidebar_tools _share_tools direction_right theme_salmon">
    <div class="share_sidebar_tools_header">
        <h2 class="share_sidebar_tools_title">Share Options</h2>
        <button class="js-share-tools-toggle share_sidebar_tools_toggle" data-swap-target=".js-share-tools">
            <span class="share_sidebar_tools_toggle_inner">
                <span class="share_sidebar_tools_toggle_icon">
                    <svg class="icon icon_file_alt">
                        <use href="/images/icons.svg#file_alt" />
                    </svg>
                </span>
                <span class="share_sidebar_tools_toggle_label"></span>
            </span>
        </button>
    </div>
    <ul class="js-share-tools-list share_sidebar_tools_list" aria-label="Share Options">
        <li class="js-share-tool-item share_sidebar_tool_item">
            <a class="js-share-tool js-share-twitter share_sidebar_tool" href="#" target="_blank" rel="noopener">
                <span class="share_sidebar_tool_icon">
                    <svg class="icon icon_twitter">
                        <use href="/images/icons.svg#twitter" />
                    </svg>
                </span>
                <span class="share_sidebar_tool_label">Share to
                    Twitter</span>
            </a>
        </li>
        <li class="js-share-tool-item share_sidebar_tool_item">
            <a class="js-share-tool js-share-facebook share_sidebar_tool" href="#" target="_blank" rel="noopener">
                <span class="share_sidebar_tool_icon">
                    <svg class="icon icon_facebook">
                        <use href="/images/icons.svg#facebook" />
                    </svg>
                </span>
                <span class="share_sidebar_tool_label">Share to
                    Facebook</span>
            </a>
        </li>
        <li class="js-share-tool-item share_sidebar_tool_item">
            <a class="js-share-tool js-share-linkedin share_sidebar_tool" href="#" target="_blank" rel="noopener">
                <span class="share_sidebar_tool_icon">
                    <svg class="icon icon_linkedin">
                        <use href="/images/icons.svg#linkedin" />
                    </svg>
                </span>
                <span class="share_sidebar_tool_label">Share to
                    Linkedin</span>
            </a>
        </li>
    </ul>
</div>
 
{#
	{% include '@partial-share' with {
		title: 'Share This',
		icon: 'plus',
		class:'',
		direction: 'right',
		items: [
			'Twitter',
			'Facebook',
			'Linkedin'
		]
	} %}
#}
<div class="js-share-tools share_tools share_sidebar_tools {{ class }}_share_tools direction_{{ direction }} theme_{{ theme }}">
	<div class="share_sidebar_tools_header">
		<h2 class="share_sidebar_tools_title">Share Options</h2>
		<button class="js-share-tools-toggle share_sidebar_tools_toggle" data-swap-target=".js-share-tools">
			<span class="share_sidebar_tools_toggle_inner">
				{% if icon %}
					<span class="share_sidebar_tools_toggle_icon">{{ icon(icon) }}</span>
				{% endif %}
				<span class="share_sidebar_tools_toggle_label">{{ title }}</span>
			</span>
		</button>
	</div>
	<ul class="js-share-tools-list share_sidebar_tools_list" aria-label="Share Options">
		{% for item in items %}
			<li class="js-share-tool-item share_sidebar_tool_item">
				<a class="js-share-tool js-share-{{ item|lower }} share_sidebar_tool" href="#" target="_blank" rel="noopener">
					<span class="share_sidebar_tool_icon">{{ icon(item|lower) }}</span>
					<span class="share_sidebar_tool_label">Share to
						{{ item }}</span>
				</a>
			</li>
		{% endfor %}
	</ul>
</div>

No notes defined.