Image Section
Renders a full-width image section spanning the content area. Supports responsive image sources, alt text, and optional caption. Used for visual breaks between content sections or standalone image presentations.
The examples below demonstrate the Image Section rendering in three configurations: a default layout (image right, content left rendered inline), a reversed layout with ShowContentLeft=1 (image left, content right), and a placeholder-based layout with RenderPlaceholder=1 (content area uses a nested placeholder instead of the datasource fields).
US and Bermuda offerings
From simple to complex, we understand the risks you face - that's our specialty.Content left
Check the "Show content on the left" option to render content over here.Usage Notes
- The Image Section renders a two-column layout: one column for a background image and the other for text/content. The image is applied as a CSS
background-imagewith cover sizing and customizable position via theImagePositionparameter. - When
RenderPlaceholderis unchecked (default), the content column renders the datasource’s Title, Subtitle, Copy, and Link fields using the sharedhe-paragraphpartial view. - When
RenderPlaceholderis checked, the content column instead renders abs-sectionplaceholder, allowing arbitrary child components to be nested inside the content area. ShowContentLeftreverses the visual order so the content column appears first (left on desktop) and the image column appears second. By default, the image column is on the left.- The
ContainerFluidparameter (default: checked) makes the section span edge-to-edge. Uncheck for a contained-width layout. - The datasource is based on the Lithium template (
Feature/BSTools5/Components/Lithium), which includes fields for Title, Subtitle, Copy, Image, and Link. - All standard grid section parameters (Color, Shade, UseLightText, GridPadding, GridBorder, etc.) are inherited and can be used to style the outer section container.
- The image column is responsive:
col-12 col-lg-6, so on mobile it stacks vertically above the content.
Control Properties
Standard Values / Defaults
| Parameter | Default Value |
|---|---|
| ContainerFluid | Checked (1) |
| GridPaddingTop | (empty) |
| GridPaddingBottom | (empty) |
| ShowContentLeft | (unchecked) |
| RenderPlaceholder | (unchecked) |
Rendering Parameters
| Parameter | Type | Description |
|---|---|---|
| ShowContentLeft | Checkbox | Reverses column order so the content appears on the left and the image on the right (on large screens). |
| RenderPlaceholder | Checkbox | When checked, the content column renders a nested bs-section placeholder instead of using the datasource’s text fields. |
| ContainerFluid | Checkbox | Makes the section span the full viewport width (edge-to-edge). Uncheck for a contained-width layout. |
| HeadingSize | Droplink (dictionary) | Sets the heading size class applied to the title (e.g., h1–h6). |
| HideTitleHeading | Checkbox | When checked, renders the title as plain text rather than a heading element. |
| ImagePosition | Droplink (dictionary) | Controls the CSS background-position of the image (e.g., center-center, top-left). |
| Color | Droplink (dictionary) | Background color of the outer section container. |
| Shade | Droplink (dictionary) | Shade variant of the background color. |
| UseLightText | Checkbox | Applies light-colored text styling for use on dark backgrounds. |
| GridPaddingTop / GridPaddingBottom | Droplink | Vertical padding on the section. |
| GridBorderBottom / GridBorderTop / GridBorderLeft / GridBorderRight | Checkbox | Adds borders to the specified edges of the section. |
| Title | Single-Line Text | Override title rendered in the section header (if different from datasource). |
| TOCTitle / HideFromTOC | Text / Checkbox | Controls table-of-contents integration. |
Template Properties
The Image Section datasource uses the Lithium template (Feature/BSTools5/Components/Lithium).
| Field | Type | Description |
|---|---|---|
| Title | Single-Line Text | Main heading displayed in the content column. |
| Subtitle | Single-Line Text | Secondary heading below the title. |
| Copy | Rich Text | Body text/HTML content rendered below the subtitle. |
| Image | Image | The background image displayed in the image column. Applied via CSS background-image with cover sizing. |
| Link | General Link | Optional call-to-action link rendered below the copy text. |
Note: When RenderPlaceholder=1 is set, the Title, Subtitle, Copy, and Link fields are not rendered. Only the Image field is used for the background, and the content area is populated by child components placed in the bs-section placeholder.