UPM Style Guide for Digital

Content highlights

Introduction

Content highlight components are designed to present various information types uniformly throughtout UPM businesses and web sites. These information types include call-to-actions, contact information, event information, product information and different listings. The content highlights have hard-coded but optional fields so they offer flexibility in their use. The content highlights use standard aspect ratio of 16:9.

 

Content

 

Contact

 

Event

 

Call-to-action

 

Other

 

Horizontal 50/50 content cards provide an effective way to drive attention to the chosen content

Preferably use only one large 50/50 horizontal content card in a view to keep the look calmful. You can choose to have the image on the right or left. Button of the 50/50 card informs the user about possibility to navigate to the content.

 

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
 

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
 
 

Choose the number of colums (2 or 3) for desktop regarding the amount of highlights presented

You can modify content cards to have a button if you think it is necessary to inform user which action triggers when one clicks the card. However, be consistent. Don’t mix the cards with buttons with the cards without. If you manually create the texts for the cards, try to make the length of the copy consistent.

 
This is the title of the card. Keep the title and the body text succinct where possible
Type of the Highlight | 11/17/2020 22:00:00

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
This is the title of the card. Keep the title and the body text succinct where possible
Type of the Highlight | 11/17/2020 22:00:00

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
 
 

Use correct safe areas around the text and the button (if included) when presenting the cards on light grey background

This is the title of the card. Keep the title and the body text succinct where possible
Type of the Highlight | 11/17/2020 22:00:00

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
This is the title of the card. Keep the title and the body text succinct where possible
Type of the Highlight | 11/17/2020 22:00:00

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
This is the title of the card. Keep the title and the body text succinct where possible
Type of the Highlight | 11/17/2020 22:00:00

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
 
 

Manually defined cards present neither a date nor the type of the content

This is the title of the card. Keep the title and the body text succinct where possible

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
This is the title of the card. Keep the title and the body text succinct where possible

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
This is the title of the card. Keep the title and the body text succinct where possible

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
 
 

Use consistent photos when presenting multiple contact cards in a view

You may use the green business segment labels if you think the user needs that information.

Example Name
Business or function

Example Name

Director Tel. +358 (0)40 123 4567
Example Name
Business or function

Example Name

Manager Tel. +358 (0)40 123 4567
Example Name
Business or function

Example Name

Specialist Tel. +358 (0)40 123 4567
Example Name
Business or function

Example Name

Assistant Tel. +358 (0)40 123 4567
 
 

If the cards are on white background, choose a card with text aligned with the photo

In some cases you dont want to reveal contact details, but instead provide a link to more comprehensive description of the person. This may be the case with the executives or board members.

Example name

Example name

Director Biographical details
Example name

Example name

Manager Biographical details
Example name

Example name

Specialist Biographical details
Example name

Example name

Assistant Biographical details
 
 

Lift ups in background color block

This is the title of the card. Keep the title and the body text succinct where possible
Type of the Highlight | 11/17/2020 22:00:00

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
This is the title of the card. Keep the title and the body text succinct where possible
Type of the Highlight | 11/17/2020 22:00:00

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
This is the title of the card. Keep the title and the body text succinct where possible
Type of the Highlight | 11/17/2020 22:00:00

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
 
 
 

Lift ups in background image block

This is the title of the card. Keep the title and the body text succinct where possible
Type of the Highlight | 11/17/2020 22:00:00

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
This is the title of the card. Keep the title and the body text succinct where possible
Type of the Highlight | 11/17/2020 22:00:00

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
This is the title of the card. Keep the title and the body text succinct where possible
Type of the Highlight | 11/17/2020 22:00:00

This is the title of the card. Keep the title and the body text succinct where possible

Tertiary internal
 
 

Expanding card stacks used in the news and blog listings are always on the light grey background

Since this element uses huge area, it’s most often good decision to place expanding card stacks in the bottom of the page. Stacks with 3 columns should show 9 cards as default. More cards are shown after the user press the “Show more” button under the element. On mobile the cards are stacked vertically.