Advices and banners

Advice

Advice title page

The page is divided in a grid which represents different topics.

Part of the grid with images

Larger title - inactive

Font: Istok Web, Font size: 26px, Font weight: bold 700, Line height: 110%, Color: #444444, Background color: #FFFFFF, Opacity: 70%

Smaller title - inactive

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

Picture - inactive

Opacity: 100%

Background - inactive

Background color: #D1D1D1

Larger title - active

Font: Istok Web, Font size: 26px, Font weight: bold 700, Line height: 110%, Color: #FFFFFF, Background-color: #FFFFFF, Opacity: 0%

Smaller title - active

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

Photo - active

Opacity: 30%

Background - active

Background color: #A3A3A3

Part of the grid with icons

Title - inactive

Font: Roboto, Font size: 15px, Font weight: regular 400, Line height: 110%, Color: #FFFFFF

Icon - inactive

Color: #FFFFFF

Background - inactive

Background color: #A2C037

Background - active

Background color: #A2C037

Example: http://www.nlb.si/nasveti-osebno

Tablet

Part of the grid with images

Part of the grid with icons

Mobile phone

Part of the grid with images

Part of the grid with icons

Title image of a specific advice topic

Desktop Tablet Mobile phone

Desktop

Larger title - inactive

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

Stressed text - inactive

Font: Roboto, Font size: 18px, Font weight: light 300, Line height: 150%, Color: #444444

Smaller title - inactive

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

Content - inactive

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

Photo - inactive

Opacity: 100%

Background - inactive

Background color: #D1D1D1

Larger title - active

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

Stressed content - active

Font: Roboto, Font size: 18px, Font weight: light 300, Line height: 150%, Color: #FFFFFF

Smaller title - active

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

Text - active

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

Photo -active

Opacity: 30%

Background - active

Background color: #A3A3A3

Example: http://www.nlb.si/ustvarjam-dom

Tablet

Mobile phone

Advice on product pages

The advice on product pages can be presented with a picture or without. When a picture is used, it should adhere to the following dimensions: width: 360px, height: 200px.

Advice with a photo

Title - inactive

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

Background - inactive

Background color: #FFFFFF

Photo - inactive

Opacity: 100%

Title - active

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

Background - active

Background-color: #A3A3A3

Photo - active

Opacity: 30%

Advice with a photo and icon

Title - inactive

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

Background - inactive

Background-color: #FFFFFF

Icon

Icon color: #FFFFFF, Background color: #8DB917, Opacity: 90%

Background color: #8DB917

Photo - inactive

Opacity: 100%

Title - active

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

Icon

Icon color: #FFFFFF, Background color: #8DB917, Opacity: 90%

Background - active

Background color: #A3A3A3

Photo - active

Opacity: 30%

Advice with text

Title - inactive

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

Text - inactive

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

Background - inactive

Background color: #FFFFFF

Title - active

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

Text - active

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

Background - active

Background color: #A3A3A3

Banners

Banners for citizens and business users differ through the colors used (see chapter Color pantone exceptions).

There is a limit to the content that fits into one banner. When the banner displays an image, there is room for a one-line title (up to 26 characters) and 80 characters of text. If the title is two lines long there can only be 58 characters of text. If there is no image, a one-line title (up to 30 characters) can be accompanied by a text of 84 characters, while a title in two lines (60 characters) can only be accompanied by a text of 42 characters.

Example of a banner with a 1-line title

Example of a banner with a 2-line title

Example of a banner with a 1-line title

Example of a banner with a 2-line title

Banners for citizens

Banners with a picture

The width of the image can be 114px while the height is relevant to the height of the text.

Title - inactive

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

Text - inactive

Font: Roboto, Font size: 15px, Font weight: light 300, Line height: 130%, Color: #444444

Photo

Opacity: 100%

Background - inactive

Background color: #E7C8CD

Title - active

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

Text - active

Font: Roboto, Font size: 15px, Font weight: light 300, Line height: 130%, Color: #FFFFFF

Photo

Opacity: 30%

Background - active

Background color: #C97F8A

Text banners

Text - inactive

Font: Roboto, Font size: 15px, Font weight: light 300, Line height: 130%, Color: #444444

Title - inactive

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

Background - inactive

Background color: #E7C8CD

Text - active

Font: Roboto, Font size: 15px, Font weight: light 300, Line height: 130%, Color: #FFFFFF

Title - active

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

Background - active

Background color: #C97F8A

Banners for business users

Banners with a photo

The width of the image can be 114px while the height is relevant to the height of the text.

Title - inactive

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

Text - inactive

Font: Roboto, Font size: 15px, Font weight: light 300, Line height: 130%, Color: #444444

Photo

Opacity: 100%

Background - inactive

Background color: #B0DAF2

Title - active

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

Text - active

Font: Roboto, Font size: 15px, Font weight: light 300, Line height: 130%, Color: #FFFFFF

Photo

Opacity: 30%

Background - active

Background color: #62B5E5

Text banners

Text- inactive

Font: Roboto, Font size: 15px, Font weight: light 300, Line height: 130%, Color: #444444

Title - inactive

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

Background - inactive

Background color: #B0DAF2

Text- active

Font: Roboto, Font size: 15px, Font weight: light 300, Line height: 130%, Color: #FFFFFF

Title - active

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

Background - active

Background color: #62B5E5

Banners on the intro page for citizens/business users

If the title is one line long (up to 20 characters) the text should be not more than 76 characters long (3 lines). When the title is 2 lines long (up to 35 characters), the text should be no more than 54 characters long (2 lines).

Example of a banner with a 2-line title

Example of a banner with a 1-line title

Banner with a photo

Photo: 175px, height: 180px

Title - inactive

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

Text - inactive

Font: Roboto, Font size: 16px, Font weight: light 300, Line height: 140%, Color: #444444

Photo

Opacity: 100%

Background - inactive

Background color: #FFFFFF

Title - active

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

Text - active

Font: Roboto, Font size: 16px, Font weight: light 300, Line height: 140%, Color: #FFFFFF

Photo

Opacity: 30%

Background - active

Background color: #A3A3A3

Text banner

Title - inactive

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

Text - inactive

Font: Roboto, Font size: 16px, Font weight: light 300, Line height: 140%, Color: #444444

Photo

Opacity: 100%

Background - inactive

Background color: #FFFFFF

Title -active

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

Text - active

Font: Roboto, Font size: 16px, Font weight: light 300, Line height: 140%, Color: #FFFFFF

Photo

Opacity: 30%

Background - active

Background color: #A3A3A3