<main class="layout">

    <aside class="layout__item  layout__item--secondary">

        <div class="layout__wrapper">

            <div class="pop-up  pop-up--layout" id="popup-refine">

                <form class="refine">

                    <fieldset class="refine__category">

                        <legend class="refine__title">Content type</legend>

                        <div class="refine__options">

                            <input id="content-type-news" name="" type="checkbox">

                            <label class="refine__option" for="content-type-news">News</label>

                            <input id="content-type-case-study" name="" type="checkbox">

                            <label class="refine__option" for="content-type-case-study">Case study</label>

                            <input id="content-type-report" name="" type="checkbox">

                            <label class="refine__option" for="content-type-report">Report</label>

                            <input id="content-type-resource" name="" type="checkbox">

                            <label class="refine__option" for="content-type-resource">Resource</label>

                            <input id="content-type-presentation" name="" type="checkbox">

                            <label class="refine__option" for="content-type-presentation">Presentation</label>

                        </div>

                        <button class="refine__clear  button  button--tertiary  button--tiny" type="reset">Clear</button>

                    </fieldset>

                    <button class="button  button--block  button--secondary" type="submit">Apply filters</button>

                </form>

            </div>

        </div>

    </aside>

    <article class="layout__item  layout__item--primary" id="primary">

        <div class="layout__wrapper">

            <div class="search-results">

                <header class="search-results__header">

                    <span class="search-results__count">123 results</span>

                </header>

                <ul class="list-bare">

                    <li>

                        <a class="search-result" href="#link-to-page">

                            <span class="search-result__category">Content type</span>

                            <h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>

                            <p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
                                lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>

                        </a>

                    </li>

                    <li>

                        <a class="search-result" href="#link-to-page">

                            <span class="search-result__category">Content type</span>

                            <h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>

                            <p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
                                lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>

                        </a>

                    </li>

                    <li>

                        <a class="search-result" href="#link-to-page">

                            <span class="search-result__category">Content type</span>

                            <h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>

                            <p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
                                lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>

                        </a>

                    </li>

                    <li>

                        <a class="search-result" href="#link-to-page">

                            <span class="search-result__category">Content type</span>

                            <h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>

                            <p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
                                lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>

                        </a>

                    </li>

                    <li>

                        <a class="search-result" href="#link-to-page">

                            <span class="search-result__category">Content type</span>

                            <h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>

                            <p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
                                lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>

                        </a>

                    </li>

                    <li>

                        <a class="search-result" href="#link-to-page">

                            <span class="search-result__category">Content type</span>

                            <h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>

                            <p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
                                lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>

                        </a>

                    </li>

                    <li>

                        <a class="search-result" href="#link-to-page">

                            <span class="search-result__category">Content type</span>

                            <h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>

                            <p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
                                lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>

                        </a>

                    </li>

                    <li>

                        <a class="search-result" href="#link-to-page">

                            <span class="search-result__category">Content type</span>

                            <h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>

                            <p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
                                lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>

                        </a>

                    </li>

                    <li>

                        <a class="search-result" href="#link-to-page">

                            <span class="search-result__category">Content type</span>

                            <h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>

                            <p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
                                lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>

                        </a>

                    </li>

                    <li>

                        <a class="search-result" href="#link-to-page">

                            <span class="search-result__category">Content type</span>

                            <h2 class="search-result__title">Fusce vehicula dolor arcu, sit amet blandit</h2>

                            <p class="search-result__description">…estibulum rutrum quam vitae <strong>iaculis</strong> fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis <strong>iaculis</strong> nulla <strong>iaculis</strong> vitae. Donec sagittis faucibus
                                lacus eget blandit. Mauris vitae ultricies metus, at condimentum nulla. Donec quis ornare lacus. Etiam gravida mollis <strong>iaculis</strong> tortor quis porttitor…</p>

                        </a>

                    </li>

                </ul>

                <ul class="search-pagination">

                    <li class="search-pagination__item  search-pagination__item--step">

                        <a class="search-pagination__control" href="#link-to-previous-results">

                            <svg class="svg-icon svg-icon--inline" xmlns="http://www.w3.org/2000/svg" title="Previous results">

                                <title>Previous results</title>

                                <use xlink:href="#svg-icon-chevron-left" />

                            </svg>

                        </a>

                    <!-- /li -->

                    <li class="search-pagination__item search-pagination__item--link">

                        <a class="search-pagination__control" href="#link-to-page-1">

                1

            </a>

                    <!-- /li -->

                    <li class="search-pagination__item search-pagination__item--link">

                        <a class="search-pagination__control" href="#link-to-page-2">

                2

            </a>

                    <!-- /li -->

                    <li class="search-pagination__item">

                        <span class="search-pagination__control  search-pagination__control--active">

                3

            </span>

                    <!-- /li -->

                    <li class="search-pagination__item search-pagination__item--link">

                        <a class="search-pagination__control" href="#link-to-page-4">

                4

            </a>

                    <!-- /li -->

                    <li class="search-pagination__item search-pagination__item--link">

                        <a class="search-pagination__control" href="#link-to-page-5">

                5

            </a>

                    <!-- /li -->

                    <li class="search-pagination__item  search-pagination__item--step">

                        <a class="search-pagination__control" href="#link-to-next-results">

                            <svg class="svg-icon svg-icon--inline" xmlns="http://www.w3.org/2000/svg" title="Next results">

                                <title>Next results</title>

                                <use xlink:href="#svg-icon-chevron-right" />

                            </svg>

                        </a>

                    <!-- /li -->

                </ul>

            </div>

        </div>

    </article>

</main>

There are no notes for this item.