Share function

The share function is located in the breadcrumb in desktop mode on regular pages. The choices are to share the page on Facebook, Twitter or LinkedIn, as well as to request the page URL. The share function and the breadcrumbs do not appear when the page width is less than 992px. The link shared via the share function in the breadcrumb refers to the URL displayed in the address field.

 


The share function in the breadcrumb.

 


The share function after the icon is clicked and the right-to-left animation is complete. The animation moves the share icon to the left at the same time that the icons become visible. When the share function is closed, the animation runs in reverse.

Text/icon color: White
Hex: FFFFFF
Font: Helvetica Neue
Font weight: 400
Font size: 1.125rem
Line spacing: 1.25rem
Background color: G5
Hex: 204440

 

On calendar listing pages, the share links are displayed with each calendar event in a slightly different color. Since they are displayed in an accordion menu, the share links are displayed in open mode in order to save the user some clicks. The link shared via this share function refers to the URL of the respective calendar event page.


The share function on the calendar listing page.

Text/icon color: G5
Hex: 204440
Font: Helvetica Neue
Font weight: 200
Font size: 1.125rem
Line spacing: 1.25rem
Background color: T1
Hex: F9F0E4

In addition, the share function is located below the content on calendar and news pages. The link shared via these share functions refers to the URL of each page.


The share button before it has been clicked.

Text/icon color: G3.1
Hex: 367551

 


The share function after the icon is clicked and the right-to-left animation is complete. The animation here appears as a 2px wide vertical green line that moves from left to right, while allowing the icons to appear. The line disappears once it has reached the far right side. The animation when the share function is closed is the reverse.

 

Like function

The like function appears on news blocks and news listing pages.

When a user clicks on the thumb, it gives a thumbs-up and the number is the circle rises by one.


The like function in a news block.

 


The like function after a user has clicked on the thumb and liked in article in the news block. It is a two-part animation: the thumb turns up, while at the same time the first number in the circle changes to an ellipsis before reappearing, this time one number higher (unless the user has already liked the article).

Text/icon color: G5
Hex: 204440
Font: Helvetica Neue
Font weight: 200
Font size: 12px
Line spacing: 18px
Background color: T1
Hex: F9F0E4

 

This is how links appear on news listing pages.


This is how the like function appears on news listing pages.

 


The animation is the same as above on the news listing page.

 

Search

The icon in the mega menu or the search page are used to reach the search function.

Clicking on the icon in the mega menu causes the search box to roll down and fill the entire screen or a large portion of it.


The search box is reached by clicking on the magnifying glass on the far right in the mega menu.

Icon color: G5
Hex: 6A6A6A
Hover color: B1
Hover hex: 00205B
Font: Scaicons
Font weight: 400
Font size: 24px
Line spacing: 1rem
Background color hex: F9FAF9

 


The search box and mega menu are the only things visible on the page after the magnifying glass in the mega menu has been clicked on. Now an X appears in the place of the magnifying glass to indicate that this is where to close the search function. If the user moves the mouse cursor outside the light green area, the cursor appears as an X and the user can close the search box.

The search function:
Background tile: G1
Background tile hex: DEEDE4

The search icon:
Icon color: G1
Hex: DEEDE4
Height: 75px;
Width: 75px;
Font: IcoMoon
Font weight: 400
Font size: 28px
Line spacing: 40px
Background: G3
Hex: 44986B

 


Suggested search terms appear in a list below the free text field.

Suggested search terms:
Text color: G5
Hex: 204440
Font: Helvetica Neue
Font weight: 400
Font size: 25px
Line spacing: 1.2rem
Background hex: F9FAF9

 

On the search page, the search box appears below the mega menu, with search results below the box. Clicking on search causes a “loading” icon to appear below the search box before the search results are loaded.


The search box is now continually displayed above the search results. Typing something into the search box still produces suggested search terms.

 


The dark blue part of the circle rotates clockwise inside the grayer part of the circle. The circle disappears when the new search result is finished loading.

 

The search results are loaded in a list where the search term/phrase for each hit is indicated with the color G3. SCA Green. This makes it easier for the user to see the context in which the search term/phrase appears (see the example below). Users may also choose to sort the search result according to the type of hit, either website pages or contacts. If a search produces a large number of hits, only the first ten hits load. The user has to expand the remaining hits by clicking on the “show more” button.

 

The contact search page has a slightly different color scheme.


The color fill here is darker green and the icon becomes inverted.

The search function:
Background tile: G3
Background tile hex: 44986B

The search icon:
Icon color: G3
Hex: 44986B
Height: 75px;
Width: 75px;
Font: IcoMoon
Font weight: 400
Font size: 28px
Line spacing: 40px
Background: G1
Hex: DEEDE

 

The browse function

Browsing functionality is used in certain types of blocks. It has two variants, horizontal and vertical browsing.

In the case of horizontal browsing, arrows are located at the bottom edge, with circle indicators centered below that display the number of elements available for browsing. Clicking on the arrows or circles causes the next element to be displayed. It is also possible to drag the content of the block to display the next element.

 


Moving the mouse cursor over the arrows causes them to extend a bit. When switching between elements, the color in the circles moves from white to transparent on the selected circle, and vice versa on the next one.

 

In the case of vertical browsing, the arrows are located at the left/ride edge, with circle indicators centered on the same page that display the number of elements. Clicking on the arrows or circles causes the next element to be displayed. It is also possible to drag the content of the block to display the next element.

 


Moving the mouse cursor over the arrows causes them to extend a bit. When switching between elements, the color in the circles moves from white to transparent on the selected circle, and vice versa on the next one. In these blocks it is possible to choose to switch the image simultaneously or to have the same image for all elements in the block. You also choose whether the image will be on the left or right. The arrows and navigation are always located in the text block, while the heading is in the image block.

 

When the width is less than 992px, the image appears above the text and the arrows and navigation appear on the right side.

 

 

Accordion menu

Accordion menus display a large plus sign (+) on the right, which indicates that the content can be expanded. Once it has been expanded, which usually happens through a soft animation, a large minus sign (-) is displayed. The minus sign indicates that the content can be collapsed. There may be some exceptions.

Accordion menus are used in new blocks, contact lists, and in headers and footers in mobile mode to make space for a lot of content in a small space without the need to reload the page to display the content.

 


The news block has accordion menus in order to display/hide the introductions. The thumb is an image, while the number in a circle is text with a frame.

Text/border/icon color: G5
Hex: 204440
Font: Helvetica Neue
Font weight: 400
Font size: 12px
Line spacing: 18px
Background: G1
Hex: DEEDE4

 


The introduction is opened by clicking on a plus sign (+), while at the same time any open introductions are closed and completely removed. If there is no open introduction, a brief bit of the introduction for each news item is displayed.

 


Accordion menus are also used in contact listing blocks. In this case the plus sign (+) appears on the left.

 


When a level is opened, the next levels are displayed.

 


The contact cards under the department are displayed here.

 


When you expand a contact card, the background color of the heading changes. The size and color of the heading change, while at the same time the information is displayed below and a small unobtrusive green arrow comes down under the heading box, which is now green. Closing a contact card with the X restores its appearance without animation. If you open other contact cards, the previous cards are not closed.

The contact card in expanded mode:

Heading:
Text color: White
Hex: FFFFFF
Font: Helvetica Neue
Font weight: 700
Font size: 18px
Line spacing: 22px
Background: G3
Hex: 44986B

The icon:
Font: IcoMoon
Font weight: 400
Font size: 22px
Line spacing: 22px

 

The download button

The download button is primarily used in file lists and image banks on the website. See below for an example:

 


Text color: G5. Dark green
Hex: 204440
Font: scaicons2
Font weight: 400
Font size: 1.75rem