St. George's University Component Library

Share: Detail 

<div class="share_tools_detail">
    <div class="share_tools_detail_header">
        <h2 class="share_tools_detail_title">Share This</h2>
    </div>
    <ul class="share_tools_detail_list" aria-label="Share Options">
        <li class="share_tool_detail_item">
            <a class="share_tool_detail" href="#" target="_blank" rel="noopener">
                <span class="share_tool_detail_icon">
                    <svg class="icon icon_twitter">
                        <use href="/images/icons.svg#twitter" />
                    </svg>
                </span>
                <span class="share_tool_detail_label">Share to Twitter</span>
            </a>
        </li>
        <li class="share_tool_detail_item">
            <a class="share_tool_detail" href="#" target="_blank" rel="noopener">
                <span class="share_tool_detail_icon">
                    <svg class="icon icon_facebook_alt">
                        <use href="/images/icons.svg#facebook_alt" />
                    </svg>
                </span>
                <span class="share_tool_detail_label">Share to Facebook</span>
            </a>
        </li>
        <li class="share_tool_detail_item">
            <a class="share_tool_detail" href="#" target="_blank" rel="noopener">
                <span class="share_tool_detail_icon">
                    <svg class="icon icon_linkedin">
                        <use href="/images/icons.svg#linkedin" />
                    </svg>
                </span>
                <span class="share_tool_detail_label">Share to Linkedin</span>
            </a>
        </li>
    </ul>
</div>
 
{#
	{% include '@partial-share--detail' with {
		title: 'Share This',
		icon: 'plus',
		items: [
			'Twitter',
			'Facebook',
			'Linkedin'
		]
	} %}
#}
<div class="share_tools_detail">
	<div class="share_tools_detail_header">
		<h2 class="share_tools_detail_title">{{ title }}</h2>
	</div>
	<ul class="share_tools_detail_list" aria-label="Share Options">
		{% for item in items %}
			{% set icon = (item == 'Facebook') ? 'facebook_alt' : item %}
			<li class="share_tool_detail_item">
				<a class="share_tool_detail" href="#" target="_blank" rel="noopener">
					<span class="share_tool_detail_icon">{{ icon(icon|lower) }}</span>
					<span class="share_tool_detail_label">Share to {{ item }}</span>
				</a>
			</li>
		{% endfor %}
	</ul>
</div>

No notes defined.