Showcase banner

This pattern is for showcasing informative headlines, statistics, and other positive content with a full width background. A navbox is included to act as a reference link for further reading.

Rules for showcase banners

  • Navboxes must be included on all banners. For rules on appropriate use of navboxes, please see the navbox pattern page.
  • Only the colours from the background colour groups shown in the options can be used.
  • Colours from different background colour groups must not be combined when using sequential banners.
  • Background colours must be in numerical order when using sequential banners.
  • The headline character count must not exceed 100 characters.
  • The paragraph character count must not exceed 300 characters.

CSS classes for approved background colour groups

Dark green

  • sta-dkgreen-1
  • sta-dkgreen-2
  • sta-dkgreen-3

Orange

  • sta-orange-1
  • sta-orange-2
  • sta-orange-3

Purple

  • sta-purple-1
  • sta-purple-2
  • sta-purple-3

Options available


One panel

A single instance of the banner.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.

Code
<!-- Begin pattern: showcase-banner //-->
<section class="showcase-banner sta-orange-1">
    <div class="container">
        <div class="row">
            <div class="col-sm-7 col-sm-push-5 col-md-8 col-md-push-4">
                <h2>Lorem ipsum dolor sit amet</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.</p>
            </div>
            <div class="col-sm-5 col-sm-pull-7 col-md-4 col-md-pull-8">
                <!-- Begin pattern: navbox //-->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="navbox">
                            <div class="navbox__image">
                                <img src="../../assets/docs/images/placeholders/750x500.png" alt="Description">
                            </div>
                            <div class="navbox__title">
                                <a href=""><span>Lorem ipsum dolor sit amet</span></a>
                            </div>
                        </div>
                    </div>
                </div><!-- End pattern: navbox //-->
            </div>
        </div>
    </div>
</section>
<!-- End pattern: showcase-banner //-->

Two panels

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.

Code
<!-- Begin pattern: showcase-banner //-->
<section class="showcase-banner sta-dkgreen-1">
    <div class="container">
        <div class="row">
            <div class="col-sm-7 col-sm-push-5 col-md-8 col-md-push-4">
                <h2>Lorem ipsum dolor sit amet</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.</p>
            </div>
            <div class="col-sm-5 col-sm-pull-7 col-md-4 col-md-pull-8">
                <!-- Begin pattern: navbox //-->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="navbox">
                            <div class="navbox__image">
                                <img src="../../assets/docs/images/placeholders/750x500.png" alt="Description">
                            </div>
                            <div class="navbox__title">
                                <a href=""><span>Lorem ipsum dolor sit amet</span></a>
                            </div>
                        </div>
                    </div>
                </div><!-- End pattern: navbox //-->
            </div>
        </div>
    </div>
</section>
<section class="showcase-banner sta-dkgreen-2">
    <div class="container">
        <div class="row">
            <div class="col-sm-7 col-md-8">
                <h2>Lorem ipsum dolor sit amet</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.</p>
            </div>
            <div class="col-sm-5 col-md-4">
                <!-- Begin pattern: navbox //-->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="navbox">
                            <div class="navbox__image">
                                <img src="../../assets/docs/images/placeholders/750x500.png" alt="Description">
                            </div>
                            <div class="navbox__title">
                                <a href=""><span>Lorem ipsum dolor sit amet</span></a>
                            </div>
                        </div>
                    </div>
                </div><!-- End pattern: navbox //-->
            </div>
        </div>
    </div>
</section>
<!-- End pattern: showcase-banner //-->

Three panels

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.

Code
<!-- Begin pattern: showcase-banner //-->
<section class="showcase-banner sta-purple-1">
    <div class="container">
        <div class="row">
            <div class="col-sm-7 col-sm-push-5 col-md-8 col-md-push-4">
                <h2>Lorem ipsum dolor sit amet</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.</p>
            </div>
            <div class="col-sm-5 col-sm-pull-7 col-md-4 col-md-pull-8">
                <!-- Begin pattern: navbox //-->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="navbox">
                            <div class="navbox__image">
                                <img src="../../assets/docs/images/placeholders/750x500.png" alt="Description">
                            </div>
                            <div class="navbox__title">
                                <a href=""><span>Lorem ipsum dolor sit amet</span></a>
                            </div>
                        </div>
                    </div>
                </div><!-- End pattern: navbox //-->
            </div>
        </div>
    </div>
</section>
<section class="showcase-banner sta-purple-2">
    <div class="container">
        <div class="row">
            <div class="col-sm-7 col-md-8">
                <h2>Lorem ipsum dolor sit amet</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.</p>
            </div>
            <div class="col-sm-5 col-md-4">
                <!-- Begin pattern: navbox //-->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="navbox">
                            <div class="navbox__image">
                                <img src="../../assets/docs/images/placeholders/750x500.png" alt="Description">
                            </div>
                            <div class="navbox__title">
                                <a href=""><span>Lorem ipsum dolor sit amet</span></a>
                            </div>
                        </div>
                    </div>
                </div><!-- End pattern: navbox //-->
            </div>
        </div>
    </div>
</section>
<section class="showcase-banner sta-purple-3">
    <div class="container">
        <div class="row">
            <div class="col-sm-7 col-sm-push-5 col-md-8 col-md-push-4">
                <h2>Lorem ipsum dolor sit amet</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.</p>
            </div>
            <div class="col-sm-5 col-sm-pull-7 col-md-4 col-md-pull-8">
                <!-- Begin pattern: navbox //-->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="navbox">
                            <div class="navbox__image">
                                <img src="../../assets/docs/images/placeholders/750x500.png" alt="Description">
                            </div>
                            <div class="navbox__title">
                                <a href=""><span>Lorem ipsum dolor sit amet</span></a>
                            </div>
                        </div>
                    </div>
                </div><!-- End pattern: navbox //-->
            </div>
        </div>
    </div>
</section>
<!-- End pattern: showcase-banner //-->