Image Billboard

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 is a Pre Heading

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Call 801-555-5555 or

This is a CTA button

Refer a Patient

Content Options

This billboard has breadcrumbs

This is a pre heading

This billboard has a pre-heading

This billboard has intro text

This billboard has a phone number

Call 801-555-5555

This billboard has a CTA button

This is a CTA

This billboard has CTA text

Go do the thing

This billboard has a physician referral link

Refer a Patient

Layout and Styling Options

Page Title Color Options

Page Title Color: Black

Page Title Color: Red

Page Title Color: Inverted

Overlay Options

Overlay: Light

Overlay: Light gradient - right to left

Overlay: Light gradient - left to right

Overlay: Dark

Overlay: Dark gradient - right to left

Overlay: Dark gradient - left to right

Content Width

Content Width: 20%

Content Width: 40%

Content Width: 60%

Content Width: 80%

Content Width: 100%

Alignment

Text Alignment: Left

Text Alignment: Center

Text Alignment: Right

Usage

Do

Keep page titles clear, concise, and accurate.
We encourage leaving 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.
Prefer images with a 4:1 aspect 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

Do not overload the billboard with too much text or multiple calls-to-action.
Refrain from using misleading page titles. Misleading titles can frustrate users and increase bounce rates.
Do not vary the design of the billboard drastically from page to page. Consistency in design helps build a coherent brand image and improves usability.
Do not place the subject in the center or fill the entire frame with the subject, as this leaves no space for text.
Avoid using backgrounds with too much detail and color transitions, as they can make text hard to read or cause it to disappear.
Refrain from choosing cluttered backgrounds; 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.