Overlapping Billboard

The Overlapping Billboard component allows you to display a prominent image alongside key page details, such as breadcrumbs, a pre-heading, page title, intro text, and a call-to-action. Authors can customize features like the page title color, vertical image size, and the alignment of the intro text. This component is ideal when you want to emphasize an engaging image while keeping essential page information clearly separated and accessible.

This is a Pre Heading

Example

This is some Intro Text

Call (801) 555-5555 or

This is a CTA

Content Options

This billboard has breadcrumbs

This is a pre heading

This billboard has a pre-heading

This billboard has intro text

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.

This billboard has a phone number

Call 801-555-5555

This billboard has a phone number with Spanish option available

Call 801-555-5555 (Español disponible)

This billboard has a CTA button

This is a CTA

This billboard has CTA text

Go do the thing

Refer a Patient

This billboard has a physician referral link

Layout and Styling Options

Page Title Color

Page title color: Black (default)

Page title color: Red

Image Size

Image Size: Small

Image Size: Medium (default)

Image Size: Large

Image Size: X-Large

Intro Text Alignment

Intro text alignment: Left

Intro text alignment: Center (default)

Intro text alignment: Right

Usage

Do

Choose images or videos that are high-quality and relevant to the page content to create a strong visual impact.
We encourage leaving breadcrumbs enabled to help users trace their navigation path back to broader sections.
Use concise and meaningful page titles that quickly communicate the purpose of the page.
Use the pre-heading to provide helpful context or framing for the page title.
Keep any additional text brief and to the point to avoid overwhelming the user and to maintain focus on the primary message.
Feature a clear and actionable call-to-action button if driving user interaction is a key goal.
Include contact information only if it is critical for the page’s purpose, like service-related pages.

Don't

Avoid using low-resolution images, as they can make the page look unprofessional.
Steer clear of placing unrelated or generic media that doesn’t align with the page’s message or purpose.
Refrain from using misleading page titles. Misleading titles can frustrate users and increase bounce rates.
Do not overload the billboard with too much text or multiple calls-to-action.
Do not add contact information if it is not relevant to the content or purpose of the page.
Refrain from making the component too tall, as it can push important content below the fold and reduce its visibility.
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.

Accessibility

Ensure that you provide suitable alt text for images. Alt text for images enhances web accessibility by offering a textual description for screen readers used by visually impaired users. See the a11yproject website for more information about writing alt text for images.