Dealership Cards

Dependencies

This layout uses the following components as "atoms" to create the full UI.

Extends: Components:

Card

Uses: Utilities:

Header

Can Be Used With: Components:

Scroller

Dealership Card

Extending the base card component, the dealership card is styled differently to set them apart from standard cards.

An thumbnail image of Birmingham Audi located in Solihull, West Midlands

Birmingham Audi Solihull, West Midlands

<div class="c-card c-card--dealership | u-max-20-@bp2">
    <a class="c-card__thumb" href="#dealership_1">
        <img class="c-card__thumb-img c-img | o-fit" 
             srcset="/assets/img/ds/layouts/brands/cards/card__dealer.webp, 
                     /assets/img/ds/layouts/brands/cards/card__dealer-@x2.webp 2x" 
             width="" height="" 
             alt="An thumbnail image of Birmingham Audi located in Solihull, West Midlands"
        >
    </a>
    <div class="c-card__head">
        <a class="u-heading u-epsilon u-fw-500 u-mb-xs" href="#dealership_1">Birmingham Audi</a>
        <small class="u-block u-trunc">
            <svg class="c-icon | u-mr-xxs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                <g fill="none" fill-rule="evenodd">
                    <path stroke-width="1.5" d="M8.027 1C5.215 1 3.304 2.508 2.404 4.6c-.892 2.072-.247 4.825 1.34 6.251.979.957 2.416 2.34 4.313 4.149l4.261-4.148c1.623-1.532 2.006-4.14 1.43-6.036C13.17 2.92 10.837 1 8.026 1Z"/>
                    <circle cx="8" cy="7" r="1.75" stroke-width="1.5"/>
                </g>
            </svg>
            Solihull, West Midlands
        </small>
    </div>
    <div class="c-card__body">
        <ul class="c-card-menu">
            <li class="c-card-menu__item">
                <a class="c-card-menu__link" href="tel: 01217465500">
                    <svg class="c-icon | u-mr-xs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                        <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.371 2H2.936C2.31 2 1.8 2.509 1.8 3.136 1.8 9.412 6.888 14.5 13.164 14.5c.627 0 1.136-.509 1.136-1.136v-2.435l-2.679-1.786-1.389 1.389a.775.775 0 0 1-.904.16 9.563 9.563 0 0 1-2.17-1.55 7.522 7.522 0 0 1-1.584-2.19c-.138-.294-.058-.632.171-.862l1.412-1.41L5.371 2Z"/>
                    </svg>
                    01217 465 500
                </a>
            </li>
            <li class="c-card-menu__item">
                <a class="c-card-menu__link" href="#dealership_1/#directions">
                    <svg class="c-icon | u-mr-xs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                        <g fill="none" fill-rule="evenodd">
                            <path stroke-linecap="round" stroke-width="1.5" d="M3 13V7h9.5"/>
                            <path stroke-linecap="round" stroke-width="1.5" d="m9.5 3 4 4-4 4"/>
                        </g>
                    </svg>
                    Get Directions
                </a>
            </li>
            <li class="c-card-menu__item">
                <a class="c-card-menu__link" href="mailto:birmingam.audi@listers.co.uk">
                    <svg class="c-icon | u-mr-xs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                        <g fill="none" fill-rule="evenodd">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 4.615v7.539c0 .892-.723 1.615-1.615 1.615H2.615A1.615 1.615 0 0 1 1 12.154V4.615m14 0C15 3.723 14.277 3 13.385 3H2.615C1.723 3 1 3.723 1 4.615m14 0v.175c0 .56-.29 1.081-.768 1.375L8.847 9.48c-.52.32-1.175.32-1.694 0L1.768 6.166A1.616 1.616 0 0 1 1 4.791v-.176"/>
                        </g>
                    </svg>
                    Email
                </a>
            </li>
        </ul>
    </div>
</div>

Dealership Scroller

Dealership Cards can be used inside the scroller component to create a horizontal scrollable card interface.

Audi Birmingham Solihull, West Midlands
Audi Coventry West Midlands
Audi Stratford Stratford-upon-Avon, Warwickshire
Audi Worcester Worcestershire
BMW Boston Lincolnshire
BMW King's Lynn Norfolk
CUPRA Coventry West Midlands
CUPRA Worcester Worcestershire
Honda Northampton Northamptonshire
Honda Solihull West Midlands
Honda Stratford Warwickshire
Jaguar Droitwich Worcestershire
Jaguar Solihull West Midlands
Land Rover Droitwich Worcestershire
Land Rover Hereford Herefordshire
Land Rover Solihull West Midlands
Lexus Cheltenham Gloucestershire
Lexus Coventry West Midlands
Lexus Lincoln Lincolnshire
Mercedes Benz Boston Lincolnshire
Mercedes Benz Grimsby North East Lincolnshire
Mercedes Benz Hull East Yorkshire
Mercedes Benz Lincoln Lincolnshire
MINI Boston Lincolnshire
MINI King's Lynn Norfolk
OMODA Solihull West Midlands
OMODA Lincoln Lincolnshire
Porsche Centre Hull East Yorkshire
SEAT Coventry West Midlands
SEAT Worcester Worcestershire
ŠKODA Coventry West Midlands
Service Centre Banbury Oxfordshire
smart Hull East Yorkshire
smart Lincoln Lincolnshire
Toyota Boston Lincolnshire
Toyota Cheltenham Gloucestershire
Toyota Coventry West Midlands
Toyota Grantham Lincolnshire
Toyota Lincoln Lincolnshire
Toyota Nuneaton Warwickshire
Toyota Stratford upon Avon Warwickshire
Volkswagen Coventry West Midlands
Volkswagen Evesham Worcestershire
Volkswagen Leamington Spa Warwickshire
Volkswagen Loughborough Leicestershire
Volkswagen Nuneaton Warwickshire
Volkswagen Stratford upon Avon Warwickshire
Volkswagen Worcester Worcestershire
Volkswagen Banbury Oxfordshire
VW Van Centre Coventry West Midlands
VW Van Centre Worcestershire Droitwich, Worcestershire
VW Van Centre Stratford Warwickshire
Volvo Worcester Herefordshire

<div class="c-scroller">
    <ul class="c-scroller__list">
        <li class="c-scroller__item">
            <div class="c-card c-card--dealership">
                <a class="c-card__thumb" href="#">
                    <img class="c-card__thumb-img c-img | o-fit" 
                        srcset="/path-to-img.webp" 
                        width="300" height="200"
                        alt
                    >
                </a>
                <div class="c-card__head">
                    <a class="u-heading u-epsilon u-fw-500 u-mb-xs" href="#">
                        <span class="u-trunc">Dealer Name</span>
                    </a>
                    <small class="u-block u-trunc">
                        <svg class="c-icon | u-mr-xxs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                            <g fill="none" fill-rule="evenodd">
                                <path stroke-width="1.5" d="M8.027 1C5.215 1 3.304 2.508 2.404 4.6c-.892 2.072-.247 4.825 1.34 6.251.979.957 2.416 2.34 4.313 4.149l4.261-4.148c1.623-1.532 2.006-4.14 1.43-6.036C13.17 2.92 10.837 1 8.026 1Z"/>
                                <circle cx="8" cy="7" r="1.75" stroke-width="1.5"/>
                            </g>
                        </svg>
                        Dealer Location
                    </small>
                </div>
                <div class="c-card__body">
                    <ul class="c-card-menu">
                        <li class="c-card-menu__item">
                            <a class="c-card-menu__link" href="tel: 01217465500">
                                <svg class="c-icon | u-mr-xs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                                    <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.371 2H2.936C2.31 2 1.8 2.509 1.8 3.136 1.8 9.412 6.888 14.5 13.164 14.5c.627 0 1.136-.509 1.136-1.136v-2.435l-2.679-1.786-1.389 1.389a.775.775 0 0 1-.904.16 9.563 9.563 0 0 1-2.17-1.55 7.522 7.522 0 0 1-1.584-2.19c-.138-.294-.058-.632.171-.862l1.412-1.41L5.371 2Z"/>
                                </svg>
                                Telephone
                            </a>
                        </li>
                        <li class="c-card-menu__item">
                            <a class="c-card-menu__link" href="#directions">
                                <svg class="c-icon | u-mr-xs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                                    <g fill="none" fill-rule="evenodd">
                                        <path stroke-linecap="round" stroke-width="1.5" d="M3 13V7h9.5"/>
                                        <path stroke-linecap="round" stroke-width="1.5" d="m9.5 3 4 4-4 4"/>
                                    </g>
                                </svg>
                                Get Directions
                            </a>
                        </li>
                        <li class="c-card-menu__item">
                            <a class="c-card-menu__link" href="mailto:dealer@listers.co.uk">
                                <svg class="c-icon | u-mr-xs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                                    <g fill="none" fill-rule="evenodd">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 4.615v7.539c0 .892-.723 1.615-1.615 1.615H2.615A1.615 1.615 0 0 1 1 12.154V4.615m14 0C15 3.723 14.277 3 13.385 3H2.615C1.723 3 1 3.723 1 4.615m14 0v.175c0 .56-.29 1.081-.768 1.375L8.847 9.48c-.52.32-1.175.32-1.694 0L1.768 6.166A1.616 1.616 0 0 1 1 4.791v-.176"/>
                                    </g>
                                </svg>
                                Email
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="c-scroller__item">
            ...
        </li>
        ...
    </ul>
</div>