CCGA Component Library

Page Microsite 

<div class="js-sub-nav-group page_nav_group">
    <div class="page_nav_button_wrap">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="page_nav_button_wrap_inner">
                    <button class="js-page-nav-toggle js-swap page_nav_toggle " data-swap-target=".js-sub-nav-group">
                        <span class="page_nav_toggle_inner_default page_nav_toggle_inner">
                            <span class="page_nav_toggle_label_default page_nav_toggle_label">Explore 100 Years of CCGA</span>
                            <span class="page_nav_toggle_icon_default page_nav_toggle_icon" aria-hidden="true">
                                <span class="page_nav_toggle_icon_inner_default page_nav_toggle_icon_inner">
                                    <span class="page_nav_toggle_icon_space">&#xfeff;</span>

                                    <svg class="icon icon_plus">
                                        <use href="/images/icons.svg#plus" />
                                    </svg>

                                </span>
                            </span>
                        </span>
                        <span class="page_nav_toggle_inner_active page_nav_toggle_inner">
                            <span class="page_nav_toggle_label_active page_nav_toggle_label">Close</span>
                            <span class="page_nav_toggle_icon_active page_nav_toggle_icon" aria-hidden="true">
                                <span class="page_nav_toggle_icon_inner_active page_nav_toggle_icon_inner">
                                    <span class="page_nav_toggle_icon_space">&#xfeff;</span>

                                    <svg class="icon icon_close">
                                        <use href="/images/icons.svg#close" />
                                    </svg>

                                </span>
                            </span>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="page_nav_links">
        <div class="fs-row">
            <div class="fs-cell fs-lg-8 fs-lg-justify-center">
                <nav class="js-sub-nav page_nav_navigation" aria-labelledby="page_nav_title">
                    <div class="page_nav_header">
                        <h2 class="page_nav_title" id="page_nav_title">Explore:</h2>
                    </div>
                    <div class="js-sub-nav-body page_nav_body">
                        <div class="js-sub-nav-body-inner page_nav_body_inner">
                            <ul class="js-sub-nav-list page_nav_list" aria-labelledby="page_nav_title">
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>
 
<div class="js-sub-nav-group page_nav_group">
	<div class="page_nav_button_wrap">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="page_nav_button_wrap_inner">
					{% render "@partial-button-toggle" with {
						class: "page_nav",
						title: "Explore 100 Years of CCGA",
						icon: "plus",
						active_title: "Close",
						active_icon: "close",
						swap_target: ".js-sub-nav-group"
					} %}
				</div>
			</div>
		</div>
	</div>

	<div class="page_nav_links">
		<div class="fs-row">
			<div class="fs-cell {{ cell }} fs-lg-justify-center">
				<nav class="js-sub-nav page_nav_navigation" aria-labelledby="page_nav_title">
					<div class="page_nav_header">
						<h2 class="page_nav_title" id="page_nav_title">Explore:</h2>
					</div>
					<div class="js-sub-nav-body page_nav_body">
						<div class="js-sub-nav-body-inner page_nav_body_inner">
							<ul class="js-sub-nav-list page_nav_list" aria-labelledby="page_nav_title">
								{% for link in links %}
									<li class="js-page-nav-item js-page-nav-item-{{ loop.index }} page_nav_item">
										<a class="page_nav_link" href="#page_section_{{ loop.index }}">
											<span class="page_nav_link_label">{{ link.title ?: link }}</span>
										</a>
									</li>
								{% endfor %}
							</ul>
						</div>
					</div>
				</nav>
			</div>
		</div>
	</div>
</div>

No notes defined.