Billboards are large blocks of display text of that typically span the full width of a site’s container. Billboards present text and/or images on a solid color background.
Example
Get started on your new site!
In just a few simple steps, you can begin building your own website.
Design Considerations
Billboard colors are restricted to select WashU brand colors. These include: Red, Yellow, Turquoise, Blue, Dark and Light Grey. A special class of text and buttons are used to enhance readability and avoid accessibility issues. For lighter colors (Light Grey and Yellow), a dark grey text color (#555) is used. For darker colors (Dark Grey, Red, Turquoise, and Blue) a white text color (#fff) is used.
To maintain accessibility standards, buttons for billboards are locked to display only as outline buttons. Billboard buttons have no fill color, a border, and a white or red link color to ensure contrast based on the color of the billboard. Use of red or white, an option which deviates from the web theme’s standard red link color, is used consistently within the billboards for accessibility.
Component Options
The default billboard block contains 3 elements: a heading, paragraph, and button. Other elements, such as a pull quote or an image, can be added inside a billboard. There are also a few options on the back-end that can be changed, such as the background color or the size of the text.
The user has an option to change between a normal text size and a larger text size for paragraph.
Many different background colors can be selected including gray, dark gray, red, turquoise, blue, and yellow.
Headings can change in size like normal (H2, H3, H4, H5), and paragraph text can change between “regular”, “disclaimer”, and “lead”.
Best Practices
- Use billboards to attract attention.
- Billboards typically include a heading, brief description, and a button. However, they are customizable for varied purposes.
- Avoid adding too much into a billboard. They are meant to display concise information.
- The colors for billboards are dark gray, light gray, red, yellow, turquoise, and blue.
- As a general best practice, avoid the display of multiple colored billboards on a page.
Related Components
There are quite a few components that will work within a billboard, these include: