Listing Page

Ready

HTML
Info
Assets


        
        <link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

<div class="page-container theme-corporate" data-glow="0, 111, 238">

    <main id="page-main" class="page-main">

        <nav role="navigation" aria-label="anchor-links" class="anchor-links ">
            <ul class="anchor-links__inner">

                <li>
                    <a href="#you-are-here" class="in-page-link">
                            
                        <span class="anchor-links__label">
                                                            You are here
                                                    </span>
                        <span class="anchor-links__dot"></span>
                    </a>
                </li>

                <li>
                    <a href="#go-there" class="in-page-link">
                            
                        <span class="anchor-links__label">
                                                            go there
                                                    </span>
                        <span class="anchor-links__dot"></span>
                    </a>
                </li>

                <li>
                    <a href="#go-again" class="in-page-link">
                            
                        <span class="anchor-links__label">
                                                            go again
                                                    </span>
                        <span class="anchor-links__dot"></span>
                    </a>
                </li>

                <li>
                    <a href="#last-choice" class="in-page-link">
                            
                        <span class="anchor-links__label">
                                                            last choice
                                                    </span>
                        <span class="anchor-links__dot"></span>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="blocksbuilder">
            <div class="block">
            </div>
            <div class="block">
            </div>
            <div class="block">
            </div>
            <div class="block">
            </div>
        </div>
        <div class="search-results-listing">
            <div class="search-results-listing__inner">
                <div class="listing-page-form mb-l" style="overflow: visible;">
                    <div class="filters">
                        <div class="input-wrap filter-wrap">
                            <label for="filter-results">Filter by keyword</label>
                            <input type="text" id="filter-results">
                        </div>
                        <div class="select-wrap filter-wrap">
                            <label class="gfield_label" for="year-filter">Filter by year</label>
                            <div class="select-wrap__select">
                                <select name="year-filter" id="year-filter" class="year-filter gfield_select" aria-invalid="false" tabindex="-1" aria-hidden="true">
						<option value="">All years</option>
											<option value="2016">2016</option>
											<option value="2017">2017</option>
											<option value="2018">2018</option>
											<option value="2019">2019</option>
										</select>
                            </div>
                        </div>
                        <div class="select-wrap filter-wrap">
                            <label class="gfield_label" for="subcategory-filter">Filter by subcategory</label>
                            <div class="select-wrap__select">

                                <select name="subcategory-filter" id="subcategory-filter" class="subcategory-filter gfield_select" aria-invalid="false" tabindex="-1" aria-hidden="true">
							<option value="">All subcategories</option>
													<option value="Category 1">Category 1</option>
													<option value="Category 2">Category 2</option>
													<option value="Category 3">Category 3</option>
													<option value="Category 4">Category 4</option>
												</select>
                            </div>
                        </div>
                    </div>
                    <br>
                    <p class="listing-page-results-counter"><span class="listing-page-results-counter__number">2</span> results</p>
                </div>
                <div class="listing-page-results">

                    <div class="result-teaser result-teaser--press-release b-w mb-l" data-year="2018" data-category="c a t e g o r y">
                        <div class="result-teaser__inner">
                            <div class="result-teaser__meta pr-b">
                                <div class="result-teaser__post-type sub-heading mb-s">
                                    19 August 2018
                                </div>
                                <a href="http://via.placeholder.com/20x20">
                                    <h4 class="result-teaser__heading heading">Non officia minim magna proident fugiat Lorem aliquip ex proident ea. Non officia minim magna proident fugiat Lorem aliquip ex proident ea.</h4>
                                </a>
                                <p class="result-teaser__category"></p>
                            </div>
                            <div class="result-teaser__icons">
                                <div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="http://via.placeholder.com/20x20" data-a2a-title="Non officia minim magna proident fugiat Lorem aliquip ex proident ea. Non officia minim magna proident fugiat Lorem aliquip ex proident ea.">
                                    <a class="a2a_dd" href="https://www.addtoany.com/share"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>__Plan de travail 3 copie 34@2x</title><path d="M17,15.38a2.79,2.79,0,0,0-1.74.62L9.63,12.54a2.68,2.68,0,0,0,0-1.07L15.26,8a2.8,2.8,0,1,0-1.07-2.19,2.77,2.77,0,0,0,0,.33L8.47,9.69a2.81,2.81,0,1,0,0,4.63l5.75,3.54a2.77,2.77,0,0,0,0,.33A2.81,2.81,0,1,0,17,15.38Z"/></svg></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="result-teaser result-teaser--press-release b-w mb-l" data-year="2019" data-category="c a t e g o r y">
                        <div class="result-teaser__inner">
                            <div class="result-teaser__meta pr-b">
                                <div class="result-teaser__post-type sub-heading mb-s">
                                    9 July 2019
                                </div>
                                <a href="http://via.placeholder.com/20x20">
                                    <h4 class="result-teaser__heading heading">Something something something something else</h4>
                                </a>
                                <p class="result-teaser__category"></p>
                            </div>
                            <div class="result-teaser__icons">
                                <div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="http://via.placeholder.com/20x20" data-a2a-title="Something something something something else">
                                    <a class="a2a_dd" href="https://www.addtoany.com/share"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>__Plan de travail 3 copie 34@2x</title><path d="M17,15.38a2.79,2.79,0,0,0-1.74.62L9.63,12.54a2.68,2.68,0,0,0,0-1.07L15.26,8a2.8,2.8,0,1,0-1.07-2.19,2.77,2.77,0,0,0,0,.33L8.47,9.69a2.81,2.81,0,1,0,0,4.63l5.75,3.54a2.77,2.77,0,0,0,0,.33A2.81,2.81,0,1,0,17,15.38Z"/></svg></a>
                                </div>
                            </div>
                        </div>
                    </div>

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

    <div id="site-footer" class="colophon">
        <div class="colophon__inner">
            <div class="colophon__brand-block">
                <div class="ipsen-logo">

                    <svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="-194 390.9 206 60">
  <style>.st0{fill:#18296c}.st1{fill:#1a93e5}</style>
  <path class="st0" d="M-150.1 446.7c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6v-8.3c0-.4.4-.6.7-.6.3 0 .5.3.6.6v8.3zM-166.1 393.3s-39.8 14.3-6.6 28.6c0 0-39.6-14.1 6.6-28.6"/><path class="st0" d="M-175.5 397.2c-8.3 3.6-12.5 7.3-12.5 11.2 0 2.5 1.7 4.8 4 6.8-1.5-1.5-2.3-3.6-2.3-5.7.1-5 5.6-9.3 10.8-12.3m2.8 25.2h-.1c-.7-.2-16.3-5.9-16.1-13.9.1-5.6 7.7-10.8 22.7-15.5.2-.1.5.1.6.3.1.2-.1.4-.3.5-.2.1-19.2 7-19.5 15.7-.1 4.2 4.2 8.3 12.9 12 .2 0 .4.2.4.4-.1.2-.3.4-.6.5.1 0 .1 0 0 0z"/><path class="st0" d="M-185.6 447.4s40.3-13.3 6.9-28.2c0 .1 39.8 15-6.9 28.2"/><path class="st0" d="M-167.3 426.2c1.5 1.5 2.3 3.6 2.3 5.8-.2 4.9-5.8 9-11.1 11.8 8.3-3.3 12.6-6.9 12.8-10.7.1-2.5-1.6-4.9-4-6.9m-18.3 21.7c-.2 0-.4-.1-.4-.3-.1-.2 0-.5.3-.5.2-.1 19.4-6.5 19.8-15.1.2-4.2-4.1-8.3-13-12.3-.2-.1-.3-.4-.2-.6.1-.2.3-.3.5-.2.7.3 16.4 6.3 16.1 14.3-.2 5.5-8 10.5-23.1 14.7.1 0 0 0 0 0M-109.9 416.5c0 2.2-.6 3.1-2.8 3.1h-11.9v-7.3c0-2 1-3.1 3.6-3.1h8.3c2.2 0 2.9.9 2.8 3.1v4.2zm3.5-10.7h-28.9v26.6h10.7V423h18.3c4.5 0 7.1-1 7.1-5.4v-6.4c-.1-4.4-2.7-5.4-7.2-5.4M-151.2 405.8h10.7v26.6h-10.7zM-62.3 426.9c0 3-.9 5.5-7 5.5h-24.3V429h18.1c1.3.1 2.4-.9 2.5-2.1v-3.3c0-2-.9-2.9-2.7-2.9h-14.1c-4.8 0-6.2-2.3-6.2-5.2v-4.9c0-2.9 2.3-4.8 6.2-4.8h23.5s-.3 3.4-4.5 3.4h-11.8c-2.2 0-2.8 1.3-2.8 2.7v2.5c0 1.6.6 2.8 2.6 2.8H-69c5.3 0 6.7 2.1 6.7 5.9v3.8zM-59 432.4v-26.6h29.1v3.5h-15.6c-1.8 0-2.8.7-2.8 2.8v5.2H-33s-.3 3.4-4.5 3.4h-10.8v5.5c0 2.1 1 2.8 2.7 2.8h15.7v3.4H-59zM.9 432.4c-2.5 0-4.4-1-6.3-3.2l-16-18.3h-.1v21.5h-4.9v-26.6h9.8c1.8-.1 3.6.6 4.9 2 1.3 1.6 16.6 19.1 16.6 19.1H5v-21.1h4.9v26.6h-9zM-148.3 440.8c0-.4.3-.6.7-.6.4 0 .6.3.6.6v.3c.5-.6 1.3-1 2.2-.9 1.4-.1 2.6 1 2.7 2.4v4.2c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6V443c-.1-1-1-1.7-2-1.6-.8.1-1.5.8-1.6 1.6v3.8c0 .4-.3.6-.7.6-.4 0-.6-.3-.6-.6v-6zM-140.3 440.8c0-.4.4-.6.7-.6.3 0 .5.3.6.6v.3c.5-.6 1.3-1 2.2-.9 1.4-.1 2.6 1 2.7 2.4v4.2c0 .4-.3.6-.7.6-.4 0-.6-.3-.6-.6V443c-.2-1-1.1-1.6-2.1-1.5-.7.1-1.3.7-1.5 1.5v3.8c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6v-6zM-129.2 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6-1.6 0-2.1 1.4-2.1 2.6-.1 1.2.5 2.6 2.1 2.6m0-6.2c2-.1 3.7 1.4 3.8 3.4.1 2-1.4 3.7-3.4 3.8-2 .1-3.7-1.4-3.8-3.4v-.2c-.1-1.9 1.3-3.5 3.2-3.6h.2M-125 441.2c-.1-.1-.1-.3-.1-.5 0-.3.3-.5.6-.5s.6.2.7.4l1.8 4.9 1.8-4.9c.1-.3.4-.5.7-.4.3 0 .6.2.6.5 0 .2-.1.3-.1.5l-2.2 5.7c-.1.3-.3.5-.7.5s-.6-.2-.7-.5l-2.4-5.7zM-114.9 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.2 1.4-2.2 2.6c0 1.2.6 2.6 2.2 2.6m3.4.5c0 .3-.3.6-.6.6s-.6-.2-.6-.5v-.6c-.5.7-1.3 1.1-2.1 1.1-2-.1-3.5-1.8-3.4-3.8.1-1.8 1.6-3.3 3.4-3.4.8 0 1.6.3 2.1 1v-.4c0-.3.3-.6.6-.6s.6.2.6.6v6zM-109.4 438.7c0-.4.3-.6.6-.6.4 0 .6.3.6.6v1.5h.5c.4 0 .7.2.7.5s-.2.5-.7.5h-.5v5.5c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6v-5.5h-.5c-.4 0-.7-.2-.7-.5s.2-.5.7-.5h.5v-1.5zM-104.6 446.7c0 .3-.2.6-.6.6h-.1c-.3 0-.6-.2-.6-.5v-6.1c0-.3.2-.6.6-.6h.1c.3 0 .6.2.6.5v6.1zm-.6-9c.4 0 .8.2.8.6 0 .4-.2.8-.6.8h-.2c-.4 0-.8-.2-.8-.6 0-.4.2-.8.6-.8h.2M-99.7 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.1 1.4-2.1 2.6c-.1 1.2.5 2.6 2.1 2.6m0-6.2c2-.1 3.7 1.4 3.8 3.4.1 2-1.4 3.7-3.4 3.8-2 .1-3.7-1.4-3.8-3.4v-.2c-.1-1.9 1.3-3.5 3.2-3.6h.2M-94.8 440.8c0-.3.2-.6.6-.6h.1c.3 0 .6.2.6.5v.4c.5-.6 1.3-1 2.2-.9 1.4-.1 2.6 1 2.7 2.4v4.2c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6V443c0-1-.8-1.8-1.8-1.8s-1.8.8-1.8 1.8v3.8c0 .3-.2.6-.5.6h-.1c-.3 0-.6-.2-.6-.5v-.1l-.2-6zM-81.4 446.7c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6v-5.5h-.5c-.4 0-.7-.2-.7-.5s.2-.5.7-.5h.5v-1.7c0-.8.7-1.5 1.5-1.5H-80.6c.3 0 .7.2.7.5s-.2.5-.7.5h-.3c-.4 0-.5.2-.5.5v1.7h.8c.4 0 .7.2.7.5s-.2.5-.7.5h-.8v5.5zM-76.1 446.3c1.6 0 2.2-1.4 2.2-2.6 0-1.2-.6-2.6-2.2-2.6s-2.1 1.4-2.1 2.6c-.1 1.2.5 2.6 2.1 2.6m0-6.2c2-.1 3.7 1.4 3.8 3.4.1 2-1.4 3.7-3.4 3.8-2 .1-3.7-1.4-3.8-3.4v-.2c-.1-1.9 1.3-3.5 3.2-3.6h.2M-71.3 440.8c0-.4.3-.6.6-.6.4 0 .6.3.6.6v.6c.3-.7 1-1.1 1.8-1.2.3 0 .7.2.7.5v.1c0 .3-.3.5-.8.6-1 .1-1.8 1-1.7 2v3.4c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6v-6zM-59.4 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.1 1.4-2.1 2.6c-.1 1.2.5 2.6 2.1 2.6m-3.4-5.5c0-.3.2-.6.6-.6h.1c.3 0 .6.2.6.5v.4c.5-.7 1.3-1.1 2.1-1 2 .2 3.5 1.9 3.3 3.9-.2 1.7-1.5 3.1-3.3 3.3-.8 0-1.6-.4-2.1-1v3.1c0 .3-.2.6-.5.6h-.1c-.3 0-.6-.2-.6-.5v-8.7zM-51.5 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.1 1.4-2.1 2.6c0 1.2.5 2.6 2.1 2.6m3.4.5c0 .3-.3.6-.6.6s-.6-.2-.6-.5v-.5c-.5.7-1.3 1.1-2.1 1.1-2-.1-3.5-1.8-3.4-3.8.1-1.8 1.6-3.3 3.4-3.4.8 0 1.6.3 2.1 1v-.4c0-.3.3-.6.6-.6s.6.2.6.6v5.9zM-45.9 438.7c0-.4.4-.6.7-.6.3 0 .5.3.6.6v1.5h.5c.4 0 .6.2.6.5s-.2.5-.6.5h-.5v5.5c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6v-5.5h-.5c-.4 0-.6-.2-.6-.5s.2-.5.6-.5h.5v-1.5zM-41.1 446.7c0 .4-.3.6-.7.6-.4 0-.6-.3-.6-.6v-6c0-.4.3-.6.6-.6.4 0 .7.3.7.6v6zm-.7-9c.4 0 .7.4.7.8s-.4.7-.8.7-.7-.3-.7-.7c0-.5.4-.8.8-.8M-34.3 443.3c.1-1.2-.8-2.2-2-2.3s-2.2.8-2.3 2v.3h4.3zm-4.2.9c0 1.2.9 2.1 2.1 2.1h.2c1.7 0 2.2-.9 2.6-.9.3 0 .5.2.5.5 0 .6-1.6 1.5-3.1 1.5-1.9.1-3.5-1.3-3.6-3.1v-.5c-.1-1.9 1.4-3.5 3.3-3.6h.2c1.9 0 3.3 1.5 3.3 3.4v.1c0 .4-.2.6-.7.6l-4.8-.1zM-31.6 440.8c0-.4.3-.6.6-.6.4 0 .6.3.6.6v.3c.5-.6 1.3-1 2.2-.9 1.4-.1 2.6 1 2.7 2.4v4.2c0 .3-.2.6-.5.6h-.1c-.3 0-.6-.2-.6-.5V443c0-1-.8-1.8-1.8-1.8s-1.8.8-1.8 1.8v3.8c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6l-.1-6zM-23.3 438.7c0-.3.2-.6.6-.6h.1c.3 0 .6.2.6.5v1.6h.5c.4 0 .6.2.6.5s-.2.5-.6.5h-.5v5.5c0 .3-.2.6-.5.6h-.1c-.3 0-.6-.2-.6-.5v-5.6h-.5c-.4 0-.6-.2-.6-.5s.2-.5.6-.5h.5l-.1-1.5zM-12.9 440.1c1.3 0 2.1.4 2.1.9 0 .3-.3.5-.5.5-.5 0-.7-.4-1.6-.4-1.4.2-2.4 1.5-2.2 3 .2 1.2 1.1 2.1 2.2 2.2.9 0 1.1-.4 1.6-.4.2 0 .5.1.5.4v.1c0 .4-.7.9-2.1.9-2-.1-3.5-1.8-3.4-3.8.1-1.8 1.6-3.3 3.4-3.4M-6.3 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.1 1.4-2.1 2.6c-.1 1.2.5 2.6 2.1 2.6m3.3.5c0 .3-.3.6-.6.6s-.6-.2-.6-.5v-.5c-.5.7-1.3 1.1-2.1 1.1-2-.1-3.5-1.8-3.4-3.8.1-1.8 1.6-3.3 3.4-3.4.8 0 1.6.3 2.1 1v-.4c0-.3.3-.6.6-.6s.6.2.6.5v6zM-1.2 440.8c0-.4.3-.6.7-.6.4 0 .6.3.6.6v.6c.3-.7 1-1.1 1.8-1.2.4 0 .7.2.7.6 0 .3-.3.5-.8.6-1 .1-1.8 1-1.7 2v3.4c0 .4-.3.6-.6.6-.4 0-.7-.3-.7-.6v-6zM8.6 443.3c.1-1.2-.8-2.2-2-2.3s-2.2.8-2.3 2v.3h4.3zm-4.3.9c0 1.2.9 2.1 2.1 2.1h.2c1.7 0 2.2-.9 2.6-.9.3 0 .5.2.5.5 0 .6-1.6 1.5-3.1 1.5-1.8.1-3.5-1.2-3.6-3.1v-.5c-.1-1.9 1.4-3.5 3.3-3.6h.2c1.9 0 3.4 1.5 3.4 3.3v.1c0 .4-.2.6-.7.6H4.3z"/><path class="st1" d="M-192.4 424.4s40.3-13.3 6.9-28.2c0 0 39.8 14.9-6.9 28.2"/><path class="st1" d="M-174.1 403.1c1.5 1.5 2.3 3.6 2.3 5.7-.2 4.9-5.8 9-11.1 11.8 8.3-3.3 12.6-6.9 12.8-10.7 0-2.4-1.7-4.8-4-6.8m-18.3 21.7c-.2 0-.4-.2-.4-.4s.1-.4.3-.4c.2-.1 19.4-6.5 19.8-15.1.2-4.2-4.1-8.3-13-12.3-.2-.1-.3-.4-.2-.6.1-.2.3-.3.5-.2.7.3 16.4 6.2 16.1 14.3-.2 5.5-8 10.5-23 14.7h-.1"/><path class="st1" d="M-159.5 414.4s-39.8 14.3-6.6 28.6c0 0-39.6-14.1 6.6-28.6M-161.7 406.6c.8 1.7.1 3.7-1.6 4.5-.1.1-.3.1-.5.2-1.8.7-3.3-.9-3.7-2.1-.4-1.9 1.7-3.1 3.9-3.5.8-.2 1.6.2 1.9.9"/><path class="st1" d="M-168.9 418.3c-8.3 3.6-12.5 7.3-12.6 11.2 0 2.5 1.7 4.8 4 6.8-1.5-1.5-2.3-3.6-2.3-5.7.1-5.1 5.6-9.3 10.9-12.3m2.8 25.1h-.1c-.7-.2-16.3-5.9-16.1-14 .1-5.6 7.7-10.8 22.7-15.5.2-.1.5 0 .5.3.1.2 0 .5-.3.6-.2.1-19.2 7-19.5 15.7-.1 4.2 4.2 8.3 12.9 12 .2 0 .4.2.4.4-.1.3-.3.5-.5.5z"/>
</svg> </div>
                <ul class="colophon__brand-block-social">
                </ul>
                <div class="colophon__brand-block-copyright">
                </div>
            </div>
            <nav class="colophon__widgets">
                <div class="colophon__link-block">
                    <div class="menu-masthead-menu-container">
                        <h4 class="colophon__heading">Children with lower limb spasticity</h4>
                        <ul id="menu-masthead-menu" class="menu">
                            <li><a href="http://local.ipsen.com/testing-blocks/">Testing Blocks</a>
                                <ul class="sub-menu">
                                    <li><a href="http://local.ipsen.com/">This is a test page</a></li>
                                    <li><a href="http://local.ipsen.com/">Home</a></li>
                                    <li><a href="http://local.ipsen.com/">This is a test</a></li>
                                    <li><a href="http://local.ipsen.com/">Home</a></li>
                                    <li><a href="http://local.ipsen.com/">This is a hero test page</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="colophon__link-block">
                    <div class="menu-masthead-menu-container">
                        <h4 class="colophon__heading">Adults with spasticity</h4>
                        <ul id="menu-masthead-menu" class="menu">
                            <li><a href="http://local.ipsen.com/testing-blocks/">Testing Blocks</a>
                                <ul class="sub-menu">
                                    <li><a href="http://local.ipsen.com/">This is a test page</a></li>
                                    <li><a href="http://local.ipsen.com/">Home</a></li>
                                    <li><a href="http://local.ipsen.com/">This is a test</a></li>
                                    <li><a href="http://local.ipsen.com/">Home</a></li>
                                    <li><a href="http://local.ipsen.com/">This is a hero test page</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="colophon__link-block">
                    <div class="menu-masthead-menu-container">
                        <ul class="sub-menu">
                            <li><a href="http://local.ipsen.com/">This is a test page</a></li>
                            <li><a href="http://local.ipsen.com/">Home</a></li>
                            <li><a href="http://local.ipsen.com/">This is a test</a></li>
                            <li><a href="http://local.ipsen.com/">Home</a></li>
                            <li><a href="http://local.ipsen.com/">This is a hero test page</a></li>
                        </ul>
                        </li>
                        </ul>
                    </div>
                </div>
                <div class="colophon__link-block">
                    <div class="menu-masthead-menu-container">
                        <ul id="menu-masthead-menu" class="menu">
                            <li><a href="http://local.ipsen.com/testing-blocks/">Testing Blocks</a>
                                <ul class="sub-menu">
                                    <li><a href="http://local.ipsen.com/">This is a test page</a></li>
                                    <li><a href="http://local.ipsen.com/">Home</a></li>
                                    <li><a href="http://local.ipsen.com/">Home</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="legally-required">
    </div>
    <!--  -->

</div>

<script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script>

Handle: @listing-page
Preview:
- With layout
- Component only
Filesystem Path: src/components/_templates/listing-page/listing-page.twig
References (4): @listing-page, @default, @anchor-links, @blocksbuilder

File:

Content:


                                /* @listing-page */
.page-template-template-listing {
    .listing-page-form {
        .filters {
            display: flex;
            
            @media (max-width: #{$medium-screen - 1}) {
                flex-direction: column;
            }

            .filter-wrap {
                flex: 1;
                padding: 2rem 1.5rem 0 0;
            }

            .listing-page-results-counter {
                margin-left: 0.5rem;
                background: white;
                display: inline-block;
            }
        }
    }

    .result-teaser {
        transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);	

        &[class*="filterby"] {
            height: 0;
            opacity: 0;
            margin: 0;
            padding-top: 0;
            padding-bottom: 0;
        }
    }
}

URL: /components/raw/listing-page/_listing-page.scss
Filesystem Path: src/components/_templates/listing-page/_listing-page.scss
Size: 817 Bytes

Content:


                                
function updateResultsCount(filter) {
  var results_count = $('.result-teaser:not([class*="filterby"])').length
  $('.listing-page-results-counter__number').html(results_count)
}

function keywordFilter(filter, type) {
  var filterType = 'filterby-' + type

  if(filter) {
    $('.result-teaser h4').each(function() {
      if($(this).text().toLowerCase().indexOf(filter) >= 0) {
        $(this).closest('.result-teaser').removeClass(filterType)
        updateResultsCount()
      }
      else {
        $(this).closest('.result-teaser').addClass(filterType)
        updateResultsCount()
      }
    })
  } 
  else {
    $('.result-teaser').removeClass(filterType)
        updateResultsCount()
  }
}


function dataFilter(filter, data) {
  var sanitiseFilter = data.split('-').pop()
  var filterType = 'filterby-' + sanitiseFilter

  if(filter) {
    $('.result-teaser').each(function() {
      if($(this).attr(data).includes(filter)) {

        $(this).removeClass(filterType)
        updateResultsCount()
      }
      else {
        $(this).addClass(filterType)
        updateResultsCount()
      }
    })
  }
   else {
    $('.result-teaser').removeClass(filterType)
    updateResultsCount()
  }
}

$(document).ready(function () {

  $('#filter-results').on('change paste keyup', function() {
    var filter_text = $(this).val()
    keywordFilter(filter_text, 'keyword')

  })

  $('#year-filter').on('select2:select', function(e) { 
    var chosenYear = $(e.currentTarget).find('option:selected').val()  
    dataFilter(chosenYear, 'data-year')
  })

  $('#subcategory-filter').on('select2:select', function(e) { 
    var chosenSubcategory = $(e.currentTarget).find('option:selected').val()  
    dataFilter(chosenSubcategory, 'data-category')
  })
})

URL: /components/raw/listing-page/listing-page.js
Filesystem Path: src/components/_templates/listing-page/listing-page.js
Size: 1.8 KB

Listing Page

Bourse Widget

Form Elements

Hero

CTA

Links