The Foreground Image/Video Billboard component is a versatile tool for creating engaging page headers by placing a prominent image or video alongside the page title. It supports various features like breadcrumbs, pre-headings, intro text, contact information, and call-to-action buttons, allowing authors to present key information effectively. Authors can customize the layout with options for background styles, column width distribution, page title color, and vertical padding. This component is useful for pages that need a visually striking introduction to content, such as landing pages, campaigns, or key information hubs.
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content Options
Foreground Media
Image
Video
Breadcrumbs
On
Off
Text
This billboard has a Pre Heading
This billboard has some Intro Text
This is some Intro Text
Phone
This billboard has a Phone Number
This billboard has a Phone Number & Spanish option avaible
Call to Action
This billboard has a button CTA
This billboard has a plain text CTA
This is a Plain Text CTA
Refer a Patient
On
Off
Layout and Styling Options
Background Options
Option A (default)
Option B
Option C
Option D
Grey
Red
Gradient
Column Widths
2
4
6 (default)
8
10
Color
Black (default)
Red
Size
X-Small
Small
Medium (default)
Large
X-Large
Usage
Do
- Choose images or videos that are high-quality and relevant to the page content to create a strong visual impact.
- Use concise and meaningful page titles that quickly communicate the purpose of the page.
- Select a background style (abstract image or color) that complements the media and content.
- Adjust the column widths to balance the content area and media display for optimal readability.
- Use the pre-heading to provide helpful context or framing for the page title.
- 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 or videos, as they can make the page look unprofessional.
- Refrain from overcrowding the component with too much text or information; keep it focused and clean.
- Steer clear of placing unrelated or generic media that doesn’t align with the page’s message or purpose.
- Avoid setting the column widths unevenly if it results in awkward spacing or poor layout balance.
- 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.
Accessibility
- Ensure that you provide suitable alt text for foreground 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.