Children and Screens Component Library

Page Sidebar 

<div class="page_sidebar _page_sidebar">
    <div class="page_sidebar_wrapper">
        <div class="page_sidebar_items">
            <div class="page_sidebar_item">

                <div class="js-share-tools share_tools share_sidebar_tools share_tools_sidebar_share_tools direction_left 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_share">
                                        <use href="/images/icons.svg#share" />
                                    </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>
            </div>

            <div class="page_sidebar_item">

                <a href="#" class="page_sidebar_item_link theme_light_green">
                    <span class="page_sidebar_item_link_inner">
                        <span class="page_sidebar_item_link_label"></span>
                        <span class="page_sidebar_item_link_icon" aria-hidden="true">

                            <svg class="icon icon_file_alt">
                                <use href="/images/icons.svg#file_alt" />
                            </svg>

                        </span>
                    </span>
                </a>
            </div>

        </div>
    </div>
</div>
 
{#
    {% include '@partial-page-sidebar' with {
        class:'',
    } %}
#}
<div class="page_sidebar {{ class }}_page_sidebar">
	<div class="page_sidebar_wrapper">
		<div class="page_sidebar_items">
			<div class="page_sidebar_item">
				{% include '@partial-share-sidebar' with {
                    class:'share_tools_sidebar',
                    title: '',
                    icon: 'share',
                    theme: 'salmon',
                    direction:'left',
                    items: [
                        'Twitter',
                        'Facebook',
                        'Linkedin'
                    ]
                } %}
			</div>

			<div class="page_sidebar_item">
				{% include '@partial-link' with {
                    class:'page_sidebar_item',
                    title: '',
                    icon: 'file_alt',
                    theme:'light_green'
                } %}
			</div>

		</div>
	</div>
</div>

No notes defined.