Accessible and Responsive Web Banners With Call-to-Action Buttons

Full-Width Banner With Logo

Gardening Event

Spring Gardening Workshop

April 15 | USU Botanical Center

Steal This Code:

<div class="jumbotron-fluid jumbotron-full jumbotron-full-image" style="background-image: url('Background Image Dependency Tag'); background-position: center right;" data-height="60vh">
 <div class="jumbotron-content container">
  <div class="row">
   <div class="col-auto">
    <div class="px-4 pb-4 pt-3 shadow bg-t-white">
     <div class="row d-flex">
      <div class="col-md-auto pr-md-2 text-center align-content-center"> <img class="mr-2 mb-2" src="Logo Dependency Tag" alt="logo" width="150" /> </div>
      <div class="col-md ml-md-0 pl-md-0 text-md-left text-center align-content-center">
       <p class="h3 text-blue">Preheading</p>
       <p class="display-5 text-blue h1 mt-2 mb-0 text-bold">Heading</p>
       <p class="h3 mt-0 text-blue my-0">Subheading</p>
       <a class="btn btn-info btn-lg mt-2 mr-2 text-white" href="#">Button Text</a>
     </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
</div>

Eight-Column Banner

Marriage Celebration 2022

Virtual Event • February 11, 2022

Steal This Code:

<div class="row">
  <div class="col-lg-8 align-self-center mb-4 mb-md-0">
    <div class="border">
      <a href="#">
        <img src="Image Dependency Tag" alt="Image Alt Text">
      </a>
      <div class="bg-blue p-3 my-0">
        <div class="row px-xl-0 px-3">
          <div class="col-xl-7 mx-auto pl-xl-0">
            <h2 class="h3 text-xl-left text-bold text-center text-white my-0 ml-xl-4">Event Name</h2>
            <p class="lead text-xl-left text-center text-white my-0 ml-xl-4">Location • Date</p>
          </div>
          <div class="col-xl-5 align-self-center mx-auto pr-xl-0">
            <p class="lead xl text-xl-left text-center my-0 mr-lg-4">
              <a class="btn btn-bright-light btn-lg mx-auto mt-3 btn-block mt-xl-0" href="#"> Button Text </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Horizontal Card With Paragraph Text

Decisions Downstream

February 2022

The choices we make about how to develop water resources have big impacts on river habitats. In Decisions Downstream, watershed scientist Dr. Sarah Null teams up with artists Carsten Meierand Chris Petersonto explore new ways of seeing river habitats. Immerse yourself in beautiful large-scale images created from scientific data, original paintings that capture the transcendent experience of encountering wild fish, and 3D map projections that visualize our water development choices. Decisions Downstream highlights the water development tools and tradeoffs that guide our choices.

View Exhibit Info

Steal This Code:

<div class="mb-4 mb-md-0 border pr-lg-4">
  <div class="row">
    <div class="col-lg-8">
      <a href="#">
        <img src="Image Dependency Tag" alt="Alt Text" width="1574" /></a>
    </div>
    <div class="col-lg-4 align-self-center">
      <div class="p-lg-0 p-3">
        <h3 class="text-bold mt-0">Heading</h3>
        <p class="lead">Subheading</p>
        <p>
          Paragraph Text
        </p>
        <a class="btn btn-bright-light btn-block" href="#">Button Text</a>
      </div>
    </div>
  </div>
</div></div>

Small Banner with Logo and Photo

Looking for 4-H?

Visit the Washington County 4-H Home Page

Let's Go!

Steal This Code:

<div class="row h-bold">
 <div class="col-lg-6">
  <div class="p-3 w-100" style="background: linear-gradient(to bottom, #339966 1%, #2B8257 99%)">
   <div class="row d-flex">
    <div class="col-md-3 col-3 align-self-center"><img src="Image Dependency Tag" alt="Alt Text" class="mx-2" /></div>
    <div class="col-md-5 col-9  pl-3 align-self-center">
     <h2 class="text-white h3">Looking for 4-H?</h2>
     <p class="lead text-white line-height-base">Visit the Washington County 4-H Home Page</p><a href="#" class="btn btn-white" title="Visit Washington County 4-H Home">Let's Go!</a></div>
    <div class="col-md-4 d-none d-md-block align-self-center">
     <a href="#"><img src="Image Dependency Tag" alt="Alt Text"/></a>
    </div>
   </div>
  </div>
 </div>
</div>