Banner

A Hero Image is a large image with text, often placed at the top of a webpage

Example # Basic

HTML
<div class="bs-banner" role="banner">
    <div class="bs-banner__details">
        <h2>Banner heading</h2>
        <p>Lorem ipsum dolor sit amet</p>
        <div class="bs-banner__action-link">
            <a href="#">Page link 1</a>
            <a href="#">Page link 2</a>
        </div>
    </div>
</div>

Default alignment is vertical center and horizontal left.

Other alignment options: Add data attribute for alignment - <div class="bs-banner" data-valign="top">

horizontal alignment Center data-align="center"
Right data-align="right"
vertical alignment Top data-valign="top"
Bottom data-valign="bottom"

Same options applied for video banner as well

Example # Video banner

HTML
<div class="bs-banner bs-banner--video" data-align="center" role="banner">
    <video playsinline="" data-keepplaying="" autoplay="" muted="" loop="">
        <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4" />
    </video>
    <div class="bs-banner__details">
        <h2>Banner heading</h2>
        <p>Lorem ipsum dolor sit amet</p>
        <div class="bs-banner__action-link">
            <a href="#">Learn more</a>
        </div>
    </div>
</div>