Banner: Examples

<p>Backgrounds are <code>img</code> elements not backgrounds, sized with object fit so they can take advantage of srcset if possible. Add an inline style [x/y] of <code>object-position</code> to set the focal point for the image, eg. <code>style="object-position: 70% 20%"</code> for an image with a focal point towards the top right.</p>

<p>Add a class of <code>banner__bg--blurred</code> to the <code>banner__bg</code> to <em>always</em> blur the background - backgrounds will by default be blurred only at small viewport widths.</p>

<div class="grid  grid-2-cols@tablet">
    <div>

        <div class="banner">
            <div class="banner__bg  banner__bg--blurred">
                <img src="https://placeimg.com/1200/400" />
            </div>

            <div class="banner__body">
                <div class="hgroup">
                    <div class="title">
                        <div class="h2  title__highlight">Undergraduate Open Day</div>
                    </div>
                    <div class="title  title--bg-slate">
                        <div class="h4  title__highlight">Saturday 28 March 2020 - Stoke-on-trent campus</div>
                    </div>
                    <div class="title  title--bg-white">
                        <p class="title__highlight">Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
                    </div>
                </div>

                <div class="banner__cta">
                    <a href="" class="button  button--caps">Book an open day - a long button title</a>
                </div>
            </div>
        </div>

    </div>
    <div>
        <div class="banner">
            <div class="banner__bg">
                <img src="https://placeimg.com/1200/400" />
            </div>

            <div class="banner__body">
                <div class="hgroup">
                    <div class="title">
                        <div class="h2  title__highlight">Undergraduate Open Day</div>
                    </div>
                    <div class="title  title--bg-white">
                        <p class="title__highlight">Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
                    </div>
                </div>

                <div class="banner__cta">
                    <a href="" class="button  button--caps">Book an open day</a>
                </div>
            </div>
        </div>
    </div>
</div>

<hr />

<p>Consider reducing the h-size of any titles if placing a banner in a column, place this size on the <code>title__highlight</code>.</p>
<p>If you're only using a very small amount of text, you might not need to always blur the <code>banner__bg</code>. Use judgement and test responsively :)</p>

<div class="grid  grid-3-cols">
    <div>

        <div class="banner">
            <div class="banner__bg  banner__bg--blurred">
                <img src="https://placeimg.com/1200/400" />
            </div>

            <div class="banner__body">
                <div class="hgroup">
                    <div class="title">
                        <div class="h4  title__highlight">Undergraduate Open Day</div>
                    </div>
                    <div class="title  title--bg-slate">
                        <div class="h5  title__highlight">Saturday 28 March 2020 - Stoke-on-trent campus</div>
                    </div>
                    <div class="title  title--bg-white">
                        <p class="title__highlight">Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
                    </div>
                </div>

                <div class="banner__cta">
                    <a href="" class="button  button--caps">Book an open day - a long button title</a>
                </div>
            </div>
        </div>

    </div>
    <div>
        <div class="banner">
            <div class="banner__bg  banner__bg--blurred">
                <img src="https://placeimg.com/1200/400" />
            </div>

            <div class="banner__body">
                <div class="hgroup">
                    <div class="title">
                        <div class="h4  title__highlight">Sport</div>
                    </div>
                    <div class="title  title--bg-white">
                        <p class="title__highlight">Whether you're a competing athlete or a casual enthusiast, our thriving sporting community has something for you.</p>
                    </div>
                </div>

                <div class="banner__cta">
                    <a href="" class="button">Sport opportunities and facilities</a>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="banner">
            <div class="banner__bg">
                <img src="https://placeimg.com/1200/400" />
            </div>

            <div class="banner__body">
                <div class="hgroup">
                    <div class="title">
                        <div class="h4  title__highlight">Undergraduate Open Day</div>
                    </div>
                </div>

                <div class="banner__cta">
                    <a href="" class="button  button--caps">Book an open day</a>
                </div>
            </div>
        </div>
    </div>
</div>