Taxonomies

Dependencies

This layout uses the following framework items as "atoms" to create the full UI.
Uses: Objects:
Grid
Components:
Thumb Section

Using hero cards, imagery and categorisation to provide a set of links to frequently visited article types.
Browse by Category

View All Tags
Browse our news section via a category of your choice.
<section class="o-section">
    <div class="o-wrapper">
        <div class="c-sub-header">
            <div class="c-sub-header__description">
                <div class="c-sub-header__heading">
                    <h2 class="u-heading u-delta">Browse by Category</h2>
                    <a class="c-sub-header__heading-link" href="#all_tags">
                        View All Tags
                        <span aria-hidden="true">→</span>
                    </a>
                </div>
                <p class="c-sub-header__lead">Browse our news section via a category of your choice.</p>
            </div>
        </div>
    </div>
    <div class="o-wrapper o-wrapper--full | u-p-sm">
        <div class="o-grid | u-gap-sm">
            <div class="o-grid__item | u-col-12 u-col-6-@bp1 u-col-4-@bp2 u-col-3-@bp4 u-col-2-@bp5 u-col-1.5-@bp6">
                <a class="c-card c-card--hero" href="#2">
                    <div class="c-card__thumb">
                        <img class="c-card__thumb-img c-img | u-aspect--3x2" src="/assets/img/ds/layouts/articles/taxonomies/whats_new-@x2.webp" alt>
                    </div>
                    <div class="c-card__footer">
                        <span class="| o-split">
                            <span class="u-heading u-size-md | o-split__title">What's New</span>
                            <span class="u-heading u-size-md" aria-hidden="true">→</span>
                        </span>
                    </div>
                </a>
            </div>
            <div class="o-grid__item | u-col-12 u-col-6-@bp1 u-col-4-@bp2 u-col-3-@bp4 u-col-2-@bp5 u-col-1.5-@bp6">
                <a class="c-card c-card--hero" href="#2">
                    <div class="c-card__thumb">
                        <img class="c-card__thumb-img c-img | u-aspect--3x2" src="/assets/img/ds/layouts/articles/taxonomies/sport_cars-@x2.webp" alt>
                    </div>
                    <div class="c-card__footer">
                        <span class="o-split">
                            <span class="u-heading u-size-md | o-split__title">Sports Cars</span>
                            <span class="u-heading u-size-md" aria-hidden="true">→</span>
                        </span>
                    </div>
                </a>
            </div>
            <div class="o-grid__item | u-col-12 u-col-6-@bp1 u-col-4-@bp2 u-col-3-@bp4 u-col-2-@bp5 u-col-1.5-@bp6">
                <a class="c-card c-card--hero" href="#3">
                    <div class="c-card__thumb">
                        <img class="c-card__thumb-img c-img | u-aspect--3x2" src="/assets/img/ds/layouts/articles/taxonomies/electric-@x2.webp" alt>
                    </div>
                    <div class="c-card__footer">
                        <span class="o-split">
                            <span class="u-heading u-size-md | o-split__title">Electric</span>
                            <span class="u-heading u-size-md" aria-hidden="true">→</span>
                        </span>
                    </div>
                </a>
            </div>
            <div class="o-grid__item | u-col-12 u-col-6-@bp1 u-col-4-@bp2 u-col-3-@bp4 u-col-2-@bp5 u-col-1.5-@bp6 u-removed-@bp2 u-block-@bp4">
                <a class="c-card c-card--hero" href="#4">
                    <div class="c-card__thumb">
                        <img class="c-card__thumb-img c-img | u-aspect--3x2" src="/assets/img/ds/layouts/articles/taxonomies/tips_and_advice-@x2.webp" alt>
                    </div>
                    <div class="c-card__footer">
                        <span class="o-split">
                            <span class="u-heading u-size-md | o-split__title">Tips & Advice</span>
                            <span class="u-heading u-size-md" aria-hidden="true">→</span>
                        </span>
                    </div>
                </a>
            </div>
            <div class="o-grid__item | u-col-12 u-col-6-@bp1 u-col-4-@bp2 u-col-3-@bp4 u-col-2-@bp5 u-col-1.5-@bp6 u-removed-<bp5">
                <a class="c-card c-card--hero" href="#4">
                    <div class="c-card__thumb">
                        <img class="c-card__thumb-img c-img | u-aspect--3x2" src="/assets/img/ds/layouts/articles/taxonomies/servicing_and_care-@x2.webp" alt>
                    </div>
                    <div class="c-card__footer">
                        <span class="o-split">
                            <span class="u-heading u-size-md | o-split__title">Servicing & Care</span>
                            <span class="u-heading u-size-md" aria-hidden="true">→</span>
                        </span>
                    </div>
                </a>
            </div>
            <div class="o-grid__item | u-col-12 u-col-6-@bp1 u-col-4-@bp2 u-col-3-@bp4 u-col-2-@bp5 u-col-1.5-@bp6 u-removed-<bp5">
                <a class="c-card c-card--hero" href="#4">
                    <div class="c-card__thumb">
                        <img class="c-card__thumb-img c-img | u-aspect--3x2" src="/assets/img/ds/layouts/articles/taxonomies/formula_1-@x2.webp" alt>
                    </div>
                    <div class="c-card__footer">
                        <span class="o-split">
                            <span class="u-heading u-size-md | o-split__title">Formula 1</span>
                            <span class="u-heading u-size-md" aria-hidden="true">→</span>
                        </span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>