Home and Hub Components

Components 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.

2 / 3 column

Allows you to display two to three 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.

Signposting box

The attention-grabbing visual component that directs users to another part of the website.

Signposting boxes include an image and a single line of text with an arrow. These are best used when both your image and link text clearly indicate what the user will find by clicking on the link. 

For example, ‘Research facilities’, with an image of a laboratory, or ‘Undergraduate modules’, with an image of students in a lecture, are both very clear.

When deciding whether to use a signposting box, consider whether your link text is self-explanatory.

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.
  • Do not combine signposting boxes with other Content types in the same row.
  • If the link requires a description, use a Signposting card instead. If you do not have an appropriate image, use a Text box.

Signposting box example (two columns)

Signposting card

Signposting cards consist of a title, image, short teaser text and an arrow format link. These are best used when an image and short link text will not be enough to clearly indicate what can be found behind the link.

They are also useful for giving more context to a link or image.

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.
  • Do not use the same text for the Title and the link text. If you do not have an appropriate image, use a Text box.
  • Do not combine signposting cards with other Content types in the same row.

Text box

For inserting text on a page with or without formatting, links and media. Includes additional options for Light, 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)

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 (legacy)

The Media box is no longer a supported Component

We recommend that you consider using alternative Components to the Media box on your Home and Hub pages and. This is because:

  • videos are best experienced by visitors when they appear large on a page, instead of with a two- or three-column rows
  • the Media box design is no longer optimised for Home and Hub Content types. In particular, it was never designed to work at full width - media looks poor quality when displayed in this way
  • we’ll not be developing the Media box any further. Supporting fewer Components means that we can spend more time developing new features and making sure that existing Components are optimised for functionality and accessibility

Alternatives to the Media box

There are other, supported Home and Hub Components which should be used instead of the Media box:

The Featured video Component gives prominence to a video, allowing it to take centre stage across a page when viewed on a larger screen. You can add supporting text to give context and link through to a relevant deeper page.

The Featured image Component is the best way to display an image most prominently on the page. Again, you can add supporting text and a link.

The Signposting card is the optimum way to display an image with text and a link within a two- or three-column row. Signposting boxes can be used for links which require less accompanying text. For both you can link through to a Basic page with a large video and further contextual content to help make the image or video more accessible.

If you need a little more flexibility then a Text box allows you to display headers, text, links and media in a two- or three-column row. We suggest maintaining consistency for visitors by following the hierarchy that the majority of Components use: image/video, header, text then link.

To reflect the above, we'll soon be renaming Media box to Media box (legacy).

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.

Featured image

This is similar to the Featured video Component. Use it to promote a key message with a powerful image, for example to support a current campaign.

This Component shows an image with accompanying text which extends to the full width of the page, meaning your image is more prominent compared to one in a Text box or Signposting Component. You can link the image through to a destination page.

For maximum impact, only use one Featured image Component per page.

Event

Add an Event Signposting card or Event Signposting box to a 2/3 column row.

Logos

This Component allows you to add one or more logos to the top area or footer of a Home or Hub. It can contain one or more logos which link to a website and some accompanying text.

Logos banner