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.
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.
Call 801-555-5555 or
Content Options
Foreground Media
Media Type
Image
Media Type
Video
Breadcrumbs
Enable Breadcrumbs
On
Enable Breadcrumbs
Off
Text
This is a Pre Heading
This billboard has a Pre Heading
This billboard has some Intro Text
This is some Intro Text
Phone
This billboard has a Phone Number
Call (801) 555-5555
This billboard has a Phone Number & Spanish option avaible
Call (801) 555-5555 (Español disponible)
Call to Action
CTA type: Button
This billboard has a button CTA
CTA type: Plain Text
This billboard has a plain text CTA
This is a Plain Text CTA
Refer a Patient
Include Refer a Patient Link
On
Include Refer a Patient Link
Off
Layout and Styling Options
Background Options
Background Type: Abstract
Option A (default)
Background Type: Abstract
Option B
Background Type: Abstract
Option C
Background Type: Abstract
Option D
Background Type: Color
Grey
Background Type: Color
Red
Background Type: Color
Gradient
Column Widths
Content Width
2
Content Width
4
Content Width
6 (default)
Content Width
8
Content Width
10
Color
Page Title Color
Black (default)
Page Title Color
Red
Size
Size
X-Small
Size
Small
Size
Medium (default)
Size
Large
Size
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.