Banners

The default banner consist of text and a action or button.

To make a banner you always need to use the base class .banner. For the single line banner you also need to use the additional class .banner__single-line. For the elements within the banner you need to use the classes .banner__single-line__content and .banner__single-line__actions accordingly.

For desktop a single line banner can also supports multiple actions

    
<div class="banner banner--single-line">
    <div class="banner__content">
        One line text string with one action
    </div>

    <div class="banner__actions">
        <button class="button button--text">
            Action
        </button>

        <button class="button button--text md-down-hide">
            Action
        </button>
    </div>
</div>
    

The multi line banner consists of 2 lines of content and can container multiple actions.

For the multi line banner you need to use the class .banner__multi-line. The content and actions you need to use the same classes as for the single line except it is now multi-line.

    
<div class="banner banner--multi-line">
    <div class="banner__content">
        Two line text string with two actions. One to two <br>lines is preferable on mobile and tablet.
    </div>

    <div class="banner__actions">
        <button class="button button--text">
            Action
        </button>

        <button class="button button--text">
            Action
        </button>
    </div>
</div>
    

Next to the single and multi line there is also an image with multi line banner.

Two line text string with two actions. One to two
lines is preferable on mobile and tablet.

Action Action

    
<div class="banner banner--image-multi-line">
    <div class="banner__image">
        <img src="//via.placeholder.com/40x40" alt="placeholder">
    </div>

    <div class="banner__content">
        Two line text string with two actions. One to two <br>lines is preferable on mobile and tablet.
    </div>

    <div class="banner__actions">
        <button class="button button--text">
            Action
        </button>

        <button class="button button--text">
            Action
        </button>
    </div>
</div>