Full width banner - LEEDS.GOV.UK Design System

Back to campaigns

The full width banner:

doesn't have any margin underneath it
needs images in three different sizes (768x432px, 1024x400px and 1600x400px) as the images are swapped when you reduce the browser width
should only be used in the first or last full width web part

Example

HTML Snippet for full width banner

<div class="campaign-banner">

    <picture>
        <source media="(max-width: 768px)" srcset="https://via.placeholder.com/768x432">
        <source media="(max-width: 1024px)" srcset="https://via.placeholder.com/1024x400">
        <source media="(min-width: 1025px)" srcset="https://via.placeholder.com/1600x400">
        <img src="https://via.placeholder.com/1600x400" alt="">
    </picture>

</div>