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.
Content Options
This billboard has breadcrumbs
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
This billboard has a phone number with Spanish option available
This billboard has a CTA button
This billboard has CTA text
Go do the thing
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
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.
Intro text alignment: Center (default)
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.
Intro text alignment: Right
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.
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.