Examples
Default Feature
This is an example of the default feature layout with an icon, heading, descriptive text, and a call-to-action link.
Bordered Icon Feature
This is an example of the bordered icon feature variant. The entire card surface is clickable and includes a bordered container with an icon, title, and arrow link.
- The Feature component uses the Beryllium data template, shared with Toast.
- The Type rendering parameter controls the layout variant. The default style displays an icon alongside a heading, text, and CTA link in a horizontal flexbox layout. The
bordered-iconvariant wraps the entire feature in a bordered container with the icon, title, and arrow link as a single clickable surface. - When StretchedLink is enabled (default variant only), the CTA link stretches to make the entire feature block clickable.
- The ImageSize parameter controls the rendered width and height of the icon/image. Default is 48px.
- In Experience Editor, the default variant shows an informational alert reminding authors to set the Link field associated with the Title.
Control Properties
Feature
A highlighted content block designed for marketing callouts with an icon or image, heading, descriptive text, and a prominent call-to-action button. Supports background color and text color customization.
| Parameter | Type | Description |
|---|---|---|
| Type | Droplink | Sets the feature layout variant. Options: default (icon + heading + text + CTA in horizontal flexbox), bordered-icon-feature (bordered container with icon, title, and arrow link as a single clickable surface). |
| ImageSize | Droplink | Sets the rendered width and height of the icon/image in pixels. Default: 48. |
| StretchedLink | Checkbox | When enabled, the CTA link stretches to make the entire feature block clickable (default variant only). Set to 0 to disable. |
| LinkStyle | Droplink | Sets the CTA link style class. Options: btn btn-primary, btn btn-secondary, icon-link (arrow). Default: icon-link. |
| ButtonSize | Droplink | Sets the button size class. Options: btn-lg, btn-sm. Leave empty for default size. |
| HeadingSize | Droplink | Sets the heading element size class for the feature title. |
| BorderColor | Droplink | Sets the Bootstrap border color utility class (e.g., border-primary, border-secondary). |
| TextColor | Droplink | Sets the Bootstrap text color utility class (e.g., text-primary, text-muted). |
| Column classes | Inherited | Small, Medium, Large, Offset column classes for responsive grid layout. |
Template Properties
| Field | Type | Description |
|---|---|---|
| Title | Single-Line Text | The feature heading text displayed alongside the icon. |
| Copy | Rich Text | The descriptive body text displayed below or beside the title. |
| Image | Image | The icon or image displayed to the left of the feature content. Rendered at the size specified by the ImageSize rendering parameter. |
| Link | General Link | The call-to-action link. In the default variant, wraps the title as a clickable heading. In the bordered-icon variant, wraps the entire icon container. Supports internal links, external URLs, media items, and anchors. |