Infographics component

Highlight essential figures to showcase degree structure or rankings, for example. Infographics component allows you to draw the attention to meaningful numeric information. With a coloured background and linking possibility the component is versatile and visually pleasing.

The component is available in most content types: Programmes and Programme subpages, Hubs, Articles, Study options, Open university and Summer courses, Services, News and Events.

The image below shows the basic fields for the component. Use the Theme field to select the colour for the component, and select which variant you want to create. 

Screencapture of infographic component editing form
Remember to select the toggle "Use first value as a "total" sum" to separate the first cell from the others

Two variants of the same component

Creating the component, it was clear there are different use case to the same kind of information. It was decided to create two variants. Both use the same fields, but they look a little bit different.

Note that the variant show the fields differently!

Component variant 1: Curriculum

This variant is specifically designed for visualizing degree structure. See the example below for the fields available for the component and and example of them in use. Remember that you can leave some fields empty, and they will not be shown in the final component layout.

  • Only the Curriculum variant shows additional Info text field below the infographic table cells.
  • Use the link field to direct the visitor lower on the page using anchor links.
  • Use blue background colour for the component for degree structure visualization (Select Brand 2 in the Theme field)
  • Note that the cells change size responsively, i.e. the width of the cells scales up or down according to the device and screen or the visitor.

* Major studies include Bachelor's thesis and seminar 10cr

Screen capture of infoographic table cell edit form
Fields for one cell in the component

Component variant 2: Ranking

The other variant of for showcasing important numbers such as rankings. It can of course be used for other figures as well. This variant is taking a wider space on a page than the curriculum variant.

  • You can use the component with or without the first cell separated to look different. Below the example has the field "Use first value as a "total" sum" selected
  • Do NOT use the Info text field as it is not designed to use with this variant
  • You may add links or leave the link field empty. The example below has both versions, some fields without link, some with.
Pre-value text
Ranking variant example
Post-value text
Ranked 9th best university globally (QS 2021)

More Drupal instructions

Components: how to create content for

Get to know the components for creating versatility and visuality when delivering your content.

This service is provided by:

Communications Services

Did you find what you were looking for? If not, please contact us.
  • Published:
  • Updated: