The Image Billboard is designed to engage visitors and set the visual tone for the page. Placed at the top of a page, it prominently displays the page title and can include “breadcrumbs” to help users understand their location within the site. Additionally, it can feature a call-to-action, such as a button or a phone number, encouraging user interaction. This component uses a background image to create a visually appealing and welcoming entry point for the page, enhancing the overall user experience.
This billboard should be used selectively and only with high quality custom imagery. It is not intended nor ideal for use on every page. The main purpose of this billboard is for main service line or department pages. If designing for pages other than this it is recommended using the overlapping or simple billboards instead.
Live Example
This example shows the image billboard component with all possible options. Most of these options can be turned on or off depending on the content, look, and feel of the information the will be included. See the documentation below the example for more information about the options and variations that are available.
Billboard Main Headline
Billboard intro text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Billboard Main Headline
Billboard intro text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Options and Variations
Billboard Contents
The image billboard has many different content fields that can be customized or left out depending on what your needs are. The two fields that are required on every billboard are the breadcrumbs and the main title. All the content fields can be seen in the live preview shown above. The content fields are as follows:
- Breadcrumbs (required)
- Pre-heading
- Main Headline (required)
- Intro Text
- CTA Button
- Phone Number
- Refer a Patient Link
Billboard Main Title Color
One of the big challenges of an image billboard is that it can be difficult to find an image with sufficient contrast to the text which can affect accessibility. In order to prevent this, the main headline has a color block beaching the text to offset it from the image. While the color block behind the headline is required the text in this block can be toggled between black and red depending on your preference.
BILLBOARD TITLE: BLACK
BILLBOARD TITLE: RED
Image Color Overlay
In order to better add contrast to the overlayed text you can also choose from a number of image overlay options. Depending on your photo you can select from either light or dark overlays. In addition to both light and dark overlays you can also choose whether the overlay covers the entire image or just the left or right portion of the image.
Light Image - No Overlay
Light Image - Left White Overlay
Light Image - Full White Overlay
Light Image - Right White Overlay
Dark Image - No Overlay
Dark Image - Left Grey Overlay
Dark Image - Full Grey Overlay
Dark Image - Right Grey Overlay
Content Width
The content width can be adjusted in order to accommodate the image width. For accessibility and readability it is never recommended for the image to stretch behind the banner text. Changing the width of the text contents will keep the banner text legible and accessible.
Note: Changing the content with can drastically change the height of banner and the crop of the image. It is best practice to only change the width if absolutely necessary.
Content Width - 20%
Content Width - 60%
Content Width - 100%
Content Width - 40%
Content Width - 80%
Content Alignment
The text contents in the image billboard can be aligned to the left, right or center of the billboard. The left and right alignment is most commonly used as it allows for images that are weighted to either side of the billboard while the center alignment is ideal for location pages or pages that are more narrative in nature such as news stories or blog posts.
Content Alignment - Left
Content Alignment - Center
Content Alignment - Right
Usage
Do...
- Keep page titles clear, concise, and accurate.
- Leave breadcrumbs enabled to help users trace their navigation path back to broader sections.
- Incorporate calls-to-action that are relevant to encourage user interaction and fulfill their needs quickly.
- Keep any additional text brief and to the point to avoid overwhelming the user and to maintain focus on the primary message.
- Make images with a
4:1aspect ratio - Choose a simple background without excessive detail to avoid competing with the text.
- Ensure the background is weighted to the left or right, providing ample space for text placement.
- Use background colors of the same tone to keep the font easy to read.
Don't...
- Overload the billboard with too much text or multiple calls-to-action.
- Use misleading page titles. Misleading titles can frustrate users and increase bounce rates.
- Vary the design of the billboard drastically from page to page. Consistency in design helps build a coherent brand image and improves usability.
- Place the subject in the center or fill the entire frame with the subject, as this leaves no space for text.
- Use backgrounds with too much detail and color transitions, as they can make text hard to read or cause it to disappear.
- Use image with too much detail; simpler backgrounds make text easier to read.
Accessibility
- The background images in this component are decorative and do not require alt text. No action is required on the part of the editor.
- Use your best judgement when choosing background images and styling combinations. Our goal is for the text to be easy to read, even for the visually impaired.