Base Styles/Icons/Some/Linkedin/Default Created with Sketch. Base Styles/Icons/lock/open Created with Sketch.

Components: how to create content?

Here you can find all the components that can be used on aalto.fi. This component is Lead text. Lead text is a short introduction for the article shown in the beginning.
Drupal image for Comms use only. Abstract image, yellow.

Text paragraph component

Text paragraph is the body text field. A text paragraph can include the basic formatting options:

Title = heading h2

Subtitle = heading h3

Regular text with bold, italic and links. Link can also be presented with link highlight style which adds a small blue line under the link = link highlight style

A table (the caption of the table)
First cell (header row) Second cell (header row) 
Fourth cell Fifth cell
Sixth cell Seventh cell
  • Bullet points
  • Bullet 2
  1. Numbered lists
  2. Number 2

Quotes

Quotes can be used to highlight a sentence that someone has said. The sentence needs to be short, max 120 characters with spacings. A quote can include an image. Below are examples of quotes with and without an image.

This is a quote without an image

Quote source
Aalto University / donate

This is a quote with an image

Quote source

Highlights

Highlight components can be used similarly to quotes to emphasise a short text piece or a sentence (max 120 characters with spacings). Highlights have two theme options: Blue and Yellow. Below are examples of both themes. Kindly note, that the Highlight component is not to be used for titles or sub-titles. This, because your content won't be included in searches and, therefore, wont' reach the targeted audiences. The search engines favour the set formattings: Heading 1 (i.e. the main title), Heading 2, and Heading 3.

Listing

Listing is a text component where you can add titles/categories and add information about them. The component has two display modes: accordion and double column. Accordion is a type of menu where the user can click the categories opening up more information on the topic. Double column shows all the information straight without clicking in two columns, the title/category on the left and text on the right. You can edit the titles of the items, the descriptions, the links and link texts. Below is an example of listing with two items in both display modes (listing, double column). The items can include the basic formatting.

The category of a listing column item (double column)

The description of the listing element.

The category of a listing column item (double column)

The description for the second item.

Image with text

Image with text component presents a specific content in an engaging way. 

In services, Image with text has two Media placements: Media on right and Media on left. Below is an example of both. It is recommended to use both placements if you use multiple of these components. 

Aalto-yliopisto / Unto Rautio

Title

This is the Image with text component with Media placement: Media on right.

This component can include the basic formatting described above.

Aalto-yliopisto / Unto Rautio

Title

This is the Image with text component with Media placement: Media on left.

Single image

Single image can be used to add an image between text paragraphs. Single image does not include text paragraphs, only the image and a caption (if wanted).

In services, single images look like the image below:

Aalto-yliopisto / Unto Rautio

In article pages, images have three size options: Large, Medium and Extra Large. The image below represents the difference between the sizes. 

Single image sizes

Media Gallery

Media gallery component is a set of images grouped into a gallery. It includes a description of the gallery and each of the images can have a caption. An example of a gallery is below.

Media Slider

Media Slider can be used to present multiple images or text pieces around a specific topic. Sliders include a description of the component on the left (for example H2 heading, normal text with links) and the picture/information slider on the right – content can be swiped via arrows.

Sliders have three possible display modes: small, medium and large. The S version automatically formats the picture into a round shape whereas the M version surrounds the picture with a round shape. The L version doesn't format the pictures to a round shape.

Below are example images of sliders with display mode small, medium and large:

Slider - small
This is a Slider component with a Display mode: Small. It can include the basic formatting described above.
Slider - medium
This is a Slider component with Display mode Medium. It can include the basic formatting described above.
demo: slider / large
This is a Slider component with Display mode Large. It can include the basic formatting described above.

Video clip

Video clip component integrates a video from an external or internal source to the article.

Video clips look like the video below.

Attachments

Attachments can be added to an article through the attachment component. Below is an example of an attached article. When you add a new attachment, the file "Name" field is shown:

Manual liftups

Manual liftups can be used to display several links to HUBs and content pages. It includes a description of the content and a set of links. Manual liftups have three possible display modes: small, medium and accordion.

The small display should be used for links that might not have an image and mainly need to display the title. The medium display is for links with images, also showing a summary text. The accordion is for links with long summaries that need to be displayed. In manual liftups, the accordion display is different from the listing version in adding images next to the title.

Below are examples of all three of these.

Manual liftup small display

Liftups with Article, Hub, External liftup and Service

What are Aalto Platforms?

The Platforms facilitate multi- and interdisciplinary research and teaching in thematic areas. They organise annually several thematic meetings which offer external stakeholders possibilities for co-operation and networking. They, also, bring together Aalto's expertise across departments.

aalto_biz_researchers_05_2013-0304_jpg.jpg

Aalto Digi Platform

Aalto Digi Platform is an open community for anyone interested in digital technologies. We bring digitalization-related research fields together and foster collaboration between Aalto and society at large. We help arrange community events and organize larger events to spark public discussion and showcase Aalto's research.

Aalto X Reality Demo by Matti Ahlgren

Aalto Living+ Platform

Living+ supports multi- and transdisciplinary research on human-centered living environments, one of Aalto University´s key research areas.

human-centered living environments by Joel Wolff

Aalto Health Platform

Aalto Health Platform is a collaborative program that creates a framework for Aalto to deepen and widen its joint work with its partner organizations in the area of health and wellbeing (H&W), which is one of Aalto University’s strategic focus areas for research.

Aalto University/Aino Huovio

Manual liftup medium display, theme: –None–

Liftups with Article, Hub, External liftup and Service

aalto_biz_researchers_05_2013-0304_jpg.jpg

What are Aalto Platforms?

The Platforms facilitate multi- and interdisciplinary research and teaching in thematic areas. They organise annually several thematic meetings which offer external stakeholders possibilities for co-operation and networking. They, also, bring together Aalto's expertise across departments.

Aalto X Reality Demo by Matti Ahlgren

Aalto Digi Platform

Aalto Digi Platform is an open community for anyone interested in digital technologies. We bring digitalization-related research fields together and foster collaboration between Aalto and society at large. We help arrange community events and organize larger events to spark public discussion and showcase Aalto's research.

human-centered living environments by Joel Wolff

Aalto Living+ Platform

Living+ supports multi- and transdisciplinary research on human-centered living environments, one of Aalto University´s key research areas.

Aalto University/Aino Huovio

Aalto Health Platform

Aalto Health Platform is a collaborative program that creates a framework for Aalto to deepen and widen its joint work with its partner organizations in the area of health and wellbeing (H&W), which is one of Aalto University’s strategic focus areas for research.

Manual liftup medium display, theme: Dark

Liftups with Article, Hub, External liftup and Service

aalto_biz_researchers_05_2013-0304_jpg.jpg

What are Aalto Platforms?

The Platforms facilitate multi- and interdisciplinary research and teaching in thematic areas. They organise annually several thematic meetings which offer external stakeholders possibilities for co-operation and networking. They, also, bring together Aalto's expertise across departments.

Aalto X Reality Demo by Matti Ahlgren

Aalto Digi Platform

Aalto Digi Platform is an open community for anyone interested in digital technologies. We bring digitalization-related research fields together and foster collaboration between Aalto and society at large. We help arrange community events and organize larger events to spark public discussion and showcase Aalto's research.

human-centered living environments by Joel Wolff

Aalto Living+ Platform

Living+ supports multi- and transdisciplinary research on human-centered living environments, one of Aalto University´s key research areas.

Aalto University/Aino Huovio

Aalto Health Platform

Aalto Health Platform is a collaborative program that creates a framework for Aalto to deepen and widen its joint work with its partner organizations in the area of health and wellbeing (H&W), which is one of Aalto University’s strategic focus areas for research.

Manual liftup medium display, theme: Bright

Liftups with Article, Hub, External liftup and Service

aalto_biz_researchers_05_2013-0304_jpg.jpg

What are Aalto Platforms?

The Platforms facilitate multi- and interdisciplinary research and teaching in thematic areas. They organise annually several thematic meetings which offer external stakeholders possibilities for co-operation and networking. They, also, bring together Aalto's expertise across departments.

Aalto X Reality Demo by Matti Ahlgren

Aalto Digi Platform

Aalto Digi Platform is an open community for anyone interested in digital technologies. We bring digitalization-related research fields together and foster collaboration between Aalto and society at large. We help arrange community events and organize larger events to spark public discussion and showcase Aalto's research.

human-centered living environments by Joel Wolff

Aalto Living+ Platform

Living+ supports multi- and transdisciplinary research on human-centered living environments, one of Aalto University´s key research areas.

Aalto University/Aino Huovio

Aalto Health Platform

Aalto Health Platform is a collaborative program that creates a framework for Aalto to deepen and widen its joint work with its partner organizations in the area of health and wellbeing (H&W), which is one of Aalto University’s strategic focus areas for research.

Manual liftup accordion display

Liftups with Article, Hub, External liftup and Service

Create an automatic news article liftup

  • Find the page where you want the automatic liftup (= news article feed) to be shown e.g. your research group page or a hub
  • Go to edit mode
  • Select from components "Add content: automatic news liftup"
  • Fill in the categories and primary tags of the news articles and/or "relates to" field (=the right HUB/research group page that the articles have to be marked as "related to") to showcase them in this liftup
  • Then, click on "Save".
  • Now the component shows all the news articles that you have chosen by tags/filters
  • If the relevant news articles are not showing, they might be lacking information (category / primary tags / secondary tags / relates to)

If you look at the example below, you see that e.g. this automatic news liftup shows only news articles related to “Collaboration” HUB, i.e. this automatic liftup shows only news articles that were tagged "Relates to" Collaboration HUB.

article liftup - news
aalto.fi / automatic news article liftup, relates to

Create an automatic events article liftup

  • Find the page where you want the automatic liftup (= events article feed) to be shown e.g. your research group page or a hub
  • Go to edit mode
  • Select from components "Add content: automatic events liftup"
  • Fill in the categories and primary tags of the event articles and/or "relates to" field (=the right HUB/research group page that the articles have to be marked as "related to") to showcase them in this liftup
  • At last, click on "Save"
  • Now the component shows all the events that you have chosen by tags/filters
  • If the relevant events are not showing, they might be lacking information (category / primary tags / secondary tags / relates to)

Back to aalto.fi guidelines

Article liftup - events

Social media

Social media component includes a title, a text piece and external URLs to social media channels. You can edit the title and text to fit your page. Example below.

Follow us

Stay tuned with our latest news by following our social media channels

Horizontal divider

Horizontal divider can be used to separate two text paragraphs with a horizontal line. Below is an example of a horizontal divider. 

Quicklinks

Quicklinks can be used to offer 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.

In Quicklinks, always use 3 links, the component won't work with less or more. Only use this component once per page. Below, you can find an example of Quicklinks component.

The icons (small yellow images) can be found at aalto.fi. Find the best icon for your need: add image to your quicklink item – you'll find all icon options by typing: "icon". There are currently 30 different icons.

Single liftups

Single liftups present another internal website through the main image and lead text. Single liftups have three possible display modes: small, medium and large. Below are examples of these.

Single liftup sizes

Automatic research output

This can be used if you want to add research outputs on your page, for example a research group's outputs. 

Find the instructions here

HUB description

HUB description presents the HUB with a text piece and an image. It can have two sizes: medium and large. This component is only used in HUBs. The image below presents the two size options. 

Example of HUB description component: medium
Example of HUB description component: large

Hero magazine

Hero magazine is used only as main image on aalto.fi front page and landing pages for the Aalto schools.

Keep the title engaging and short.

Hero Magazine

People liftups

If you want to add certain research group's members, take a look at the guide:

Research group: how to create and how you can add your research group members to a page by creating an automatic feed?

Department's people

It's easy to add department's personnel by using People liftups component. Here's an example on how to do it:

  1. Log in to Aalto People and find the department's page
  2. Copy from the URL the department's ID number (take a look at the picture below): 47178
example – People liftups, departments

3. Go to new aalto.fi. Add the component People liftups and paste the ID number to the field: Aalto People organisational unit ID:

example 2 – people liftups, departments

4. Finally, click on "Save" and the department's people liftups component should be ready:

example 3 – people liftups, departments

Adding people one by one

You can add contact details of Aalto University people if their contact details are available on Aalto People database: use People Liftups component, click on "Select profiles", type in the surname of the person and click on "Apply". After selecting the person, you can add more contact details:

Get to know some of our Aalto University people:

Kati Hagros

Kati Hagros

IT Services
Chief Digital Officer
Jaakko Salavuo

Jaakko Salavuo

Communications Services
Communications Director
Robert Salven

Robert Salven

Communications Services
Senior Manager, Digital Communications
This service is provided by:

Communications Services

Did you find what you were looking for? If not, please contact us.