Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus felis nibh, tincidunt eget fermentum at, accumsan sit amet dolor. Donec vitae feugiat leo, a venenatis urna. Nulla lacinia urna sit amet erat mollis imperdiet.
login
Share
Basic elements
The Grid
All NLB Group websites use Twitter Bootstrap. It is a 12 column grid system, built to adjust to devices of all sizes.
1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
8
4
6
6
12
Media queries
The following media queries in our Less files are used to create the key breakpoints within our grid system.
/* desktop 1170px and up*/
/* default styles */
/* tablet lansdcape / desktop, 970px to 1170px */
@media screen and (max-width: @screen-md-max) { ... }
/* tablet portrait, 768px to 970px) */
@media screen and (max-width: @screen-sm-max) { ... }
/* mobile, up to 768 */
@media screen and (max-width: @screen-xs-max) { ... }
/* default styles */
/* tablet lansdcape / desktop, 970px to 1170px */
@media screen and (max-width: @screen-md-max) { ... }
/* tablet portrait, 768px to 970px) */
@media screen and (max-width: @screen-sm-max) { ... }
/* mobile, up to 768 */
@media screen and (max-width: @screen-xs-max) { ... }
Grid values
| Variable | Default value | Description |
|---|---|---|
| @grid-columns | 12 | število stolpcev |
| @grid-gutter-width | 30px | prazen prostor med stolpci |
Color system
Basic colors pantone
| #26007D | |
| #464461 | |
| #595478 | |
| #7A7594 | |
| #C24300 | |
| #E03C31 | |
| #F9662B | |
| #FCE284 | |
| #8DB917 | |
| #BEE38A | |
| #D0EBAB | |
| #D1E3A2 | |
| #DDEAB9 | |
| #333333 | |
| #444444 | |
| #464646 | |
| #666666 | |
| #666C72 | |
| #A3A3A3 | |
| #CDCECF | |
| #D1D1D1 | |
| #DDDDDD | |
| #F2F3F4 | |
| #FFFFFF |
Backgrounds
| #595478 | |
| #666666 | |
| #D1D1D1 | |
| #8DB917 |
Button colors
| #26007D | |
| #595478 | |
| #7A7594 | |
| #666666 | |
| #F9662B |
Color exceptions
| #AFDAF3 | uporablja samo na pravnih/korpo straneh | |
| #D0E9F7 | uporablja samo na pravnih/korpo straneh | |
| #D8ECF8 | uporablja samo na pravnih/korpo straneh | |
| #E7C8CD | uporablja samo na straneh fizičnih oseb |
Typography
The websites use free typography available at Google Fonts.
All titles use typeface Istok Web. (https://www.google.com/fonts/specimen/Istok+Web)
Istok Web Normal 400
Grumpy wizards make toxic brew for the evil Queen and Jack.
Istok Web Bold 700
Grumpy wizards make toxic brew for the evil Queen and Jack.
Block content uses typeface Roboto. (https://www.google.com/fonts/specimen/Roboto)
Roboto Normal 400
Grumpy wizards make toxic brew for the evil Queen and Jack.
Roboto Normal 400 Italic
Grumpy wizards make toxic brew for the evil Queen and Jack.
Roboto Light 300
Grumpy wizards make toxic brew for the evil Queen and Jack.
Roboto Light 300 Italic
Grumpy wizards make toxic brew for the evil Queen and Jack.
Roboto Bold 700
Grumpy wizards make toxic brew for the evil Queen and Jack
Please note: to display correctly on all browsers, the conversion of fonts into TTF, EOT, SVG or WOFF is needed.
You can download and install desktop version of Google Fonts via SkyFonts application (http://www.fonts.com/web-fonts/google).
Headings
| Heading H1 | Font size: 34px, Line height: 110%, Font weight: bold 700, Color: #26007D |
| Heading H2 | Font size: 30px, Line height: 110%, Font weight: bold 700, Color: #666666 |
| Heading H3 | Font size: 24px, Line height: 110%, Font weight: bold 700, Color: #666666 |
| Heading H4 | Font size: 20px, Line height: 110%, Font weight: bold 700, Color: #444444 |
| Heading H5 | Font size: 18px, Line height: 110%, Font weight: bold 700, Color: #444444 |
| Heading H1 | Font size: 28px, Line height: 110%, Font weight: bold 700, Color: #26007D |
| Heading H2 | Font size: 28px, Line height: 110%, Font weight: bold 700, Color: #666666 |
| Heading H1 | Font size: 30px, Line height: 110%, Font weight: bold 700, Color: #26007D |
| Heading H2 | Font size: 30px, Line height: 110%, Font weight: bold 700, Color: #26007D |
Content
| Paragraph p | Font size: 16px, Line height: 150%, Font weight: normal 400, Color: #464646 |
Emphasis
Emphases can be presented with an icon on the left hand side or without. When the icon is used, the text is vertically center aligned.
Emphasis with the icon
Font size: 17px, Line height: 160%, Font weight: light 300, Color: #464646
Icon color: #26007D
Emphasis without the icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus felis nibh, tincidunt eget fermentum at, accumsan sit amet dolor. Donec vitae feugiat leo, a venenatis urna. Nulla lacinia urna sit amet erat mollis imperdiet.
Font: Roboto, Font size: 17px, Line height: 150%, Font weight: light 300, Color: #464646
Small print
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus felis nibh, tincidunt eget fermentum at, accumsan sit amet dolor. Donec vitae feugiat leo, a venenatis urna. Nulla lacinia urna sit amet erat mollis imperdiet.
Etiam pellentesque lectus vitae viverra dictum. Donec porta diam at sem rhoncus gravida. Mauris risus dolor, ullamcorper nec aliquet quis, feugiat at nulla. Pellentesque lectus odio, viverra elementum felis dapibus, fringilla aliquet velit.
Font: Roboto, Font size: 14px, Line height: 150%, Font weight: normal 400, Color: #464646
Unordered list
All lists are aligned left – in line with the rest of the content.
Example 1
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
Example 2
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #464646
Ordered list
All lists are aligned left – in line with the rest of the content.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
Font: Roboto, Font size: 16px, Font weight: normal 400, Color: #464646