Banner

The Banner rendering provides a hero-style section with a large background image (or solid color), overlay text, and an optional breadcrumb. It is typically placed at the very top of a page to establish visual identity and page context.

The background can be set to image (CSS background-image with cover sizing), light-gray, off-white, or white via the BackgroundType rendering parameter. When using an image background, the AddImageOverlay checkbox adds a dark gradient overlay for text readability, and UseLightText switches the heading to white.

Two size variants are available: mkl-banner-primary (full hero height) and mkl-banner-secondary (compact). The ShowBreadcrumb parameter optionally renders a breadcrumb trail above the title inside the banner container.

Examples

Example Description

Below are two live Banner renderings demonstrating the primary and secondary size variants:

  1. Primary Banner (Background Image) — Uses BackgroundType=image with a full-bleed background image, dark gradient overlay (AddImageOverlay=1), light text (UseLightText=1), and breadcrumb (ShowBreadcrumb=1). This is the standard hero treatment for top-level landing pages.
  2. Secondary Banner (No Image) — Uses default parameters with no background image. The banner renders at primary height with the page title only. Suitable for interior pages that need a title banner without a hero image.

Banner as the grid - Background Image - Tier 1

Our Services

Usage Notes

Usage Notes

  • The Title datasource field is the banner heading. If left empty, the rendering automatically falls back to the current page’s item name via SitecoreRoute().Name.
  • The BackgroundImage field is only used when BackgroundType is set to image. The image renders as a CSS background-image with background-size:cover and background-position:center.
  • BackgroundType options beyond image include: light-gray (mkl-bg-light-gray-500), off-white (mkl-bg-off-white-500), and white (mkl-bg-white-500). These apply a solid background color class instead of an image.
  • AddImageOverlay adds overlay classes (mkl-bg-overlay-sm-dark mkl-bg-overlay-md-dark mkl-bg-overlay-lg-dark) at all breakpoints. Use this when an image background needs a dark scrim behind the text.
  • UseLightText adds the light-text class to the section, switching text to white. Should be paired with AddImageOverlay or a dark BackgroundType.
  • BannerSize controls height: mkl-banner-primary is the full-height hero with extra top padding on the content row; mkl-banner-secondary is a compact variant with less padding (and no extra padding when breadcrumb is visible).
  • When ShowBreadcrumb=1, a breadcrumb trail is rendered inside the banner container above the title. The breadcrumb uses the same ion-breadcrumb.cshtml partial as the Grid’s ShowBreadcrumb integration.
  • The heading is rendered at the same level as the current heading context (via Enums.HeadingImportance.Same) and is excluded from Table of Contents (data-toc-skip).
  • Place the Banner rendering as the first item in a Grid section placeholder for correct visual stacking above the main content area.

Control Properties

Standard Values / Defaults

The Banner Parameters template ({C916D240-6C6C-4538-BF06-18EC7725AC4C}) __Standard Values defines:

PropertyDefault ValueNotes
BannerSize{8BB2AA6D-...} (mkl-banner-primary)Full-height hero by default.
BackgroundType(empty)No background style applied unless explicitly set.
UseLightText(unchecked)Dark text by default.
AddImageOverlay(unchecked)No overlay by default.
ShowBreadcrumb(unchecked)No breadcrumb by default.
AddClass(empty)No extra CSS classes by default.

Rendering Parameters

ParameterTypeDescription
BackgroundTypeDroplinkSets the background style. Options: image (uses BackgroundImage field), light-gray, off-white, white.
BannerSizeDroplinkControls the banner height. Options: mkl-banner-primary (full hero), mkl-banner-secondary (compact).
UseLightTextCheckboxWhen checked, applies light-text class for white text on dark backgrounds.
AddImageOverlayCheckboxWhen checked, adds a dark gradient overlay on top of the background image for text readability.
ShowBreadcrumbCheckboxWhen checked, renders a breadcrumb navigation above the banner title.
AddClassTextAdditional CSS classes appended to the container element.

Template Properties

FieldTypeDescription
TitleSingle-Line TextThe main heading text displayed in the banner. If left empty, defaults to the page name.
BackgroundImageImageThe hero background image. Used when BackgroundType is set to image. Rendered as a CSS background-image with cover sizing.

Template properties

Control properties