Services

Components for hub landing pages

There are a few components that can only be used at so called hub landing pages at aalto.fi. These include components which are strong brand elements, and which are meant to provide a bold moment, to break the monotony of content and give a strong visual highlight. Components only for select hubs are also explained, such as the hero components.

Components for all hubs

Hub description

This component presents the hub with a text piece and an image. It can have two sizes: medium and large. The images below present the two size options.

Screenshot of a hub at aalto.fi in large mode — Hub description with large image

Content highlight

The content highlight component can be used at hubs to display a maximum of 6 liftups to other hubs and/or content pages. You can change the order of the chosen (6) liftups by dragging and dropping them in the edit mode. On the right, an example of the content highlight.

Use this component to showcase the most timely relevant and interesting articles.

Learn more

Quicklinks

Quicklinks are used for the most relevant links on the page. The component includes titles for the links and a small description. In addition, you can add an image for the links.

Always use 3 links, the quicklink component won't work with less or more. Only use this component once per page. Below, you find two examples of the Quicklinks component.

The icons (the small yellow images) can be found by clicking Select media under Image. You will find all icon options by typing: "icon" in the name search field. Choose the the one that best suits the respective content.

Quicklinks with the titles Participate, Develop and Network — Quicklinks at the Aalto alumni webpage

Quicklinks with the titles Contact us, Useful resources and Equality and Diversity — Quicklinks at the webpage for the School of Science

Components for select hub landing pages

The following components are used only at the aalto.fi front page, the pages in the main navigations (except Services) and the school landing pages.

Hero magazine and Hero video

The hero components are only used by nominated editors. For Hero magazine, keep the title engaging and short.

Hero video component is the key area for the whole Aalto site. A hero video should 'wow' the site visitor, maximise the visual effect and bring emotion to the layout. The length of the video cannot exceed 5 seconds.

Screenshot of the aalto.fi front page with the text "Celebrating our 10th birthday" — Hero magazine example

A still image of the new her video, showing the Otaniemi campus from above with a text box underneath — Hero video example

Rich text highlight

The component is animated i.e. the darker-coloured elements move slightly. The background colour options are red, yellow and blue. However, the school landing pages use their own colours by default.

The text in the component can include links.

A red box with shapes in a darker shade of red in the background with the text rich text highlight in white — Rich text highlight with red background

Rich highlight text component for aalto.fi with link — Rich text highlight with a link and yellow background

Social media banner

The social media banner gives a strong visual highlight while linking to social media. The background colour options are red, yellow and blue, although as with the rich text highlight, the school's landing pages use social media banners in their own colours.

School of Business social media banner — The social media banner in the brand colour of the School Of Business

Highlight Quick links

This component provides the three most important links. On the school landing pages, the yellow colour in the image below is replaced with the school brand colours.