Get boba!
boba Version 1.7.2

Banners

Banners help to divide content within a section in a bold way.

Tip

Banners will always expand to the full width of their parent.

<div class="banner">
    <div class="banner-header">
        <h5>Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header">Title</h1>
            <h2 class="subheader">Subheader</h2>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>

Sizes

Banners can be resized.
<div class="banner large">
    <div class="banner-header">
        <h5>Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header">Large Banner</h1>
            <h2 class="subheader">Subheader</h2>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>
<div class="banner medium">
    <div class="banner-header">
        <h5>Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header">Medium Banner</h1>
            <h2 class="subheader">Subheader</h2>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>
<div class="banner">
    <div class="banner-header">
        <h5>Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header">Default Banner</h1>
            <h2 class="subheader">Subheader</h2>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>
<div class="banner small">
    <div class="banner-header">
        <h5>Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header">Small Banner</h1>
            <h2 class="subheader">Subheader</h2>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>
<div class="banner fullscreen">
    <div class="banner-header">
        <h5>Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header">Fullscreen Banner</h1>
            <h2 class="subheader">Subheader</h2>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>

Alignment

Align banner text using the .text-left, .text-right, and .text-center classes.
<div class="banner">
    <div class="banner-header text-right">
        <h5>Text-Right</h5>
    </div>

    <div class="banner-body text-center">
        <div class="container">
            <h1 class="header">Text-Center</h1>
        </div>
    </div>

    <div class="banner-footer text-left">
        <h5>Text-Left</h5>
    </div>
</div>

Colors

Change the background color of your banner using boba's refreshing color palette.
<div class="banner bg-red">
    <div class="banner-header">
        <h5 class="text-white">Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header text-white">bg-red</h1>
        </div>
    </div>

    <div class="banner-footer">
        <h5 class="text-white">Banner Footer</h5>
    </div>
</div>
<div class="banner bg-green">
    <div class="banner-header">
        <h5 class="text-white">Banner Header</h5>
    </div>

    <div class="banner-body">
        <div class="container">
            <h1 class="header text-white">bg-green</h1>
        </div>
    </div>

    <div class="banner-footer">
        <h5>Banner Footer</h5>
    </div>
</div>
<div class="banner bg-blue">
    <div class="banner-header">
        <h5 class="text-white">Banner Header</h5>
    </div>

  <div class="banner-body">
        <div class="container">
            <h1 class="header text-white">bg-blue</h1>
        </div>
  </div>

    <div class="banner-footer">
        <h5 class="text-white">Banner Footer</h5>
    </div>
</div>