Components
Components, content modules, blocks, renderings may be used as interchangeable terms for the same thing: isolated pieces of content and front-end rendering. Here’s some tips for creating and collating components:
- Group the component elements/ layers together
- Where possible, name the group and the child elements
- Ensure all type styles are inherited from the styleguide
- Ensure all colours and themes are inherited from the styleguide
- Ensure image ratios and treatments align with the styleguide
When utilising headings, consider content hierarchy
- A page title is always H1
- Row headings or section headings will be H2
- Nested content block headings will likely be H3
- Consider arranging components that display similar fields of data to be one component with multiple rendering variants. e.g. “Card with image on left, text on the right” is basically the same as “Card with image on right, text on the left”
- Even if components aren’t consolidated, consider using consistent styles and spacing. e.g. “Site search results” might share styles with “Article search results”.
- Wherever possible, test using real client content
- Consider edge cases and testing the bounds of content population
- Long content
- Short content
- Some fields not populated
- Components should align to the 12 column grid as standard
- Where necessary, define how a module changes between desktop, tablet and mobile
- Consider how some module will scale at ultra-wide screen size if they’re full-bleed
- As we can control layouts with 1,2,3,4 column layouts, most modules will be built to expand to the width of its container. There are obvious exceptions for some full width