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