<st-features-section>
JSON type: FeaturesSection
A titled grid of feature tiles. Tiles come from the items property, from slotted
st-feature-item elements, or both (slotted first). columns sets the grid width (default 2;
one column below 768px). inverted is passed on to the items tiles; slotted tiles need their
own inverted attribute.
The header can carry an eyebrow (a small uppercase label above the title). The title is a
real <h2>; each tile's title is an <h3>. align="center" centres the last, incomplete row:
five tiles in three columns lay out as 3 + 2 centred, instead of 3 + 2 left-aligned.
variant="panel" renders the items tiles as compact panels without icon tiles (see
st-feature-item). A tile from items with span: "full" spans every column. Slotted tiles
need their own variant attribute.
Usage
import '@sankhyatronics/sankhya-cms/features-section'; // registers <st-features-section>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
eyebrow | eyebrow | string | '' | Small uppercase label above the title (e.g. "Why Sankhya"). |
title | title | string | '' | |
subtitle | subtitle | string | '' | |
actionLabel | action-label | string | 'Learn more' | Applied to every tile built from items. |
columns | columns | number | 0 | |
align | align | 'start' | 'center' | 'start' | start (default) lays tiles out in a grid. center centres the last, incomplete row. |
inverted | inverted | boolean | false | |
variant | variant | 'default' | 'panel' | 'default' | default is the icon tile grid; panel gives the items tiles compact panels without icon tiles. |
items | — | FeatureItemData[] | [] | Tiles to render (property only). |
See the live examples in Storybook.