ComponentIndex

Site-wide header with logo, primary links, and a utility CTA. Also called Header or Primary Navigation.

Expanded multi-column dropdown inside Top Navigation. A child of the header, never a standalone page component.

Site-wide footer with link columns, legal line, and social icons. One instance, edited in Site Settings.

Regional consent banner with accept, reject, and preferences. Fires once per session or until dismissed.

Thin dismissible strip above the header for launches, offers, or service notices. Also called Site Alert.

Secondary strip for language switcher, search, and login. Sits above or inside Top Navigation.

Accessibility requirement. Visually hidden until focused, jumps keyboard users past the navigation.

Media on the left, headline and CTA on the right. Layout variant of the single Hero component.

Mirror of Image Left. Same component, the layout dropdown flips the media position.

Edge-to-edge background image with overlaid text and CTA. Common on campaign landing pages.

Text-only centred hero with no media. Ideal for editorial or content-first pages.

Looping muted background video with overlay text. Always set a poster image for slow connections.

Half solid colour block, half media, meeting at the centre. A layout variant, not a new component.

Rotating hero slides with pagination. Use sparingly, as engagement with slides beyond the first is very low.

Hero containing a prominent search or lookup field. Standard on property, travel, and directory sites.

Compact internal page banner with title and breadcrumb. Much shorter than a homepage hero.

Hero with a countdown or urgency element. A genuinely separate component because the content structure differs.

Automatic trail showing page position in the hierarchy. Rarely author-editable, but always documented.

Sticky jump links generated from the headings on the page. Also called Table of Contents or Anchor Nav.

Vertical section navigation for deep content trees. Highlights the current page and expands its parent.

Full nested link list of the site tree. Useful for footers and accessibility compliance pages.

Locale selector, usually in the utility bar. Critical for multilingual and RTL sites.

Keyword input with optional scope selector. Submits to the Search Results template.

Typeahead dropdown under the search input. Grouped by type and keyboard navigable. A child of Search Form.

Full-screen search panel triggered from the header. Holds Search Form plus recent and popular queries.

Result type switcher such as All, Pages, News, Documents, with counts. Sits above Search Results.

Keyword results with counts, snippets, and highlighted matches. Include a zero-results state.

Zero-result message with spelling help, relaxed suggestions, and a route out. The most neglected screen in any build.

Horizontal facet controls belonging to a listing. Shares its filter model with Filter Sidebar.

Vertical faceted filters in a rail beside the results. Collapses into a drawer on mobile.

Removable summary of active filters plus a clear-all action. Essential for making filter state visible.

Result ordering dropdown such as relevance, newest, or price. Never a separate listing component.

Switches results between keyword and generated answer. A variant of Search Scope Tabs, not a component in its own right.

Generated summary with inline citations, sources, and feedback controls. A genuinely new component: it has fields nothing else in the library has.

The skeleton shown while an answer streams in. Needs a cancel route and a polite live region, so it is a component, not a spinner.

Numbered, attributable sources under a generated answer. A child of AI Answer, and the part that makes it trustworthy.

Suggested next questions after an answer. A child of AI Answer. Authors usually cannot edit these, which is worth documenting.

States plainly that text was generated and may be wrong. Increasingly a regulatory requirement, not a nicety.

Short generated precis at the head of a long article. Call it Summary or Key Points, not the model that wrote it.

Docked conversational panel, not a page component. Name it for what the reader does with it, such as Ask or Help.

Single column of text with headings, links, and lists. The most used block on any site.

Two columns of rich text side by side with no media. Good for long-form comparison content.

Three narrow text columns. Set as a column count option rather than a separate component.

Image and text side by side. Layout dropdown for image left or right, plus optional CTA.

Video and text side by side. Shares the same layout dropdown as Text and Image.

Main content column with a narrower supporting rail for notes, links, or downloads.

Large pull quote with optional attribution and role. One quote per instance.

Short highlighted block with a background fill. Used for tips, warnings, and inline promotions.

Row of icon plus short text pairs. Often used for feature summaries or value propositions.

Vertical list of features with icons or ticks. A structured alternative to a bulleted Rich Text list.

Row of large numbers with short labels, sometimes animated on scroll. Also called Key Figures.

Structured tabular data with a header row. Must scroll horizontally on mobile rather than reflow.

Monospaced code sample with optional syntax highlighting and a copy button.

Term and description pairs. Well suited to glossaries, specifications, and FAQ summaries.

Single oversized figure with supporting caption. Used as a visual break in long articles.

Two cards per row. Column count is a dropdown on the parent Card Grid, not a separate component.

Three cards per row. The most common layout for feature, service, and content grids.

Four cards per row using a compact card style. Suits icon features and dense listings.

Default card style with image above the text. The baseline all other card styles vary from.

Card with an icon instead of an image. Good for services and features with no photography.

Card with no media at all. Relies on the heading and a strong link for hierarchy.

Image left, text right. Set as a Card Style option on the grid rather than its own component.

Text sits on top of the image with a gradient scrim. Watch contrast ratios carefully.

Card bound to article data. Shows date, category, title, and excerpt automatically.

Card bound to event data with a prominent date block and location line.

Card bound to product data with price, badge, and add-to-cart action.

Card bound to a person record. Portrait, name, role, and optional contact links.

Tiered plan card with price, feature list, and CTA. Usually one highlighted as recommended.

Minimal card that is entirely a link. Title plus arrow, no body copy. Also called Teaser.

Single image with required alt text and optional caption. Size and ratio are dropdown options.

Embedded or self-hosted video with a poster image. Autoplay, loop, and mute are toggles.

Multiple images in grid or carousel layout. Layout choice is a dropdown on the component.

Staggered gallery preserving each image ratio. Heavier to render, so lazy load aggressively.

Horizontally sliding set of media or cards with prev and next controls.

Row of client or partner logos, usually greyscale. Optional heading above the row.

Draggable divider comparing two images. Popular in construction, medical, and design work.

Interactive markers pinned to an image, each opening a tooltip. Common on product diagrams.

Inline audio or podcast player with transcript link. Always provide a text transcript.

Generic third-party iframe for maps, forms, calculators, or social posts. Governance-heavy.

Image plus semantic caption and credit line. Uses figure and figcaption for accessibility.

Full width strip with headline, subtext, and one or two buttons. High-visibility conversion block.

Boxed CTA for sidebars, article footers, and between content sections.

Image one side, eyebrow, title, body, and one action the other. Widely called Teaser (AEM), Promo (Sitecore), or Highlight Card. Do not name it Card: that word is taken by the grid item.

Persistent bar pinned to the viewport bottom. Use with restraint on mobile.

Gated or ungated file download with format and size shown. Also called Resource CTA.

Paired store download buttons. Treat the badges as brand assets with fixed proportions.

Grouped set of related links with no imagery. Cheap to author and easy to maintain.

Expandable list of rows. Individual rows are Accordion Items nested inside the parent.

Child of Accordion. Holds one heading and one body. Must never appear in the main picker.

Horizontal tabbed panels. Individual tabs are Tab Items nested inside the parent.

Tab labels stacked in a left rail. Better for long labels and small tab counts.

Chronological milestones. Vertical or horizontal layout is a dropdown on the component.

Numbered stepper showing position in a multi-stage process. Also called Step Indicator.

Single quote with name, role, and portrait. One testimonial per instance.

Multiple testimonials sliding, with pagination dots. Pause control required for accessibility.

Overlay dialog triggered by a user action. Needs focus trapping and an escape route.

Small contextual hint on hover or focus. Never the only place critical information appears.

Digit blocks counting to a deadline. Pair with a graceful expired state.

Feature matrix across plans or products with tick and cross markers. Must scroll on mobile.

Star or score display, either aggregate or single review. Include the sample size.

Single question with selectable answers and a result state. Good for engagement, weak for data.

Input-driven estimator producing a live result. Almost always a bespoke component.

Categorical comparison. Always pair with an accessible data table or summary text.

Trend over time. Limit to a handful of series and label them directly where possible.

Part-to-whole for a small number of segments. Add value labels, never rely on colour alone.

Grid of headline metrics with trend indicators. Common on dashboards and investor pages.

Sortable, filterable table for larger datasets. Distinct from the simple Table content block.

Pannable map with pins, usually bound to a location content type. Needs a list fallback.

Single completion or capacity indicator. Include the numeric value as text.

Standard enquiry form with configurable fields and a consent checkbox.

Compact inline signup with headline, email field, and submit. Often placed in footers.

Attendance form with session picker, dietary notes, and capacity handling.

Form that unlocks a download. Pairs a value proposition panel with a short field set.

Long form split across stages with a progress indicator and save state.

Drag and drop or browse upload field with type and size validation.

Authentication block with tabbed sign-in and sign-up. Usually template-level, not author-placed.

Granular consent and subscription toggles. Increasingly a regulatory requirement.

One listing bound to a content type dropdown, with Latest, By tag, or Hand-picked selection. The parent every type-specific listing below should be a variant of. Also called Content List or Curated Content.

Grid or list of articles with filter and sort. In a tidy library this is Content Collection set to Articles, not a component of its own.

Upcoming and past events with date grouping. A Content Collection variant, distinguished only by the date block and date filters.

Faceted product grid with sidebar filters. Also called Category page. Justifies separation only because commerce faceting differs from editorial filtering.

Grid of people filtered by department or location. A Content Collection variant bound to the person type.

Store or office finder with distance sort and map toggle. Pairs with Interactive Map.

Vacancy list with department, location, and contract filters. Often fed by an external ATS, which is what justifies a separate component.

Downloadable assets with format, size, and gating status. Also called Document Library. A Content Collection variant.

Auto-populated by tag, category, or manual override. Common in article footers.

Single-line scrolling headline strip. Accessibility risk, so always provide a pause control.

Numbered page controls belonging to a listing. Not a standalone component: it ships inside Article Listing, Event Listing, and Search Results.

Progressive loading control belonging to a listing. An alternative to Pagination: better on mobile, worse for deep linking.

Title, standfirst, category, date, and reading time. Template furniture, not author-placed.

Name, portrait, role, and link to author archive. Feeds structured data for article schema.

Social and copy-link actions. Sticky or inline. Avoid third-party scripts that leak data.

Thin bar showing scroll position through an article. Purely decorative, so hide from screen readers.

Weighted or flat list of taxonomy links. Useful for discovery, weak as primary navigation.

Threaded discussion with replies and moderation state. Heavy governance burden.

Previous and next links within a multi-part series, plus a part indicator.

Multiple person cards in a grid. Presentation layer over the person content type.

Full biography page block with portrait, role, contact details, and related content.

Event-specific person card with session title and time. Distinct from a generic Person Card.

Hierarchical reporting structure. Hard to make accessible, so provide a nested list fallback.

Row of certification or award marks. Keep as image plus alt text, never text-in-image only.

Aggregate score with distribution bars and a link to full reviews. Feeds review schema.

Client outcome summary with a headline metric and a link to the full story.

Logos or quotes from media coverage. Distinct from Logo Strip, which shows clients.

Embedded posts from a social platform. Privacy and performance implications, so gate it.

Compact reassurance strip such as free delivery, secure payment, and returns policy.

Primary product presentation with gallery, price, variants, and add to cart.

Main image plus thumbnail strip with zoom. A child of Product Detail, not standalone.

Size, colour, or option picker with stock state. Disabled states must be visually obvious.

Current price, was-price, savings, and tax note. Legally sensitive, so keep logic centralised.

Line items, totals, and promo code entry. Usually a template region rather than a component.

Staged checkout with address, delivery, and payment. High-risk area for accessibility defects.

Side-by-side product specifications. Set a hard limit on the number of compared items.

Saved items with move-to-cart. Requires an authenticated or persistent session.

Wrapper controlling background, width, and vertical padding. Holds other components inside it.

Configurable column splitter such as 50/50, 33/67, or thirds. Also called Grid or Row.

Adjustable vertical gap between components. Prefer section padding options where possible.

Horizontal rule with style and spacing options. Decorative, so hide it from assistive tech.

Invisible named waypoint that in-page navigation links to. Renders nothing visible.

Section with a media or colour background behind nested components. Contrast checks required.

Container that manages several Accordions with single or multi-open behaviour.

Child of Tabs. One label and one panel. Must not appear in the main component picker.