Widgets NDT Content
Text, interactive content, and inline UI components from the Notre Dame Web Theme. Prefer these over Bootstrap / frontend plugins. Index: Widgets.
Screenshot refs: 
· 
Shared sticker choices used by Stat and Sticker: Backpack, Chalk board, DNA, Football, Globe, Grad cap, Library, Microscope.
Many linkable widgets also have Link (CMS page) and External link (URL). Internal Link wins when both are set. See Widgets#Shared link fields.
Expandable/collapsible section group.
When to use: FAQs-lite, long policy chunks, or any content where visitors open one panel at a time. For full FAQ chrome (anchors, back to top) use #FAQ.
| Field | Options | Notes |
|---|---|---|
| Size | Default, Small, Large | Overall accordion scale. |
| Style | Default, Highlighted, With background | Visual treatment. |
Children: Accordion item only.
Tips: Keep panel titles short and scannable. Open at most one panel by default unless you have a reason for more.
One panel inside an Accordion.
When to use: Always as a child of Accordion.
| Field | Options | Notes |
|---|---|---|
| Title | Text | Required panel heading. |
| Open by default | On / off (default off) | Starts expanded. |
Children: Allowed (nest other content plugins inside the panel). Parent: Accordion.
Tips: Put the answer or detail content as children of this item, not only in the title.
Callout / alert box with optional heading and body.
When to use: Warnings, tips, success messages, and other highlighted asides.
| Field | Options | Notes |
|---|---|---|
| Variant | Default, Primary, Secondary, Success, Info, Warning, Danger | Semantic color treatment. |
| Heading | Text | Optional. |
| Body | Rich text | Optional. |
Children: None.
Tips: Match Variant to meaning (Warning for caution, Success for confirmation). Do not overuse Danger.
Semantic heading (H1–H6) with optional extra CSS classes.
When to use: Section titles inside a placeholder when you need a real heading level.
| Field | Options | Notes |
|---|---|---|
| Level | Heading 1 … Heading 6 (default Heading 2) | Document outline level. |
| Text | Text | Required heading copy. |
| Css class | Text | Optional extra classes (for example section-title). |
Children: None.
Tips: Prefer one H1 from the page title / page header. Start body sections at Heading 2 or Heading 3.
Blockquote with optional author, citation, image, and layout variants.
When to use: Testimonials, pull quotes, and attributed statements.
| Field | Options | Notes |
|---|---|---|
| Layout | Default, Inline, Stacked | Structure of quote vs attribution. |
| Quote | Rich text | Required quotation. |
| Citation | Text | Optional source line. |
| Author name | Text | Optional. |
| Author title | Text | Optional role. |
| Author image | Image upload | Optional portrait. |
| Size | Small, Medium (default), Large, Extra large | Quote scale. |
| Variant | Default, Primary | Color emphasis. |
| Alignment | Default, Centered, Right, Reversed | Placement / direction. |
Children: None.
Tips: Always attribute when the quote is from a person. Use Reversed when the photo should sit on the opposite side.
Grid container for statistics.
When to use: Impact numbers, enrollment figures, and similar KPI rows.
| Field | Options | Notes |
|---|---|---|
| Columns | 2 columns, 3 columns (default), 4 columns | Grid density. |
Children: Stat only.
Tips: Use 4 columns only when each value is short; long labels wrap awkwardly.
Single statistic inside a Stat list.
When to use: Always as a child of Stat list.
| Field | Options | Notes |
|---|---|---|
| Label | Text | Required description (for example “Students”). |
| Value | Text | Required figure (for example “12,000”). |
| Size | Extra small, Small, Medium (default), Large | Stat scale. |
| Centered | On / off (default off) | Center alignment. |
| Sticker | (empty) or Backpack, Chalk board, DNA, Football, Globe, Grad cap, Library, Microscope | Optional decorative sticker. |
| Sticker size | Default, Small, Large, Extra large | Size when a sticker is set. |
Children: None. Parent: Stat list.
Tips: Keep Value concise; put units in Label or Value consistently across the row.
Tabbed panels for mutually exclusive sections.
When to use: Related content that should not all show at once (for example Undergrad / Grad).
| Field | Options | Notes |
|---|---|---|
| Size | Default, Large | Tab control scale. |
Children: Tab panel only.
Tips: Mark exactly one Tab panel as Active by default. Too many tabs hurt mobile usability.
One tab and its content pane.
When to use: Always as a child of Tabs.
| Field | Options | Notes |
|---|---|---|
| Title | Text | Required tab label. |
| Active by default | On / off (default off) | Initial selected tab. |
Children: Allowed (any content inside the panel). Parent: Tabs.
Tips: Keep tab titles short (one or two words when possible).
Styled list container.
When to use: Steps, feature bullets, inline tag-like lists, and spaced stacks.
| Field | Options | Notes |
|---|---|---|
| List type | Unordered (default), Ordered, Unstyled, Inline, Stepped, Spaced | Visual / semantic list style. |
| Label | Text | Optional label above the list. |
Children: List item only.
Tips: Use Stepped for sequential processes; Ordered for numbered lists without the stepped chrome.
One entry in a List.
When to use: Always as a child of List.
| Field | Options | Notes |
|---|---|---|
| Title | Text | Optional item title. |
| Body | Rich text | Optional supporting copy. |
Children: None. Parent: List.
Tips: Fill Title, Body, or both — empty items still reserve space and look broken.
HTML table body with optional caption and style.
When to use: Comparison data and schedules that need real table markup.
| Field | Options | Notes |
|---|---|---|
| Style | Default, Minimal | Visual density. |
| Caption | Text | Optional table caption. |
| Body | Rich text / HTML | Required. Enter thead/tbody rows only — not an outer <table> wrapper. |
Children: None.
Tips: Build header rows in thead and data in tbody. Preview on a narrow viewport; wide tables may need simpler content.
Vertical timeline of events or milestones.
When to use: History pages, project milestones, roadmaps.
| Field | Options | Notes |
|---|---|---|
| Alignment | Default, Right, Center | Timeline axis alignment. |
Children: Timeline item only.
Tips: Keep chronological order in the structure tree matching the story you want visitors to read.
One milestone on a Timeline.
When to use: Always as a child of Timeline.
| Field | Options | Notes |
|---|---|---|
| Title | Text | Required. |
| Date | Text | Optional display date (free text, for example “March 2024”). |
| Body | Rich text | Optional detail. |
| Image | Image upload | Optional. |
| Image alt | Text | Alt text for the image. |
Children: None. Parent: Timeline.
Tips: Date is display text, not a strict date field — format it consistently across items.
FAQ block with optional on-page anchor nav and back-to-top.
When to use: Long Q&A sets where visitors jump between questions.
| Field | Options | Notes |
|---|---|---|
| Show anchors | On / off (default on) | Show jump list of questions. |
| Anchors id | Text (default faq-list) |
HTML id for the anchor navigation list. |
| Show back to top | On / off (default on) | Back-to-top control. |
Children: FAQ item only.
Tips: Give every FAQ item a unique Item id. Keep Anchors id unique if you place more than one FAQ on a page.
One question and answer.
When to use: Always as a child of FAQ.
| Field | Options | Notes |
|---|---|---|
| Question | Text | Required. |
| Item id | Text | Required anchor id (for example faq_001). |
| Answer | Rich text | Required. |
Children: None. Parent: FAQ.
Tips: Use stable Item ids so shared links keep working after copy edits.
Modal dialog opened by a trigger button.
When to use: Extra detail, person bios, or video embeds that should not dominate the page until requested.
| Field | Options | Notes |
|---|---|---|
| Trigger text | Text (default “Open dialog”) | Button label that opens the dialog. |
| Heading | Text | Required dialog title. |
| Body | Rich text | Required main content. |
| Footer | Long text | Optional footer area. |
| Style | Default, Narrow, Alert, Notification, With person, With video | Layout / purpose variant. |
Children: None.
Tips: Choose Style to match content (With video for media, With person for profiles). Keep Body focused — dialogs are for secondary detail.
Container for footnote entries.
When to use: Academic or reference-heavy pages that need endnotes.
| Field | Options | Notes |
|---|---|---|
| (none) | — | Configuration is per footnote item. |
Children: Footnote item only.
Tips: Place footnotes near the end of the main content placeholder.
One footnote body.
When to use: Always as a child of Footnotes.
| Field | Options | Notes |
|---|---|---|
| Body | Rich text | Required footnote content. |
Children: None. Parent: Footnotes.
Tips: Numbering/presentation follows the theme; keep each note self-contained.
Themed button linking to a page or URL.
When to use: Primary and secondary CTAs in body content.
| Field | Options | Notes |
|---|---|---|
| Text | Text | Required label. |
| Style | Default, Call to action, Secondary, Tertiary, Neutral, More | Visual hierarchy. |
| Link | CMS page | Optional internal destination. |
| External link | URL text | Optional external destination. |
Children: None.
Tips: Use Call to action sparingly (one strong CTA per section). Prefer Link for internal pages.
Author or speaker byline with optional photo and link.
When to use: Article attribution, talk speakers, and quote companions.
| Field | Options | Notes |
|---|---|---|
| Name | Text | Required. |
| Title | Text | Optional role or affiliation. |
| Image | Image upload | Optional portrait. |
| Link | CMS page | Optional profile page. |
| External link | URL text | Optional external profile. |
Children: None.
Tips: For card-embedded bylines on media mentions, use Widgets-NDT-Cards#Card byline instead.
Standalone theme icon.
When to use: Decorative or labeling icons beside short text (use Label for accessibility when the icon conveys meaning).
| Field | Options | Notes |
|---|---|---|
| Icon | Search, Arrow right, External link, Download, Envelope, Clock, Map pin, Facebook, LinkedIn, X/Twitter, Share | Required glyph. |
| Size | Default, Small, Large, Extra large | Icon scale. |
| Label | Text | Optional accessible / visible label. |
Children: None.
Tips: If the icon is the only cue for an action, set Label. For linked icon+text CTAs prefer Widgets-NDT-Layout#Icon button.
Decorative ND sticker illustration.
When to use: Light visual accent on marketing-style sections (also available on Stat).
| Field | Options | Notes |
|---|---|---|
| Sticker | Backpack (default), Chalk board, DNA, Football, Globe, Grad cap, Library, Microscope | Required artwork. |
| Size | Default, Small, Large, Extra large | Scale. |
| Label | Text | Optional accessible label. |
Children: None.
Tips: Stickers are decorative — do not rely on them alone to communicate critical information.
Share controls for the current page (no configuration).
When to use: Story and news templates where visitors should share the URL.
| Field | Options | Notes |
|---|---|---|
| (none) | — | Uses the current page context. |
Children: None.
Tips: Place near the top or end of article content; one instance per page is usually enough.
Button-style control that links to a video destination (page or URL).
When to use: “Watch video” CTAs that deep-link to a video page or external player. For in-page embeds use Widgets-NDT-Media#Video.
| Field | Options | Notes |
|---|---|---|
| Text | Text (default “View video”) | Button label. |
| Style | Default, Minimal, Ornamental, Outline | Visual treatment. |
| Link | CMS page | Optional internal video page. |
| External link | URL text | Optional YouTube/Vimeo or other URL. |
Children: None.
Tips: Pair with clear nearby copy so visitors know what they will watch.