login
Share
Text layout
A thin grey line divides tabs from the content.
Border
Thickness: 1px, Color: #B4B4B4
Height of tabs: 44px
Tab - selected
Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #444444
Borderline
Thickness: 1px Color: #B4B4B4
Tab - unselected
Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #26007D
No borderline
Border:
Thickess: 1px, Color: #B4B4B4
Height of tabs: 44px
Tab - selected
Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #444444
Borderline
Thickess: 1px, Color: #B4B4B4
Tab - unselected
Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #26007D
No borderline
Height: 48px
Button - inactive
Font: Roboto, Font size: 18px, Font weight: normal 400, Font color: #FFFFFF, Button color: #F9662B, Shadow #000000 20%
Gumb – aktiven
Pisava: Roboto, Velikost pisave: 18px, Teža pisave: normal 400, Barva pisave: #FFFFFF, Barva gumba: #DD4500, Senca #000000 20%
Height: 40px
Button - inactive
Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF, Button color: #F9662B, Shadow #000000 20%
Button - active
Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF, Button color: #DD4500, Shadow #000000 20%
Height: 40px
Button - inactive
Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF, Button color: #595478, Shadow #000000 20%
Button - active
Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF, Button color: #464461, Shadow #000000 20%
Height: 40px
Button - inactive
Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF, Button color: #7A7594, Shadow #000000 20%
Button - inactive
Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF, Button color: #464461, Shadow #000000 20%
Height: 40px
Button - inactive
Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF, Button color: #666666, Shadow #000000 20%
Button - active
Font: Roboto, Font size: 16px, Font weight: normal 400, Font color: #FFFFFF, Button color: #444444, Shadow #000000 20%
Height: 38px
Button - inactive
Font: Roboto, Font size: 15px, Font weight: normal 400, Font color: #FFFFFF, Button color: #26007D
Height: 38px
Button - inactive
Font: Roboto, Font size: 15px, Font weight: normal 400, Font color: #FFFFFF, Button color: #595478
Links in text
Link - inactive
Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #464646, underline
Link - active
Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #464646
Link - inactive
Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #26007D
Link - active
Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #464646
Links to other websites
Links, leading to other websites, are designed differently – with an icon displayed to the right of the link.
Link - inactive
Font: Roboto, Color: #26007D
Icon color: #26007D
Link - active
Font: Roboto, Color: #464646
Icon color: #464646
Links to other websites in an unordered list
Links to other websites in an unordered list are accompanied by an icon on their left side.
Link - inactive
Font: Roboto, Font size: 17px, Font weight: light 300, Color: #464646, underline
Icon color: #A7A9AC
Link - active
Font: Roboto, Font size: 17px, Font weight: light 300, Color: #464646
Icon color: #A7A9AC
Link - inactive
Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF, underline
Link - active
Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF
Links under text
Stressed text links under longer pieces of text.
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
Links to documents
Link - inactive
Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF, underline
Icon color: #FFFFFF
Link - active
Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #FFFFFF
Icon color: #FFFFFF
Advice tags
Button - inactive
Font: Roboto, Font size: 14px, Font weight: light 300, Line height: 110%, Color: #FFFFFF
Background color: #595478
Button - active
Font: Roboto, Font size: 14px, Font weight: light 300, Line height: 110%, Color: #FFFFFF
Background color: #464461
Content sharing
Content syndication is enabled through the responsive plugin http://www.addthis.com/?r=0
Expandable content
Product description
Button - inactive
Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #26007D
Icon color: #26007D
Button - active
Font: Roboto, Font size: 17px, Font weight: normal 400, Color: #26007D
Icon color: #26007D
Content list accordion
Title - inactive
Font: Roboto, Font size: 18px, Font weight: medium 500, Line height: 130%, Color: #444444
Icon color: #26007D
Lines
Thickness: 1px, Color: #CDCECF
Title - active
Font: Roboto, Font size: 18px, Font weight: medium 500, Line height: 130%, Color: #26007D
Title - selected
Font: Roboto, Font size: 18px, Font weight: medium 500, Line height: 130%, Color: #26007D
Q & A
Title - inactive
Font: Roboto, Font size: 18px, Font weight: medium 500, Line height: 130%, Color: #444444
Icon color: #26007D
Lines
Thickness: 1px, Color: #9B98AE
Title - active
Font: Roboto, Font size: 18px, Font weight: medium 500, Line height: 130%, Color: #26007D
Title - selected
Font: Roboto, Font size: 18px, Font weight: medium 500, Line height: 130%, Color: #26007D
Example: http://www.nlb.si/placilni-promet-s-tujino
List of questions and answers
Title
Font: Istok Web, Font size: 22px, Font weight: bold 700, Line height: 110%, Color: #444444
Link - inactive
Font: Roboto, Font size: 16px, Font weight: light 300, Line height: 180%, Color: #26007D
Link - active
Font: Roboto, Font size: 16px, Font weight: light 300, Line height: 180%, Color: #464646
Separators between links
Color: #A5A9AC
Example: http://www.nlb.si/ponudba
Product listing
Title - inactive
Font: Istok Web, Font size: 26px, 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
Background - inactive
Background color: #C6C4D2
Arrow color: #8D88A6
Title - active
Font: Istok Web, Font size: 26px, 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
Background - active
Background color: #8D89A5
Arrow color: #FFFFFF
Title - inactive
Font: Istok Web, Font size: 26px, Font weight: bold 700, Line height: 110%, Color: #FFFFFF
Text - inactive
Font: Roboto, Font size: 16px, Font weight: light 300, Line height: 140%, Color: #FFFFFF
Background - inactive
Background color: #8D89A5
Arrow color: #FFFFFF
Title - active
Font: Istok Web, Font size: 26px, 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
Background - inactive
Background color: #595478
Arrow color: #FFFFFF
Product listing - B2B
Title - inactive
Font: Istok Web, Font size: 26px, Font weight: bold 700, Line height: 110%, Color: #FFFFFF
Text - inactive
Font: Roboto, Font size: 15px, Font weight: light 300, Line height: 140%, Color: #FFFFFF
Background - inactive
Background color: #2D5DAC, Arrow color: #FFFFFF
Background - active
Background color: #1D3D72, Arrow color: #8D88A6
Title - inactive
Font: Istok Web, Font size: 26px, Font weight: bold 700, Line height: 110%, Color: #464646
Text - inactive
Font: Roboto, Font size: 16px, Font weight: light 300, Line height: 140%, Color: #464646
Background - inactive
Background color: #B4D9F2, Arrow color: #2D5DAC
Title - active
Font: Istok Web, Font size: 26px, 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
Background - active
Background color: ##2D5DAC, Arrow color: #FFFFFF
Example: http://www.nlb.si/poslovni-racuni