Skip to Content

Billboard

Billboards are used as call outs to highlight specific features of a section. They draw attention by using large images with accompanying content that links off to the highlighted content for more details.

How to Build

Using the backend editor is recommended to build out page components.

  1. Click the Add New Element plus icon to add a component to the page
  2. An Add Element window will appear, choose the Billboard option
  3. The settings dialog box will appear with 3 tabs of options and content to complete:
    • General Tab

      Complete these billboard settings first to construct the desired billboard layout and content options. The selections here will change the fields in the media and content tabs.

      • Billboard Content Type: Defines the type of content that billboard will display; changes content tab options
        • Text with Buttons: used for a description along with 1 or 2 prominent links
        • Text with Link List: used for a description accompanying a longer list of links of less prominence
        • Quote: a prominent quote display
      • Billboard MediaDefines the type of media the billboard will display; changes media tab options
        • Image: a static large image
        • Video: a YouTube video embed
      • Billboard Media Alignment: Defines the position of the media choice on the left or right of the billboard are wide resolutions
      • Billboard Color: The color of the background behind the content choice
      • Subheading (optional): Text which displays above the main heading of the billboard at a smaller size
      • Heading: The primary heading of the billboard, an H2
    • Media Tab

      These options are dependent on the Billboard Media choice in the General tab

      • Image: an single image selection
      • Video: field for a YouTube video embed code alone with all necessary fields for full video accessibility
    • Content Tab

      These options are dependent on the Billboard Content Type choice in the General tab

      • Text with Buttons: a description text field along with up to 2 optional button links
      • Text with Link List: a description text field along with a list of links; modify links by clicking the down arrow and adding Link Text and URL, add additional links to the list by clicking the + icon
      • Quote: a quote field along with quote author and quote author’s title display

     

  4. After all tabs are completed, click Save changes.

Examples

Left Image Billboard Purple, Text with Buttons

Double Button.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Right Image Billboard Purple, Quote Billboard

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum
Dolor sit Amet

Left Video Billboard Blue, Link List Billboard

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Video Caption

Transcript

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Description

Description of Video Along with Audio Description goes here.

Listen to an audio description of this video.

Read the Johns Hopkins University privacy statement here.

Accept