Understanding Patient Data

Search Results: Case Studies 

<div class="search-results">

    <header class="search-results__header    u-display-none  u-display-block-from-x-large">

        <ul class="grid    gutter  gutter--medium">

            <li class="grid__item    gutter__item    u-width-1-of-3">

                <a class="case-study-tile" href="#link-to-destination">

                    <img alt="" class="case-study-tile__image" src=../../images/placeholder/case-study-tile-whooping-cough.jpg>

                    <div class="case-study-tile__info">

                        <h2 class="case-study-tile__title">Whooping cough vaccination during pregnancy</h2>

                        <ul class="tag-list">

                            <li class="tag-list__item">

                                <span class="tag  tag--planning">

Planning

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--disease-risks-and-causes">

Disease risks and causes

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--diagnosis">

Diagnosis

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--patient-safety">

Patient safety

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--policy">

Policy

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--treatment-and-prevention">

Treatment and prevention

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--individual-care">

Individual care

</span>

                            </li>

                        </ul>

                    </div>

                </a>

            <!-- /li -->

            <li class="grid__item    gutter__item    u-width-1-of-3">

                <a class="case-study-tile" href="#link-to-destination">

                    <img alt="" class="case-study-tile__image" src=../../images/placeholder/case-study-tile-whooping-cough.jpg>

                    <div class="case-study-tile__info">

                        <h2 class="case-study-tile__title">Whooping cough vaccination during pregnancy</h2>

                        <ul class="tag-list">

                            <li class="tag-list__item">

                                <span class="tag  tag--planning">

Planning

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--disease-risks-and-causes">

Disease risks and causes

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--diagnosis">

Diagnosis

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--patient-safety">

Patient safety

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--policy">

Policy

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--treatment-and-prevention">

Treatment and prevention

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--individual-care">

Individual care

</span>

                            </li>

                        </ul>

                    </div>

                </a>

            <!-- /li -->

            <li class="grid__item    gutter__item    u-width-1-of-3">

                <a class="case-study-tile" href="#link-to-destination">

                    <img alt="" class="case-study-tile__image" src=../../images/placeholder/case-study-tile-whooping-cough.jpg>

                    <div class="case-study-tile__info">

                        <h2 class="case-study-tile__title">Whooping cough vaccination during pregnancy</h2>

                        <ul class="tag-list">

                            <li class="tag-list__item">

                                <span class="tag  tag--planning">

Planning

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--disease-risks-and-causes">

Disease risks and causes

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--diagnosis">

Diagnosis

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--patient-safety">

Patient safety

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--policy">

Policy

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--treatment-and-prevention">

Treatment and prevention

</span>

                            </li>

                            <li class="tag-list__item">

                                <span class="tag  tag--individual-care">

Individual care

</span>

                            </li>

                        </ul>

                    </div>

                </a>

            <!-- /li -->

        </ul>

    </header>

    <ul class="list-bare">

        <li class="u-display-none-from-x-large">

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

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

                <p class="search-result__description">Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus at semper turpis…</p>

                <ul class="tag-list">

                    <li class="tag-list__item">

                        <span class="tag  tag--planning">

Planning

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--disease-risks-and-causes">

Disease risks and causes

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--diagnosis">

Diagnosis

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--patient-safety">

Patient safety

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--policy">

Policy

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--treatment-and-prevention">

Treatment and prevention

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--individual-care">

Individual care

</span>

                    </li>

                </ul>

            </a>

        </li>

        <li class="u-display-none-from-x-large">

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

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

                <p class="search-result__description">Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus at semper turpis…</p>

                <ul class="tag-list">

                    <li class="tag-list__item">

                        <span class="tag  tag--planning">

Planning

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--disease-risks-and-causes">

Disease risks and causes

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--diagnosis">

Diagnosis

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--patient-safety">

Patient safety

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--policy">

Policy

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--treatment-and-prevention">

Treatment and prevention

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--individual-care">

Individual care

</span>

                    </li>

                </ul>

            </a>

        </li>

        <li>

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

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

                <p class="search-result__description">Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus at semper turpis…</p>

                <ul class="tag-list">

                    <li class="tag-list__item">

                        <span class="tag  tag--planning">

Planning

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--disease-risks-and-causes">

Disease risks and causes

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--diagnosis">

Diagnosis

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--patient-safety">

Patient safety

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--policy">

Policy

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--treatment-and-prevention">

Treatment and prevention

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--individual-care">

Individual care

</span>

                    </li>

                </ul>

            </a>

        </li>

        <li>

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

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

                <p class="search-result__description">Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus at semper turpis…</p>

                <ul class="tag-list">

                    <li class="tag-list__item">

                        <span class="tag  tag--planning">

Planning

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--disease-risks-and-causes">

Disease risks and causes

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--diagnosis">

Diagnosis

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--patient-safety">

Patient safety

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--policy">

Policy

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--treatment-and-prevention">

Treatment and prevention

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--individual-care">

Individual care

</span>

                    </li>

                </ul>

            </a>

        </li>

        <li>

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

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

                <p class="search-result__description">Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus at semper turpis…</p>

                <ul class="tag-list">

                    <li class="tag-list__item">

                        <span class="tag  tag--planning">

Planning

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--disease-risks-and-causes">

Disease risks and causes

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--diagnosis">

Diagnosis

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--patient-safety">

Patient safety

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--policy">

Policy

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--treatment-and-prevention">

Treatment and prevention

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--individual-care">

Individual care

</span>

                    </li>

                </ul>

            </a>

        </li>

        <li>

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

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

                <p class="search-result__description">Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus at semper turpis…</p>

                <ul class="tag-list">

                    <li class="tag-list__item">

                        <span class="tag  tag--planning">

Planning

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--disease-risks-and-causes">

Disease risks and causes

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--diagnosis">

Diagnosis

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--patient-safety">

Patient safety

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--policy">

Policy

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--treatment-and-prevention">

Treatment and prevention

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--individual-care">

Individual care

</span>

                    </li>

                </ul>

            </a>

        </li>

        <li>

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

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

                <p class="search-result__description">Cras quis nulla commodo, aliquam lectus sed, blandit augue. Cras ullamcorper bibendum bibendum. Duis tincidunt urna non pretium porta. Nam condimentum vitae ligula vel ornare. Phasellus at semper turpis…</p>

                <ul class="tag-list">

                    <li class="tag-list__item">

                        <span class="tag  tag--planning">

Planning

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--disease-risks-and-causes">

Disease risks and causes

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--diagnosis">

Diagnosis

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--patient-safety">

Patient safety

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--policy">

Policy

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--treatment-and-prevention">

Treatment and prevention

</span>

                    </li>

                    <li class="tag-list__item">

                        <span class="tag  tag--individual-care">

Individual care

</span>

                    </li>

                </ul>

            </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>

The featured items should be repeated in the main list results (but with the u-display-none-from-x-large class) so that they are still visible on smaller devices.