Home and Hub Components

Components - previously called Paragraphs - are optional and flexible. They're available to insert into the main content area of Home and Hub pages*. By combining them you can create page layouts that help your website visitors complete tasks and find the information they need.
Examples of multicoloumns and signposting boxes.

Choose from:

*These are also used on legacy pages using the Standard Content type.

2 / 3 column

Allows you to display two to four components side-by-side.

How to add:

  • While editing a page click Add Component in the Components section of the page and choose 2 / 3 column.
  • Choose whether to add an overarching title.
  • Then you can add two to four Components within it

Rules:

  • Only available to add into Home and Hubs.
  • Can only be added by Group owners.
  • Editable by everybody.
  • Do not add a single column. It results in content becoming too wide, creating a visual distraction for visitors.
  • Do not add more than three columns. It results in content becoming too narrow to display properly.

2 / 3 column example

Signposting box

The attention-grabbing visual component that directs users to another part of the website. Consists of an image and a single line of text with an arrow. 

How to add:

  • While editing a 2 / 3 column Component, click Add Component within the 2 / 3 column and choose Signposting box.
  • Add a title, image and link.
  • Choose a text backing colour.

Rules:

  • Only available to add into Home and Hubs.
  • Can only be added by Group owners.
  • Editable by everybody.
  • Text with backing only shows when using three columns.

Signposting box example (two columns)

Signposting card

Card-style, teasing component that directs users to another part of the website. Consists of a title, image, short teaser text and an arrow format link. 

How to add:

  • While editing a 2 / 3 column Component, click Add Component within the 2 / 3 column and choose Signposting card.
  • Add a teaser text, image and link.
  • Choose whether to add a title text.

Rules:

  • Only available to add into Home and Hubs.
  • Can only be added by Group owners.
  • Editable by everybody.

Text box

For inserting text on a page with or without formatting, links and media. Includes additional options for Light (grey), Dark (navy) and Highlight (blue) box backgrounds.

How to add:

  • While editing a 2 / 3 column Component, click Add Component within the 2 / 3 and choose Text box.
  • Choose your Text box style background colour.
  • Add and format your text.
  • Choose whether to add a title text and media.

Rules:

  • Only available to add into Home and Hubs.
  • Only one image or video can be added in the Text box media field.
  • Links should be added within the text box using the Editor.
  • Should not be used for full-width of the screen content. The text within only fills the first two-thirds of the box. Reading content across the full-width of a screen is more difficult than when you use 2 /3 columns. Think about how you can possibly display this content in a better way.

Text box example (navy background / two columns)

Students sat at desk

Example with title

Example content including media and a link.

Link added

Example without a title or links.

The height of all the boxes will default to the depth of the deepest box.

Media box

For inserting standalone videos or image on a page.

How to add:

  • While editing a 2 / 3 column Component, click Add Component within the 2 / 3 column and choose Media box.
  • Choose your media.
  • Choose whether to add a title text and short teaser text.

Rules:

  • Only available to add into Homepages and Hub pages.
  • Select from existing media that has been added to your group media library.

Media box example (two columns, video / image)

Students sat at desk

Student profile card

For linking to a Student profile.

How to add:

  • While editing a 2 / 3 column Component, click Add Component within the 2 / 3 column and choose Student profile card.
  • Start typing the Headline of the Student profile.

Rules:

  • Student profile card can also be embedded into the the Editor using the 'S' button in the toolbar

From library

Insert a Component from a centrally-managed library. Reusable Components reduce the need for different editors to have to create the same content over and over again. They also mean that a single source of information can be updated once centrally with the change being automatically applied wherever the Component is used.

The library contains Components consisting of the types above as well as some bespoke Components such as the course finder.

How to add:

  • While editing a page or 2 / 3 column click Add Component and choose From Central library.
  • Click Select Component from library.
  • Search for and tick the Component you want to use.
  • Click the Select Component button.

Rules:

  • Currently, only admins can add and edit the central library.
  • If you would like us to add a new Component to the library, please contact us.

Links component

Links

For inserting a additional links to a Home or Hub. Use it to add further signposting to layouts without requiring additional images to support them. The Links Component should be used to provide links to secondary calls to action and is designed to be supplementary to Components like Signposting boxes or Signposting cards.

How to add:

  • While editing a Home or Hub or click Add Component and choose Links.
  • For each link, an editor will need to provide a URL and useful link text.
  • The Component also has an optional title field that can be used to provide context for the links.

Rules:

  • The Links Component works best with 3 or 6 links in terms of visual design.
  • It can be used with 2, 4 or 5 links, if necessary.
  • We would not advise using this component for a single link.