Drupal: Aalto.fi website

Article components – part 1

The new aalto.fi includes multiple new components, that are most likely not familiar to everyone, yet. Therefore, we now start a series of introductions to some of these components. This is to provide you, the editor, with information on what is important to know about the components when editing articles.


When editing articles, the first thing to do is to add basic information:

  • select the language for the page
  • title
  • summary and
  • main image

The title is the first thing shown on an article page. The summary is a short description of the content on the page. Lastly, the main image is the one that is shown on article pages after a short lead text, which can be added in the component section.

NB that the title, summary and main image are used when an article is pulled and shown on another page or in a hub as a liftup. Therefore, it is important that they describe the content well, especially the summary field.

Page basic information

Also, the main image should not include any text in the image. It should be a basic image with as a good a quality as possible, because when pulling the article to other pages, the image will be cropped and an image with text on top of it won’t look good.


Some metadata needs to be added to all articles. It includes the information about the primary hub where the article belongs to. As a voluntary option, you can also choose to add some primary and secondary tags that fit the content of your page: this will help the user to find the content of the page via the internal search and external search tools.


The new communications platform includes many components. Here are the first few introduced.

Text paragraph

A text paragraph is probably one of the most used components on the new aalto.fi. It is used for the main text content on all pages. It can include all basic text stylings, such as bold and italics, as well as tables and links.

An important thing to remember with text paragraphs is to use the heading styles from the style menu when you have any headings, or sub-headings, in your content. Bolding headings is not to be used.

The heading styles are: Heading 2 and Heading 3, which make it easier for the reader to get an overall understanding of the article. Heading 2 should be used as a heading for larger sections and Heading 3 as a sub-heading for sections under Heading 2. 

This text is an example of a text paragraph component. 

Text paragraph example

Quotes and highlights

Quotes and highlights can be used to emphasise a short piece of text. Quotescan be used with or without an imageHighlights are always without an image, but there are two background themes to choose from – a blue or a yellow one.

The thing to remember with quotes and highlights is that the text really needs to be short to describe the essence of context, besides, that way it looks good, too. Below are examples of these.

This is a quote component. Here you can write a compact quote to show in an article.

Source of the quote

Important things to remember:

  1. Do not use bold styling to make a heading in a text paragraph. Use the heading styles Heading 2 and Heading 3 from the style menu.
  2. The main image of an article page should not include text in the image. Logos and infographics should be avoided, too. It should be just a basic image.
  3. Quotes and highlights should include a very short text.
  • Published:
  • Updated: