Content Components
Choosing Components
Get help choosing
Use the Site Builder GPT for additional support in choosing the right content components when building a page.
Overview
Many Site Builder page types let you choose which components to include and how to arrange them. Selecting the right component helps you present your content clearly, consistently, and effectively.
Use this guide to identify which Site Builder component best fits your content’s purpose and structure, and learn how to combine components to create engaging, accessible pages.
| If you need to... | Use this component ↓ | Notes |
|---|---|---|
| Display expandable FAQs or optional info | Accordion | Use to organize detailed or secondary content (like FAQs, definitions, or policies) in collapsible sections |
| Embed an audio clip (e.g., interview, podcast) | Audio | Supports accessible audio with captions and transcripts using AblePlayer |
| Highlight an announcement, promotion, or campaign | Billboard | Visual content block with title, teaser, image, and call-to-action links—best for prominent messages |
| Draw attention to an important single message or action | Callout | Bold, attention-grabbing content block for urgent or high-impact messages |
| Present a browsable set of items as visual cards (e.g., topics, programs, people, articles) | Card Grid | Use for scannable collections with images, titles, and short summaries |
| Embed custom HTML/CSS/JS or integrations | Code | For embedding working code or third-party widgets—use cautiously to maintain accessibility, security, and performance |
| Display example code (non-executable) | Code Snippet | Best for tutorials or developer documentation—supports syntax highlighting and copy-to-clipboard |
| Show dynamic news or events from LiveWhale | Feed | Automatically updates news and events; ideal for dynamic or repeating content |
| Introduce a page with a banner and calls to action | Hero (Default, Feature, Split, or Statement) | Page-level intro with title, teaser, banner image, and callout card |
| Display one or more images with captions | Image | Supports both single and multi-image (hub) layouts; always use descriptive alt text |
| Present a stylized list of related links | List Hub | For resource or link collections (manual or shared) |
| Highlight a short tip, warning, or reminder | Note | Use for brief asides that complement nearby content without interrupting page flow |
| Feature a short, styled testimonial or quote | Quote | Displays pull quotes or testimonials with optional source and avatar |
| Add general-purpose formatted text | Rich Text | Flexible text block for paragraphs, lists, and headings—the default "text" section |
| Show key statistics or metrics | Stats | Displays bold numbers with labels and optional stickers—great for "at-a-glance" metrics |
| Present structured data in rows and columns | Table | For small datasets, comparisons, or schedules |
| Present a longer mission, vision, or editorial-style statement on an index page | Text Essay | Best for prominent, narrative content on section pages; supports a title, optional supporting text, and up to two calls to action |
| Display a step-by-step process or timeline of events | Timeline | For workflows, application processes, or project milestones |
| Embed a video (YouTube, Vimeo, Kaltura, HTML5) | Video | Uses AblePlayer for accessible playback; supports captions, transcripts, and described versions |