Parts of the header

The header is located at the top of all pages of the website, and it consists of three main components: the home button, mega menu and secondary menu. You can read more about all parts and elements related to the header below.

 


The header has a specific light gray color fill (hex: F9FAF9), and a dark gray bar (hex: dbdbdb) is used to separate the mega and secondary menus.

 


The header has a different layout for mobile devices/tablets.

 

The home button


Maximum logo width: 90px
Maximum logo height: 29px

The home button is located on the left side of the header, and it has SCA’s tricolor logo as a relevant design element. The button brings the user back to the home page. The home button is always located in the same place, regardless of device and screen resolution. At lower resolutions the home button is smaller to match the rest of the layout.

 

The mega menu on the desktop

The mega menu is the website’s overall navigation tool. It has a search function. Read more about the search function on page Functions.

 


This image shows part of the mega menu when it is expanded.

 

Design elements

The mega menu has several design elements. The formatting of each element is described below.

 


Text color: B1
Hex: 00205b
Font: Helvetica Neue
Font weight: 200
Font size: 1rem
Line spacing: 1rem

 


Text color: White
Hex: FFFFFF
Font: Helvetica Neue
Font weight: 200
Font size: 1.125rem
Line spacing: 1.4375rem
Placement: Left-aligned
Color fill: B1
Hex: 00205B

 


Text color: B1
Hex: 00205B
Font: Helvetica Neue
Font weight: 700
Font size: 1.125rem
Line spacing: 1.4375rem
Placement: Left-aligned

 


Text color: B1
Hex: 00205B
Font: Helvetica Neue
Font weight: 200
Font size: 1.125rem
Line spacing: 1.4375rem
Placement: Left-aligned

 


Text color: B1
Hex: 00205B
Font: Scaicons
Font weight: 400
Font size: 32px
Line spacing: 1

 

Specific formatting for the link to My SCA (Mitt SCA) in the mega menu.


Text color: G3
Hex:44986B
Font: Helvetica Neue
Font weight: 200
Font size: 1rem
Line spacing: 1rem

 

Animation

There is a type of animation that is used on all links in the entire mega menu. How it works is explained below.

 


When the user moves the mouse cursor over the link, this activates an animation where a line becomes thicker while moving down, and then moves under the link 

 

The mega menu on mobiles/tablets

On mobile devices/tables, the mega menu has a different appearance which is better suited to these types of devices.

 


The mega menu is expanded by clicking on the icon on the far right of the image.


In mobile mode, the content is organised into a long vertical list where various users can expand content using a plus button, and collapse the same content using a minus button.

 

 

Design elements

 


Text color: B1
Hex: 00205B
Font: Helvetica Neue
Font weight: 700
Font size: 1.125rem
Line spacing: 1.25rem
Placement: Left-aligned

 


Text color: B1
Hex: 00205B
Font: Helvetica Neue
Font weight: 200
Font size: 1.125rem
Line spacing: 1.625rem
Placement: Left-aligned

 


Text color: G3
Hex: 44986Bd
Font: Helvetica Neue
Font weight: 400
Font size: 1.125rem
Line spacing: 1.625rem
Placement: Left-aligned

 


Icon color: B1
Hex: 00205B
Font: IcoMoon
Font weight: 400
Font size: 20px
Line spacing: 50px

 

The secondary menu on the desktop

The secondary menu is located above the mega menu. It contains four links to specifically selected areas on the website, as well as the language selection function. The areas of Sustainability, Investors and Media are also located in the mega menu.

 

Design elements

 


Text color: Dark gray
Hex: 6A6A6A
Font: Helvetica Neue
Font weight: 200
Font size: 14px
Line spacing: 18px
Placement: Left-aligned

 


Text color: Dark gray
Hex: 6A6A6A
Font: Helvetica Neue
Font weight: 200
Font size: 14px
Line spacing: 18px
Placement: Left-aligned

 


Maximum width: 18px
Maximum height: 18px
Icon color: N2
Hex: 696969

 

Animation

The user clicks on the button that looks like a globe to select a language. This button is located at the top right corner of the site. A menu with the various language options for the website expands horizontally from the button.

 


The user clicks on the globe to display the available language options.

 


The language choices slide outward from the globe from right to left. The globe is then replaced by an X icon that closes down the menu if no language is selected. The language choices slide back in toward the globe from left to right when this section is closed.

 

The secondary menu on mobiles/tablets

The secondary menu alters its position and appearance when the website visitor is using a mobile device or tablet. The secondary menu moves from a position above the mega menu to under the mega menu on these devices.

 

 

The language section has a plus button to expand all of the options. This menu is then collapsed by clicking on the minus button, as in the image below:

 

The section for the four specifically selected areas is located at the bottom of the menu, with arrows as their associated design elements.

Clicking on any of the links for the four specifically selected areas activates an animation. The arrow belonging to the link that was clicked lengthens and extends outward to the right. See the example below:

 

Design elements

 


Text color: B1
Hex: 00205B
Font: Helvetica Neue
Font weight: 200
Font size: 1.25rem
Line spacing: 1.625rem
Placement: Left-aligned

 


Text color: B1
Hex: 00205B
Font: Helvetica Neue
Font weight: 200
Font size: 1rem
Line spacing: 1.25rem
Placement: Left-aligned

 


Maximum width: 24px
Maximum height: 24px

Icon color: N2
Hex: 696969