<st-section>
JSON type: Section
A page band that holds other content: sets the background, the spacing above and below, and the content width, with an optional eyebrow/title/subtitle heading over its slotted children. Use it to give a run of components one dark or tinted backdrop and a consistent vertical rhythm, the way enterprise marketing pages stack full-width sections.
Usage
import '@sankhyatronics/sankhya-cms/section'; // registers <st-section>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
eyebrow | eyebrow | string | '' | |
title | title | string | '' | |
subtitle | subtitle | string | '' | |
background | background | 'default' | 'subtle' | 'dark' | 'accent' | 'transparent' | 'default' | default (page surface), subtle, dark, accent or transparent. |
inverted | inverted | boolean | false | Puts the section on the dark band (--st-cms-band-dark-bg), like background="dark"; the band follows the theme. Same name as on the other components. |
spacingAbove | spacing-above | 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'm' | Space above the content: none, s, m (default), l, xl or xxl. |
spacingBelow | spacing-below | 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'm' | Space below the content: none, s, m (default), l, xl or xxl. |
width | width | 'contained' | 'narrow' | 'full' | 'contained' | contained (default, the page container width), narrow (reading width) or full (edge to edge). |
columns | columns | 1 | 2 | 1 | Columns for the slotted children: 1 (default, stacked) or 2 (two equal columns, stacked again below 720px). |
textAlignment | text-alignment | 'left' | 'center' | 'left' | Alignment of the heading. |
Slots
| Slot | Description |
|---|---|
| (default) | The section's content. |
See the live examples in Storybook.