Home > Design Guide > Story Banner Variations
Your internet browser isn't supported.
STORY BANNER VARIATIONS
This component can use looping videos or images. Images should be sized at least 1920px wide (ideally 2800×1576px for Retina). Story Banner height is flexible (small, medium, large; ~400–800px), and images will be cropped top and bottom based on the selected height.
Available Configurations
- Top Image (optional): Icon or logo with optional alt text and caption. SVGs are recommended.
- Title (optional): Supports H1–H6 styles.
- Subtitle (optional): H5 style; can be placed above or below the title.
- Description (optional): Supports links and basic formatting (bold, italic, underline).
- Call to Action (optional): Up to 2 CTAs (links or buttons in primary, secondary, or tertiary styles).
- Background Image: Includes alt text and adjustable focal positioning, with optional mobile-specific positioning.
- Mobile Background Image (optional): Alternate image for mobile devices.
- Background Video (optional): Scene7 video with autoplay and/or looping. (Note: Video is disabled on mobile—include a fallback background image.)
Styling Options
- Content alignment: left or center
- Banner height: small, medium, or large
- Gradient overlay: light or dark at 50% or 80% intensity. Gradient positioning adjusts based on text alignment (e.g., center-aligned content applies a bottom-to-top gradient)
- Banners can extend the full width of the screen or default width in line with the navigation.
Story banners with images + white text + no gradient
Title (H1)
Subtitle
Discover the latest products, innovations, and updates shaping the future of lighting. This is a link in the description.
Title (H2)
Subtitle
Discover the latest products, innovations, and updates shaping the future of lighting. This is a link in the description.
Title (H3)
Subtitle
Discover the latest products, innovations, and updates shaping the future of lighting. This is a link in the description.
Story banners with images + white text + dark gradient
Title (H1)
Subtitle
Discover the latest products, innovations, and updates shaping the future of lighting. This is a link in the description.
Story banners with images + black text + light gradient
Title (H1)
Subtitle
Discover the latest products, innovations, and updates shaping the future of lighting. This is a link in the description.
Title (H2)
Subtitle
Discover the latest products, innovations, and updates shaping the future of lighting. This is a link in the description.
Title (H3)
Subtitle
Discover the latest products, innovations, and updates shaping the future of lighting. This is a link in the description.
Large height banner + image background, no text/CTAs
Additional variations
Medium height banner centered + logo:
Distinguished Architectural Linear Solutions
Distinguished Architectural Linear Solutions
Small height banner with looping video background, no text/CTAs:
Small height banner, left aligned + small title + 2 CTAs:
Story Banner in Columns:
