Billboard Row

Description

Billboards allow authors to call attention to additional resources in a section by providing a headline, intro, description, links and a button on one side of the content block and a large visual on the other.

This component is designed to be used in the Components content area of the templates.

Adding and Editing

  1. Add a Content block widget to the Components content area
  2. At the bottom of the content block editor, select the HTML option
  3. Copy and paste the code template below into the editor
    <section class="row bg-dark-teal billboard">
      <div class="inner">
        <div class="text">
          <div class="main-text">
            <h2>[title]</h2>
            <p class="intro">[introduction text]</p>
            <p>[description]</p>
            <a href="#" class="btn-blue arrow">[button text]</a>
          </div>
          
          <div class="excerpt-nav">
            <div class="title">Explore:</div>
            <ul>
              <li><a href="#">[link 1]</a></li>
              <li><a href="#">[link 2]</a></li>
              <li><a href="#">[link 3]</a></li>
              <li><a href="#">[link 4]</a></li>
            </ul>
          </div>
        </div>

        <div class="media">
          [image]
        </div>
      </div>
    </section>
  4. To output the reversed version of the billboard, where the image appears on the left instead of the right, use the following code:
    <section class="row bg-dark-teal billboard reverse">
      <div class="inner">
        <div class="text">
          <div class="main-text">
            <h2>[title]</h2>
            <p class="intro">[introduction text]</p>
            <p>[description]</p>
            <a href="#" class="btn-blue arrow">[button text]</a>
          </div>
          
          <div class="excerpt-nav">
            <div class="title">Explore:</div>
            <ul>
              <li><a href="#">[link 1]</a></li>
              <li><a href="#">[link 2]</a></li>
              <li><a href="#">[link 3]</a></li>
              <li><a href="#">[link 4]</a></li>
            </ul>
          </div>
        </div>

        <div class="media">
          [image]
        </div>
      </div>
    </section>
  5. Click the Design option to switch back to the Design editor
  6. Replace/remove the content as necessary

Examples

Section Navigation

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis libero purus. Donec auctor nunc erat, ut porttitor sem hendrerit eget.

In iaculis nibh quis varius finibus. Maecenas tincidunt risus at est egestas, nec cursus magna finibus. Nulla id feugiat odio. Donec luctus condimentum dolor et ultricies. In malesuada mauris in neque condimentum volutpat. Maecenas a blandit orci, quis interdum purus. Etiam sem nisi, venenatis id egestas ut, pretium quis velit. Vivamus viverra sapien diam, et efficitur mi rhoncus quis. Maecenas a urna vel massa tincidunt tincidunt eu eget nisl.

button text
billboard

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis libero purus. Donec auctor nunc erat, ut porttitor sem hendrerit eget.

In iaculis nibh quis varius finibus. Maecenas tincidunt risus at est egestas, nec cursus magna finibus. Nulla id feugiat odio. Donec luctus condimentum dolor et ultricies. In malesuada mauris in neque condimentum volutpat. Maecenas a blandit orci, quis interdum purus. Etiam sem nisi, venenatis id egestas ut, pretium quis velit. Vivamus viverra sapien diam, et efficitur mi rhoncus quis. Maecenas a urna vel massa tincidunt tincidunt eu eget nisl.

button text
billboard
 
 
 
 
 
 
 
 
 
Support the next generation of Claflin Leaders
Your support provides educational enrichment through student schloarships, loan funds, instructional classroom equipment, preparing Claflin's students to be leaders of the future.