Services

Hero components for hub pages

Hub pages have multiple options for so called hero components that are visually attractive. Learn about different hero component options to see which one serves you purpose the best.

Loading table of contents

Hero component options (-> until Feb 2026)

These are the hero component options for hubs that will be updated in the spring 2026. See below for examples and instructions for the new versions.

hero element with tex tand links on the left, and round image on the right — Hub description with medium image

Hub description large -komponentti — Hub description with large image

image of hero magazine component, text and links on left, image on the right — Hero magazine

hero video component: wide video and title and lead text on the bottom — Hero video example

Hero magazine (live in spring 2026)

Hero magazine features a large image and space for heading, text and links. As the name "magazine" suggests, it gives an editorial feeling to the page if more than one magazine item is used. The image alignment differs from right to left automatically and you can now select the background colour for each item individually.

See examples of different Hero magazine variations in the images below.

Illustration of the homepage hero magazine component with three image-text pairs, alternating sides. Text background colours are yellow, black, and blue. — Front page example with max 3 items

Illustration of the business school's front page, showing the business school and students walking in a modern building. — Example of a school hub page

Aalto University's School of Electrical Engineering webpage with a purple section and a photo of people in a blue-lit room. — Example of hero magazine with the side nav open

Instructions

You can either use only one Hero magazine item, or create up to 3 items. Be mindful about the image and colour choices so that they match together.

When you want to create a new Hero magazine component or edit an existing one, use the following fields and functionalities to create the desired combination. Each field is created for individual Hero magazine item:

Title: Write a title for individual item
Summary: Write a summary that will show below the title, max 140 characters
Image: Select an image for the magazine item. Image with the most important content in the middle is best. Please see the image below for guidance how the image will be cropped in different viewports (desktop, tablet and mobile).
Link URL and link text: You can add up to 4 links. They can be either internal links that you will find by typing the name of the page you want to link to, or you can paste a URL to an external site.
Theme: Select the background colour for the individual item. By default the hero magazine items inherit the Hub Branding colour selected on the very top of the editing form.
Adjusting the order of the items within the component: Once multiple items have been added, the order can be edited by dragging the items to the desired order. The alignment of text and image (left or right) is determined automatically based on the order of items.

Different display sizes of an image showing a person with curly hair and a white coat standing in front of a grey wall with a red stripe. — Different images ratios for Hero magazine images

Image ratios in Hero magazine

Use an image where the main content is in the middle of the picture. Note that on desktop the image is shown in a ratio 5:4, on mobile the image is cropped from top and bottom. On tablet sized screens the image is adaptive, and depending on the amount of text it might be cropped to a much more vertical aspect ratio.

We discourage using any text or dates in images, but rather include them in titles and text.

Hub description

This component has two options, medium and large, which refer to the image sizes. Compared to earlier versions, the new visuals will use all the same fields as they used to.

Medium

This is the most used hub hero component. This version features a square image and inherits the background colour from the hub Branding.

Large

This version feature an almost full width image with background colour from the hub Branding field.

Instructions and examples

Two versions of a webpage for Aalto University's Department of Neuroscience and Biomedical Engineering, one yellow and one white. — Hub description (medium) in yellow or no colour

Top of the webpage with headings and text, large image of people sitting on orange seats in a modern room discussing business cooperation. — Hub description (large) in yellow

Top of the webpage with headers and text, side menu, and an image of people sitting and discussing around a table in a modern office. — Hub description (large) with side nav open

The component itself only has the selection for the version: medium or large. The other fields are filled in the Basic information.

Hub name: The name will show highest on the page. The name is the most important content for search engines.

Slogan: Slogan used to be the heading for a hub, i.e. the title shown highest on the page. However the role is now to supplement the Hub name and add context. Slogan is not mandatory and can be left empty.

Main image: The image will show on the page and on the liftups, when the hub page is linked elsewhere on aalto.fi.

Description: This is the text chapter that will show below the slogan on both versions of this component. You can add links using the Link highlight style to reach the same visual style as in the examples.

Note that lead text is not shown on the hub page.

Hero text with links

This is the visually most simple hero component version that has no image. The background colour of the component is inherited from the hub's Branding field. You can add up to 4 links to the right column to complement the Title and Listing description. Links can have a heading or it can be left out.

Department of Chemistry and Materials Science webpage with sections on research, teaching, and staff. — Example with a black background, all fields in use