Lift-up and list elements

We want to offer our readers a chance to always find out more about the subjects they are interested in. This is done by offering links to related content in the form of lists, lift-up elements, or similar.

Lift-up elements

We use various lift-up elements through-out our website. The lift-up elements bring forward content from other parts of the site, based on different taxonomies. You can find examples of these elements and their usage below. 

Horizontal lift-ups

We use horizontal, scrollable content lift-ups for example for showcasing our services by topic. We use these horizontal lift-ups with light and dark themes.

VTT website liftup element with related content in a row

Asymmetric lift-ups

We showcase e.g. our news and article content in asymmetric lift-up groups in different parts of the website. For larger amounts of content, we can also use a version of the asymmetric lift-up, that has filters by category. The purpose of the filters is to make finding the right kind of content easier for the user.

Example of VTT news liftup element

Grid

On e.g. Topic, Industry and Research Expertise pages we showcase related services as a simple grid of lift-ups. Similar layout is also used on our search page. 

Example of a grid liftup element

List elements

When we want to provide easy access to content that may be of interest, but not take up too much space, we can use different list elements. 

We prefer to use these styled elements instead of e.g. bullet lists, when ever possible. 

You can find examples of these list elements and their usage below. 

Hybrid

In some cases we use a hybrid of lift-ups and lists. For example to showcase our latest press releases, we are showing the two latest ones as lift-ups with images and the rest as a more simple list, to spare space.

example of a hybrid list  liftup element

Simple list

For listing content, we use a simple list. This layout lets us show more content on a single page. For example on the search page, the content is listed like this:

an example of VTT website's search listing

Numbered lists

Instead of bullet lists, we can use info boxes that feature a shorter list of items. These items can be numbered if necessary. This list type provides us with a more interesting, eye-catching list.

Although these list paragraphs do allow for a slight background image, our strong preference is to use a single-colour background. 

example of a list with 5 numbered items