home Strategy Symbol Corporate communications Communication identity Cards Business buildings digital Manuals
jezik / language
Slovenščina English
Share

Layout elements

Header with a photo

The introductory element on each product page consists of the header with a photo and the USP bar.

1/3 of the header is covered by Main header with lead text and a big call-to-action button. The photo is in the background. The main motif is on the right side of the image.

The whole width of the images’ lower edge is covered by a partly transparent green bar presenting the main sales points of the product (more in the chapter USP bar).

USP bar

The USP bar can hold at least two or at most three main product sales points. The recommended length of the description of each sales point is no more than 100 characters (spaces included).

DesktopTabletMobile phone


Background color: #8DB917, opacity 90%,

Font: Roboto, Font size: 17px, Font weight: normal 400, Line height: 140%, Color: #FFFFFF


Background color: #8DB917, opacity 90%,

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 140%, Color: #FFFFFF


Background color: #8DB917, opacity 90%,

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 140%, Color: #FFFFFF

The referral bar

Referral bar holds information that leads the visitor into the sales funnel. The bar must not be higher than 600 px.


3-column referral bar with 3 steps

DesktopTabletMobile phone


Main title

Font: Istok Web, Font size: 34px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Steps

Font: Roboto, Font size: 28px, Font weight: normal 400, Color: #FFFFFF

Subtitle

Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 140%, Color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)


Main title

Font: Istok Web, Font size: 28px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Steps

Font: Roboto, Font size: 28px, Font weight: normal 400, Color: #FFFFFF

Subtitle

Font size: 22px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 140%, Color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)

Main title

Font: Istok Web, Font size: 30px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Steps

Font: Roboto, Font size: 28px, Font weight: normal 400, Color: #FFFFFF

Subtitle

Font size: 22px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 140%, Color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)

3-column referral bar with two steps

DesktopTabletMobile phone


Main title

Font: Istok Web, Font size: 34px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 140%, Color: #FFFFFF

Small title

Font: Roboto, Font size: 16px, Font weight: bold 700, Line height: 110%, Color: #FFFFFF

Link in content - inactive

Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF, underline

Link in content – active

Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)


Main title

Font: Istok Web, Font size: 28px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 140%, Color: #FFFFFF

Small title

Font: Roboto, Font size: 16px, Font weight: bold 700, Line height: 110%, Color: #FFFFFF

Link in content - inactive

Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF, underline

Link in content - active

Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)

Main title

Font: Istok Web, Font size: 30px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 140%, Color: #FFFFFF

Small title

Font: Roboto, Font size: 16px, Font weight: bold 700, Line height: 110%, Color: #FFFFFF

Link in content - inactive

Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF, underline

Link in content - active

Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)

Referral bar with no Call-to-action buttons

DesktopTabletMobile phone


Main title

Font: Istok Web, Font size: 34px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 140%, Color: #FFFFFF

Link - inactive

Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #FFFFFF, underline

Link - active

Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #FFFFFF

Separator between links

Height: 1px, Color: #ACAABC

Background color: #595478


Main title

Font: Istok Web, Font size: 28px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 140%, Color: #FFFFFF

Link - inactive

Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #FFFFFF, underline

Link - active

Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #FFFFFF

Separator between links

Width: 1px, Color: #ACAABC

Background color: #595478

Main title

Font: Istok Web, Font size: 30px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 140%, Color: #FFFFFF

Link - inactive

Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #FFFFFF, underline

Link - active

Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #FFFFFF

Separator between links

Width: 1px, Color: #ACAABC

Background color: #595478

2-column referral bar

DesktopTabletMobile phone


Main title

Font: Istok Web, Font size: 34px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Small title

Font: Roboto, Font size: 16px, Font weight: bold 700, Line height: 110%, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 150%, Color: #FFFFFF

Unordered list

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 130%, Color: #FFFFFF

Link in content - inactive

Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF, underline

Link in content - active

Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF

Link to .pdf document - inactive

Icon color: #FFFFFF, Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF, underline

Link to .pdf document - active

Icon color: #FFFFFF, Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF

Background color: #595478
 

Call-to-action button (see chapter on Call-to-action buttons in content)

Plain button (see chapter on Plain buttons)


Main title

Font: Istok Web, Font size: 28px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Small title

Font: Roboto, Font size: 16px, Font weight: bold 700, Line height: 110%, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 150%, Color: #FFFFFF

Unordered list

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 130%, Color: #FFFFFF

Link in content - inactive

Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF, underline

Link in content - active

Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF

Link to .pdf document - inactive

Icon color: #FFFFFF, Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF, underline

Link to .pdf document - active

Icon color: #FFFFFF, Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)

Plain button (see chapter on Plain buttons)

Main title

Font: Istok Web, Font size: 30px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Small title

Font: Roboto, Font size: 16px, Font weight: bold 700, Line height: 110%, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 150%, Color: #FFFFFF

Unordered list

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 130%, Color: #FFFFFF

Link in content - inactive

Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF, underline

Link in content - active

Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF

Link to .pdf document - inactive

Icon color: #FFFFFF, Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF, underline

Link to .pdf document - active

Icon color: #FFFFFF, Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)

Plain button (see chapter on Plain buttons)

Referral bar with no separator

DesktopTabletMobile phone


Main title

Font: Istok Web, Font size: 34px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 150%, Color: #FFFFFF

Unordered list

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 130%, Color: #FFFFFF

Link - inactive

Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #FFFFFF, underline

Link – active

Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)


Main title

Font: Istok Web, Font size: 28px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 150%, Color: #FFFFFF

Unordered list

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 130%, Color: #FFFFFF

Link – inactive

Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #FFFFFF, underline

Link - active

Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)

Main title

Font: Istok Web, Font size: 30px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 150%, Color: #FFFFFF

Unordered list

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 130%, Color: #FFFFFF

Link - inactive

Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #FFFFFF, underline

Link - active

Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)

Referral bar with two steps

DesktopTabletMobile phone


Main title

Font: Istok Web, Font size: 34px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Steps

Font: Roboto, Font size: 28px, Font weight: normal 400, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 150%, Color: #FFFFFF

Unordered list

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 130%, Color: #FFFFFF

Background color: #595478


Main title

Font: Istok Web, Font size: 28px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Steps

Font: Roboto, Font size: 28px, Font weight: normal 400, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 150%, Color: #FFFFFF

Unordered list

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 130%, Color: #FFFFFF

Background color: #595478

Main title

Font: Istok Web, Font size: 30px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Steps

Font: Roboto, Font size: 28px, Font weight: normal 400, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 150%, Color: #FFFFFF

Unordered list

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 130%, Color: #FFFFFF

Background color: #595478

Referral bar with 2 steps and a call-to-action button

DesktopTabletMobile phone


Main title

Font: Istok Web, Font size: 34px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Steps

Font: Roboto, Font size: 28px, Font weight: normal 400, Color: #FFFFFF

Small title

Font: Roboto, Font size: 16px, Font weight: bold 700, Line height: 110%, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 150%, Color: #FFFFFF

Unordered list

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 130%, Color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)


Main title

Font: Istok Web, Font size: 28px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Steps

Font: Roboto, Font size: 28px, Font weight: normal 400, Color: #FFFFFF

Small title

Font: Roboto, Font size: 16px, Font weight: bold 700, Line height: 110%, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 150%, Color: #FFFFFF

Unordered list

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 130%, Color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)

Main title

Font: Istok Web, Font size: 30px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Subtitle

Font: Istok Web, Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #FFFFFF

Steps

Font: Roboto, Font size: 28px, Font weight: normal 400, Color: #FFFFFF

Small title

Font: Roboto, Font size: 16px, Font weight: bold 700, Line height: 110%, Color: #FFFFFF

Content

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 150%, Color: #FFFFFF

Unordered list

Font: Roboto, Font size: 16px, Font weight: normal 400, Line height: 130%, Color: #FFFFFF

Background color: #595478


Call-to-action button (see chapter on Call-to-action buttons in content)

Referral bar - B2B

Graphic elements, typography, and layout on different screen sizes for B2B are the same as in the examples shown above. Only the colour background has been changed.
 


 

Background

Background color: #2D5DAC

Example: https://www.nlb.si/depozit-za-podjetje

Footer

The footer on NLB Group websites changes with the purpose of the respective website. A thing line of NLB blue separated the footer form the rest of the content. Separate parts of the footer are divided by a thin grey line. The background is generally white.

DesktopTabletMobile phone


Footer

Border top: Thickness: 5px, Border color: #26007D, Background color: #FFFFFF

Titles

Font: Roboto, Font size: 15px, Font weight: regular 400, Color: #464646

Links

Font: Roboto, Font size: 15px, Font weight: light 300, Color: #464646

Links in the middle

Font: Roboto, Font size: 14px, Font weight: normal 400, Color: #a3a3a3

Links at the bottom

Font: Roboto, Font size: 14px, Font weight: normal 400, Color: #FFFFFF
Background color: #26007D

Buttons (see chapter Buttons in footer)


 


 

Footer

Border top: Thickness: 5px, Border color: #26007D, Background color: #FFFFFF

Titles

Font: Roboto, Font size: 15px, Font weight: regular 400, Color: #464646

Links

Font: Roboto, Font size: 15px, Font weight: light 300, Color: #464646

Links in the middle

Font: Roboto, Font size: 14px, Font weight: normal 400, Color: #a3a3a3

Links at the bottom

Font: Roboto, Font size: 14px, Font weight: normal 400, Color: #FFFFFF
Background color: #26007D

Buttons (see chapter Buttons in footer)

Footer

Border top: Thickness: 5px, Border color: #26007D, Background color: #FFFFFF

Titles

Font: Roboto, Font size: 15px, Font weight: regular 400, Color: #464646

Links

Font: Roboto, Font size: 15px, Font weight: light 300, Color: #464646

Links in the middle

Font: Roboto, Font size: 14px, Font weight: normal 400, Color: #a3a3a3

Links at the bottom

Font: Roboto, Font size: 14px, Font weight: normal 400, Color: #FFFFFF
Background color: #26007D

Buttons (see chapter Buttons in footer)

Copyright © 2024 NLB d.d.   |   Piškotki