Components are the individual granules of content that you add to assemblies, pages, or other components. Assemblies are composed of several components.
For example, to make a set of frequently asked questions, you can create an accordion component for each question and answer, then bring them all together as a set of FAQs using the accordion assembly.
We’ve designed Contentful to give Shelter content creators a wide range of components and assemblies to work with.
Accordion component and assembly - hide longer text under topic headers
Advice links assembly and link box component - for advice links on homepage
Banner component - banner across a column or page with heading and text link
Byline banner component - dark grey banner with Shelter brush mark, with heading and text
Cards with icon component and assembly - similar to content card, but with icon and optional webchat button
Content cards/links and card assemblies - promote and link to other pages on the website
Content grid-4 component - add text boxes in a 2x2 layout
CTA assembly and standard CTA component - add call-to-action messages
CTA with icon - similar to standard CTA but with icon and capability as a webchat button
Donation banner - banner with donate button and space to enter chosen amount
Download CTA component and download banner assembly - allow users to see a preview image of a document/asset and download it
External link component - link to other websites (this component allows us to centrally manage external links)
Forms- including event sign up forms and furniture shop forms
Full width image component - image to fill screen, or for use in the sidebar
Graph component - showcase stats around the housing emergency
Heroes- usually hero banners at the top of the page e.g. brand hero, donate hero
Inline callout component - draw users' attention to an important point or link
Jump menu content block component and jump menu assembly - help users find content quickly by skipping to the relevant section of a long page
Link box component - feature a boxed list of hyperlinks on the page
Page metadata component - required for every page, to optimise SEO and make sure it can be found by search engines
Person collection assembly - add a group of people (e.g. Board of Trustees) to a page
Search box component - allows user to search specific part of the website e.g. housing advice
Share block component - encourage users to share a page via email and social media
Simple rich text box component - add fully formatted text between different assemblies (can also embed an image)
Stats component - showcase stats in a 2x2 grid or a line of 3
Stepper component and stepper option assembly - tailor content on a page to user’s needs
Table component - present data in a table
Testimonial assembly and testimonial data - feature quotes from people (e.g. clients, storytellers, event participants)
Three column rich text block component - add three columns of text with a heading
Two column generic block/two column text and image block component - versatile way of displaying content side-by-side on desktop (will stack on mobile)
Video embed component - add a video, with option for a heading above and further text/links below