Site components overview | Doghouse SaaS Knowledge Base [Skip to content](#main) [ ![Doghouse SaaS Knowledge Base](/storage/branding/01M3N8PQ7PSDNQBBKKJM6XGW03.svg) ](https://nginx.deploy-lagoon-production.districtcms-docs.dh1.amazee.io) [Product documentation](/articles) [Roadmap](/roadmap) Toggle navigation [Product documentation](/articles) [Roadmap](/roadmap) 1. [Home](/) › 2. [Product documentation](/articles) › 3. [Page building & display](/articles?category=6) › 4. Site components overview Site components overview ======================== Updated 5 days ago · 3 min read Search Search Overview -------- Components are the building blocks of a page: a block of text, a grid of cards, a call to action, an embedded form. You stack them in the order a visitor should read them, and each one has its own short form to fill in. Articles and landing pages are built this way, in the **Components** area on the form's **Content** tab. Events use a single Body box instead and have no components. ![The Components area on a landing page form, with the list of component types open beside the Add Accordion button, outlined in red.](/storage/NyVrbHebnp5QiVRQr0ENZwCZqOC2p7UMw7DZQ6fc.png) For adding, removing and ordering them, see [**Add, remove, and delete site components**](/articles/add-remove-and-delete-site-components) and [**Reorder page components with drag and drop**](/articles/reorder-page-components-with-drag-and-drop). --- The components at a glance -------------------------- Thirteen components are available on articles and landing pages: Component What it adds to the page Items you add inside it Text A block of formatted text, written in the editor. None Alert A notice inside the page, styled as Default, Info, Success, Warning or Error. None CTA A call to action, in one of three styles: a CTA band, a Spotlight with a background image, or a Panel. Up to two buttons. None Card grid A grid of one to four columns of cards, each with a title, summary, image or icon, and link. Card Feature cards A set of feature or option cards, each with an icon, tags, a description, a button and an optional badge such as Recommended. Feature Highlights Bold figures or short standout facts, each with a caption. Highlight Value chips A row of short values, each shown with a tick. Chips, typed straight in Accordion Questions or sections that open when clicked. Accordion item Tabs Content split across tabs a reader switches between. Tab Process steps Numbered steps in order. The numbers are added for you. Step People Cards for people, each with a name, an optional honorific such as Dr, a role and an optional profile link. Person Listing A live list of the latest news or upcoming events, which updates by itself. None Webform One of the site's forms, embedded in the page. None ### Settings most components share A component's form is split into tabs. Alert is the exception: its form has only Heading, Body and Type, with no tabs. Tab What you set there Content An optional Label (a short line above the heading, such as Newsroom), a Heading and, on most components, a Summary, then the component's own content or items. Settings How it looks: a style or layout where the component has one, and Background. Leave Background empty for no band, or choose Subtle or Dark to set the component on a full-width coloured band. Extra On components that have it, a More link: a "view all" style link at the top right. > **💡 Note:** A Card grid's **Card style**, on its Settings tab, applies to every card in it: Standard (image, title and summary), Service (an icon tile), Tile (a full-bleed image with the text over it) or Child page (a compact link card). A Listing's **Listing** setting chooses Latest news or Upcoming events. --- What components look like ------------------------- These examples come from the demo site, so the wording belongs to it, but they show what each component looks like on a page. The component is outlined in red. ### Card grid ![A Card grid on the homepage, headed What we do, with four Service style cards in a row, outlined in red.](/storage/AvQfPKG0MHSQfnb7j6uzWxgJyEHi6hirno0zYV4U.png) ### Value chips ![A Value chips component on a dark band, with a heading and five values each shown with a tick, outlined in red.](/storage/YNeZF5gSNH2ABGTjA1N2kFO5OufVnoDMk42uKY1b.png) ### Highlights ![A Highlights component on a dark band, showing four bold figures with captions, outlined in red.](/storage/JJZSJ6zP4tybw7ARXwCfa2tOCKuRCvC5jMV7cHDD.png) ### Listing ![A Listing component showing the latest news, with an All media releases link at the top right, outlined in red.](/storage/mZFZX70lmiIXC1mmwXiqwLzv1pXn90fYBQmay3bx.png) ### CTA ![A CTA component in the Spotlight style, with a background image, a heading, a short message and a Make a submission button, outlined in red.](/storage/hX5hh2WYeG7QjQHGjo6S0BuydxA0ZaFwj0BJJv1H.png) ### Alert ![An Info style Alert component at the top of a program page, announcing a closing date, outlined in red.](/storage/liEIC61QOqyTwruUiBQOckiVeb8EKersgzGOoGZG.png) ### Text ![A Text component on a program page, with headings, paragraphs, a bulleted list and a table, outlined in red.](/storage/2yz40XI4AiqIUZYgFv3cM7WJFh2MeJY5GRNWswtJ.png) ### Accordion ![An Accordion component with three closed questions, outlined in red.](/storage/9x68ZUCutCt3jHYZr7upJ2cpRRrsvFXf5bFr1Gj9.png) ### Process steps ![A Process steps component on a policy page, with numbered steps laid out in a grid, outlined in red.](/storage/lAmm6vSrJpDywEd5GAnqQ2ZrAa2YDghJ8K0vbJ76.png) ### People ![A People component showing two leadership cards with initials, names and roles, outlined in red.](/storage/s18vCdUjclxwWZEGiIqxW7oVwVydY6Ayv1y4fF0V.png) ### Webform ![A Webform component on the contact page, showing a submission form with name, email, home region, topic and submission fields, outlined in red.](/storage/2DDwaYgirdCzd9wW6rKJxIYeEgxC2LAn0yL4atRU.png) > **💡 Note:** Feature cards and Tabs are available but not used on the demo site, so there is no example of them here. Add one to a draft page and preview it to see how it looks on yours. Related articles ------------------ - [ Using the editor → ](/articles/using-the-editor) - [ Adding and removing site components → ](/articles/add-remove-and-delete-site-components) - [ Reordering and nesting site components → ](/articles/reorder-page-components-with-drag-and-drop) Was this article helpful? ------------------------- Your feedback helps us prioritise what to rewrite. Yes No [ Back to Page building & display ](/articles?category=6) On this page **Need additional help?** Submit a support request through the [**support portal** ](https://doghouse.atlassian.net/servicedesk/customer/portals)or email © 2026 [Doghouse SaaS](https://doghouse.agency) [Glossary](/articles/glossary)