Examples

Examples

The sections below are live Grid renderings on this page, each configured differently to demonstrate common use cases. Scroll down to see each example in context.

Titled Grid

A standard Grid with a visible heading. The Title parameter is set and HideTitleHeading is unchecked, so the heading renders inside the section and automatically becomes a Jump Links target. This is the most common configuration for content sections on a page.

Container-Fluid Grid

A Grid with ContainerFluid enabled. Instead of a fixed-width container, the content stretches edge-to-edge using container-fluid. Useful for hero banners, full-bleed backgrounds, or wide media sections.

Coloured Background Grid

A Grid with Color and Shade set to apply a background colour. This example also uses GridPaddingTop and GridPaddingBottom for vertical spacing. Coloured sections help visually separate content areas and draw attention to key information.

Titled Grid Example

Example Titled Content

This paragraph sits inside a Titled Grid. The Grid’s Title parameter is set to “Titled Grid Example” and the heading is visible. Notice the section heading above — it was automatically generated from the Grid’s Title parameter and is also picked up by Jump Links.

Example Fluid Content

This paragraph sits inside a Container-Fluid Grid. The Grid’s ContainerFluid parameter is enabled, so the content spans the full viewport width. Compare the edges of this text to the titled grid above — this one extends further because it uses container-fluid instead of the default fixed-width container.

Example Coloured Content

This paragraph sits inside a Coloured Background Grid. The Grid’s Color parameter applies a background colour to the entire section. Combined with GridPaddingTop and GridPaddingBottom, the coloured band provides visual separation and emphasis. This is commonly used for call-to-action areas or important notices.

Usage Notes

Notes

  • The Grid renders a <section> element. Each Grid on the page becomes a semantic section in the document outline.
  • When Title is set and HideTitleHeading is unchecked, the section heading is rendered and the section is announced to Jump Links via a data-jumplink attribute. Set HideFromJumpLinks to exclude a titled section from jump-link navigation.
  • When Title is set but HideTitleHeading is checked, the title is applied as an aria-label on the section for accessibility without a visible heading.
  • ContainerFluid switches the inner wrapper from container (max-width constrained) to container-fluid (full viewport width).
  • BackgroundImage sets a CSS background-image on the section with background-size: cover. Use ImagePosition to control the background-position value (defaults to center center).
  • BackgroundVideoLink renders a muted, autoplaying, looping <video> element positioned behind the section content.
  • ShowBreadcrumb injects a breadcrumb trail at the top of the Grid section. Only one Grid per page should enable this.
  • The OverlaySmall, OverlayMedium, and OverlayLarge parameters add responsive overlay classes useful for darkening or lightening background media at different breakpoints.
  • Grids can be nested by placing a SubGrid inside a Grid’s placeholder. The SubGrid adds column sizing and its own heading level while sharing the same bs-section placeholder pattern.

Control Properties

Grid

The Grid is the primary layout component used across all pages. It renders a Bootstrap 5 <section> wrapping a container (or container-fluid) with a row and column structure. Child components are placed inside the Grid’s bs-section placeholder.

The Grid supports titled sections with configurable heading levels that integrate with Jump Links and the Table of Contents, background images and videos with overlay options, section-level colour theming and padding, and optional breadcrumb rendering. Every titled Grid section on a page automatically becomes a jump-link target unless explicitly hidden.

Control Properties

ParameterTypeDescription
TitleSingle-Line TextSets the section heading text. When provided, it is also used for Jump Links and TOC entries.
HeadingSizeDroplinkCSS class controlling the rendered heading size (e.g. h2, h3).
HideTitleHeadingCheckboxWhen checked, the title is applied as an aria-label instead of rendering a visible heading.
TextAlignmentDroplinkHorizontal alignment class for the heading (e.g. text-start, text-center).
HideFromTOCCheckboxExcludes the section from the Table of Contents.
HideFromJumpLinksCheckboxExcludes the section from Jump Links navigation.
TOCTitleSingle-Line TextOverride text used in the Table of Contents instead of the Title value.
ShowBreadcrumbCheckboxRenders a breadcrumb trail at the top of the section.
ContainerFluidCheckboxSwitches the inner wrapper from container to container-fluid.
ColorDroplinkBackground colour applied to the section.
ShadeDroplinkShade variant of the selected colour.
UseLightTextCheckboxApplies light text colour for use on dark backgrounds.
GridPaddingTopDroplinkTop padding class applied to the section.
GridPaddingBottomDroplinkBottom padding class applied to the section.
GridMarginTopDroplinkTop margin class applied to the section.
GridMarginBottomDroplinkBottom margin class applied to the section.
GridGutterXDroplinkHorizontal gutter size between columns.
GridGutterYDroplinkVertical gutter size between rows.
GridHorizontalAlignmentDroplinkHorizontal alignment class for the row (e.g. justify-content-center).
GridVerticalAlignmentDroplinkVertical alignment class for the row (e.g. align-items-center).
GridTextAlignmentDroplinkText alignment class applied to the row.
RowColumnsSmallDroplinkNumber of columns per row at the small breakpoint.
RowColumnsMediumDroplinkNumber of columns per row at the medium breakpoint.
RowColumnsLargeDroplinkNumber of columns per row at the large breakpoint.
GridBorderTopCheckboxAdds a top border to the section.
GridBorderBottomCheckboxAdds a bottom border to the section.
GridBorderLeftCheckboxAdds a left border to the section.
GridBorderRightCheckboxAdds a right border to the section.
BackgroundImageImageBackground image applied via inline CSS background-image.
ImagePositionDroplinkCSS background-position value (defaults to center center).
OverlaySmallDroplinkOverlay class applied at the small breakpoint.
OverlayMediumDroplinkOverlay class applied at the medium breakpoint.
OverlayLargeDroplinkOverlay class applied at the large breakpoint.
BackgroundVideoLinkGeneral LinkURL for a background video (MP4) rendered as a muted, autoplaying, looping video element.
AddClassSingle-Line TextAdditional CSS class(es) appended to the row element.