Widgets NDT Layout
Page chrome, heroes, navigation aids, and button collections. Index: Widgets.
Shared link fields on several widgets: Link (CMS page) and External link (URL). See Widgets#Shared link fields.
Section hero / promo with multiple layouts. Can stand alone with title, caption, and image, or take child cards, images, accordion panels, or a gallery depending on layout.
When to use: Landing heroes, campaign bands, and multi-card feature sections.
| Field | Options | Notes |
|---|---|---|
| Layout | Stacked (default), Default (side by side), Full width, Cards, Accordion, Gallery, Mosaic, Tiled | Controls structure and which children make sense. |
| Title | Text | Required. |
| Caption | Rich text | Optional supporting copy. |
| Image | Image upload | Optional main image (layout-dependent). |
| Alt text | Text | Alt for the main image. |
| Link text | Text (default “Learn more”) | CTA label when linking. |
| Intro alignment | Text | Optional class such as text-center. |
| Link | CMS page | Optional internal destination. |
| External link | URL text | Optional external destination. |
Children (allowed): Default / News / Event / Featured / People / Media mention / Media mention quoted cards; Banner image; Banner accordion panel; Gallery.
Tips by layout:
| Layout | What to add |
|---|---|
| Stacked | Title/caption/image on the banner itself; optional CTA link. |
| Default (side by side) | Image + copy side by side. |
| Full width | Strong full-bleed image treatment. |
| Cards | Add card children (see Widgets-NDT-Cards). |
| Accordion | Add #Banner accordion panel children. |
| Gallery | Add a [[Widgets-NDT-Media#Gallery |
| Mosaic / Tiled | Image-forward compositions; add #Banner image children as needed. |
Compare treatments on Component Showcase (Widgets).
Image slide/tile for Banner layouts that consume image children (for example mosaic/tiled).
When to use: As a child of Banner when the layout expects multiple images.
| Field | Options | Notes |
|---|---|---|
| Image | Image upload | Required. |
| Alt text | Text | Recommended for accessibility. |
Children: None. Parent: Banner.
Tips: Keep aspect ratios consistent across sibling banner images.
Accordion-style panel used inside Banner (Accordion layout).
When to use: Banner layout = Accordion.
| Field | Options | Notes |
|---|---|---|
| Title | Text | Required panel title. |
| Body | Rich text | Required panel content. |
| Image | Image upload | Optional. |
| Alt text | Text | For the panel image. |
| Open by default | On / off (default off) | Starts expanded. |
Children: None. Parent: Banner.
Tips: This is separate from Widgets-NDT-Content#Accordion in Content — use this only under Banner.
Page title block with optional lede, image, size, and variant.
When to use: Top of a page when the template expects a composed header (not only the CMS page title).
| Field | Options | Notes |
|---|---|---|
| Title | Text | Required. |
| Lede | Long text | Optional introductory paragraph. |
| Image | Image upload | Optional header image. |
| Alt text | Text | For the header image. |
| Title size | Default, Small, Large, Extra large | Title scale. |
| Variant | Default, Inset, Container, Screen, Fade, Mosaic, Tiled | Header composition. |
Children: None.
Tips: Pick Variant to match the page template’s intent (Screen for immersive, Inset/Container for contained titles, Mosaic/Tiled for image grids). Keep a single clear H1-level title — do not duplicate with another Heading 1 in the body.
In-page anchor navigation list.
When to use: Long pages where visitors jump between sections.
| Field | Options | Notes |
|---|---|---|
| Label | Text (default “Anchor”) | Accessible / structural label for the nav. |
Children: Nav anchor item only.
Tips: Pair each item’s link with a real heading id or page URL hash that exists on the page.
One jump link in a Nav anchor.
When to use: Always as a child of Nav anchor.
| Field | Options | Notes |
|---|---|---|
| Text | Text | Required link label. |
| Active | On / off (default off) | Marks the current section. |
| Link | CMS page | Optional. |
| External link | URL text | Often a same-page hash such as #section-id. |
Children: None. Parent: Nav anchor.
Tips: Only one item should be Active for a given scroll position; set Active for the default section if useful.
Pagination control group (static markup of page links).
When to use: Design mockups or manually composed pager UI. It does not automatically page CMS querysets.
| Field | Options | Notes |
|---|---|---|
| (none) | — | Add pagination items as children. |
Children: Pagination item only.
Tips: Wire each item’s Link/External link to real list URLs if you use this on a live listing.
One pager control (page number, current, prev/next, or disabled).
When to use: Always as a child of Pagination.
| Field | Options | Notes |
|---|---|---|
| Label | Text | Required visible label (for example “1”, “Next”). |
| Item type | Page (default), Current page, Disabled, Previous, Next | Role in the pager. |
| Link | CMS page | Optional. |
| External link | URL text | Optional. |
Children: None. Parent: Pagination.
Tips: Use Current page for the active number (usually without a working self-link). Use Disabled for unavailable prev/next.
Horizontal group of button items, optional dividers.
When to use: Segmented choices or related actions in a compact row.
| Field | Options | Notes |
|---|---|---|
| Style | Default, With dividers | Visual separation between items. |
Children: Button item only.
Tips: Keep the number of items small; crowded groups wrap poorly on mobile.
Vertical list of button items with optional size.
When to use: Stacked CTAs or link lists styled as buttons.
| Field | Options | Notes |
|---|---|---|
| Size | Default, Small, Large | Button scale for the list. |
Children: Button item only.
Tips: Prefer Button list for many links; Button group for a short related set.
One button inside a Button group or Button list.
When to use: Child of Button group or Button list only.
| Field | Options | Notes |
|---|---|---|
| Text | Text | Required label. |
| Active | On / off (default off) | Selected/active appearance. |
| Link | CMS page | Optional. |
| External link | URL text | Optional. |
Children: None. Parent: Button group or Button list.
Tips: For a lone button in body copy, use Widgets-NDT-Content#Button instead.
Text button with a trailing/leading icon, optional hover reveal.
When to use: “Learn more”, download, and external actions with a clear icon cue.
| Field | Options | Notes |
|---|---|---|
| Text | Text | Required label. |
| Icon | Arrow right (default), External link, Download, Envelope | Glyph. |
| Alignment | Left (default), Right | Icon side. |
| Reveal on hover | On / off (default on) | Icon interaction. |
| Link | CMS page | Optional. |
| External link | URL text | Optional. |
Children: None.
Tips: Match Icon to the action (Download for files, External link for off-site).
Large lede-style text link/button.
When to use: Soft CTAs under a lede or intro paragraph.
| Field | Options | Notes |
|---|---|---|
| Text | Text | Required label (can be longer than a normal button). |
| Link | CMS page | Optional. |
| External link | URL text | Optional. |
Children: None.
Tips: Keep one lede button per intro; use standard Widgets-NDT-Content#Button for additional actions.