CCGA Component Library

Search Top 

<div class="search_top">

    <div class="search_top_breadcrumbs">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="breadcrumb">
                    <nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
                        <div class="breadcrumb_nav_header">
                            <h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
                        </div>
                        <ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
                            <li class="breadcrumb_item breadcrumb_item_home">
                                <a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html" aria-label="Home">
                                    <span class="breadcrumb_pill_inner">
                                        <span class="breadcrumb_pill_icon" aria-hidden="true">
                                            <svg class="icon icon_home">
                                                <use href="/images/icons.svg#home" />
                                            </svg>
                                        </span>

                                        <span class="breadcrumb_pill_icon_back" aria-hidden="true" aria-label="Go Back">
                                            <svg class="icon icon_arrow_back_breadcrumbs">
                                                <use href="/images/icons.svg#arrow_back_breadcrumbs" />
                                            </svg>
                                        </span>

                                        <span class="breadcrumb_pill_label">Home</span>
                                    </span>
                                </a>
                                <span class="breadcrumb_divider" aria-hidden="true">
                                    <svg class="icon icon_caret_right">
                                        <use href="/images/icons.svg#caret_right" />
                                    </svg>
                                </span>
                            </li>
                            <li class="breadcrumb_item">
                                <span class="breadcrumb_pill">
                                    <span class="breadcrumb_pill_inner">
                                        <span class="breadcrumb_pill_label">Page Title</span>
                                    </span>
                                </span>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-push-1 fs-xl-push-2">

            <div class="search_top_inner">

                <div class="search_top_wrapper">
                    <div class="search_top_header">
                        <h2 class="search_top_header_text">Search The Council</h2>
                    </div>

                    <div class="js-site-search site_search site_search_funnelback" id="site_search_funnelback" role="search" itemscope itemtype="https://schema.org/WebSite" aria-label="Site Search">
                        <meta itemprop="url" content="http://ccga.dev.fastspot.com">
                        <form class="site_search_form" action="/static-html/templates/page-search.html" itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
                            <meta itemprop="target" content="http://ccga.dev.fastspot.com/static-html/templates/page-search.html?q={q}">
                            <label class="js-site-search-label site_search_label" for="search_string__funnelback">Search</label>
                            <div class="site_search_field">
                                <input class="js-site-search-input site_search_input" itemprop="query-input" type="search" id="search_string__funnelback" name="q" placeholder="Enter Keyword" required>
                                <button class="site_search_button" type="submit">
                                    <span class="site_search_button_label">Submit</span>
                                    <span class="site_search_button_icon">
                                        <svg class="icon icon_search">
                                            <use href="/images/icons.svg#search" />
                                        </svg>
                                    </span>
                                </button>
                            </div>
                        </form>
                    </div>

                    <div class="search_top_popular">
                        <h3 class="search_top_popular_heading">Explore Popular Searches</h3>
                        <ul class="search_top_popular_list">
                            <li class="search_top_popular_list_item">
                                <a href="/search?query=Climate%20and%20the%20Environment" class="search_top_popular_list_item_link">Climate and the Environment</a>
                            </li>
                            <li class="search_top_popular_list_item">
                                <a href="/search?query=Global%20Health" class="search_top_popular_list_item_link">Global Health</a>
                            </li>
                            <li class="search_top_popular_list_item">
                                <a href="/search?query=Energy" class="search_top_popular_list_item_link">Energy</a>
                            </li>
                            <li class="search_top_popular_list_item">
                                <a href="/search?query=The%20Middle%20East" class="search_top_popular_list_item_link">The Middle East</a>
                            </li>
                            <li class="search_top_popular_list_item">
                                <a href="/search?query=Russian%20Election%20Meddling" class="search_top_popular_list_item_link">Russian Election Meddling</a>
                            </li>
                            <li class="search_top_popular_list_item">
                                <a href="/search?query=Election%202020" class="search_top_popular_list_item_link">Election 2020</a>
                            </li>
                            <li class="search_top_popular_list_item">
                                <a href="/search?query=Global%20Politics" class="search_top_popular_list_item_link">Global Politics</a>
                            </li>
                            <li class="search_top_popular_list_item">
                                <a href="/search?query=President%20Trump" class="search_top_popular_list_item_link">President Trump</a>
                            </li>
                            <li class="search_top_popular_list_item">
                                <a href="/search?query=Coronavirus" class="search_top_popular_list_item_link">Coronavirus</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        jQuery('#search_string__funnelback').qc({
            program: 'https://ccga-search.clients.us.funnelback.com/s/suggest.json',
            alpha: '0.5',
            show: '10',
            sort: '0',
            length: '3',
            datasets: {
                organic: {
                    name: 'Suggestions',
                    collection: 'ccga-search',
                    profile: '_default_preview',
                    show: '5',
                },
            }
        });
    });
</script>

<script defer src="https://ccga-search.clients.us.funnelback.com/stencils/resources/autocompletion/js/typeahead.bundle-0.11.1.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script defer src="https://ccga-search.clients.us.funnelback.com/s/resources/ccga-search/_default_preview/js/typeahead.fb-2.6.js"></script>
 
<div class="search_top">

	<div class="search_top_breadcrumbs">
		<div class="fs-row">
			<div class="fs-cell">
				{% render '@navigation-breadcrumb--search' %}
			</div>
		</div>
	</div>

	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-push-1 fs-xl-push-2">

			<div class="search_top_inner">

				<div class="search_top_wrapper">
					<div class="search_top_header">
						<h2 class="search_top_header_text">{{ heading }}</h2>
					</div>

					{% render '@partial-search' with {
						modifier: 'funnelback',
						placeholder: 'Enter Keyword'
					} %}

					{% if popular_items %}
					<div class="search_top_popular">
						<h3 class="search_top_popular_heading">Explore Popular Searches</h3>
						<ul class="search_top_popular_list">
							{% for item in popular_items %}
							<li class="search_top_popular_list_item">
								<a href="/search?query={{ item|url_encode }}" class="search_top_popular_list_item_link">{{ item }}</a>
							</li>
							{% endfor %}
						</ul>
					</div>
					{% endif %}
				</div>
			</div>

		</div>
	</div>

</div>

<script>
	document.addEventListener("DOMContentLoaded", function() {
		jQuery('#search_string__funnelback').qc({
			program: 'https://ccga-search.clients.us.funnelback.com/s/suggest.json',
			alpha: '0.5',
			show: '10',
			sort: '0',
			length: '3',
			datasets: {
				organic: {
					name: 'Suggestions',
					collection: 'ccga-search',
					profile: '_default_preview',
					show: '5',
				},
			}
		});
	});
</script>

<script defer src="https://ccga-search.clients.us.funnelback.com/stencils/resources/autocompletion/js/typeahead.bundle-0.11.1.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script defer src="https://ccga-search.clients.us.funnelback.com/s/resources/ccga-search/_default_preview/js/typeahead.fb-2.6.js"></script>

No notes defined.