Style Guide

A complete guide to NBS styles and interface elements.

Container

We're using Bootstrap container and it's required when using our default grid system. Our .container is a mix between Bootstraps .container and .container-fluid. Our .container takes 100% of width on all breakpoints except xl and has extra padding on different breakpoints.

Breakpoint name	Container `max-width`	Container `padding` (right and left)
XS	100%	not yet set
SM	540px	not yet set
MD	720px	not yet set
LG	960px	not yet set
XL	1200px	not yet set

Grid system

We're using Bootstrap 4 grid system and flexbox utility so check the docs.

Do not modify anything on any grid component by adding extra CSS or adding any other class than column classes provided in the grid. IE: don't add .d-flex on a col to make the content inside vertically aligned. Add classes to column content and let the columns do the layout work.

Breakpoint name	XS	SM	MD	LG	XL
Breakpoint size	≥ 0	≥ 576px	≥ 768px	≥ 992px	≥ 1200px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`

Color utilities

For text color use class prefix .text- and for background color prefix .bg- followed by color name displayed below.

primary-1

primary-2

primary-3

primary-4

primary-5

primary-6

white

black

gray-1

gray-2

gray-3

gray-4

accent-1

accent-2

accent-3

Type utilities

Set font style properties and font alignment using utility classes.

Class	Example
Text transformation utilities
`.tt-lower`	Lowercase text
`.tt-upper`	Uppercase text
`.tt-cap`	Capitalize text
`.tt-none`	No text transformation
Font weight and style utilities
`.fw-normal`	Font weight normal
`.fw-bold`	Font weight bold
`.fw-light`	Font weight light
`.fs-normal`	Font style normal
`.fs-italic`	Font style italic
Alignment utilities (these utility classes have breakpoint modifiers, IE: `.ta-md-right`, `.ta-lg-center`, etc.)
`.ta-right`	Text align right
`.ta-center`	Text align center
`.ta-left`	Text align left
Font family utilities
`.ff-base`	Base font family

Link Stretched

Inspired by Bootstrap Stretched link utility. To use add .link-stretched to a link to make its ::after pseudo element stretch. The ::after element will stretch to fill the content's of the first parent element that has position: relative; property set.

The example is using grid columns which have position: relative; set by the grid framework so the "Read more" link will stretch to fill the whole column vertically and horizontally.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis tempore laborum culpa aliquam sunt magni obcaecati, fuga corrupti facilis. Sunt vero voluptatem deserunt obcaecati eligendi nemo sapiente perferendis. Veritatis, quidem?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora qui nesciunt mollitia vel aliquid sequi esse aperiam quibusdam, quis ad!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero quo nam ad tenetur inventore odit repudiandae eius repellat, quibusdam maxime assumenda iste voluptate. Minima voluptas suscipit modi, nam vitae veritatis.

Background Breakout

Add .breakout-bg class to break out of the .container.

The .breakout-bg creates a ::before pseudo element which has it's width stretched to 100% of the view port with width: 100vw and is centered with negative right and left margins in vw and adding 50% to right and left properties. Because vw doesn't include the scrollbar we have to add overflow-x: hidden; on the parent element otherwise when the page gets a vertical scrollbar it will also get an horizontal scrollbar.

For more info on this technique check this link.

For more info on the horizontal scrollbar issue check this link.

NOTE: The utility only creates the ::before element and set's background-color: inherit; property but it doesn't add any color. To add a background color use one of the color utilities or add the property in your CSS.

This content is boxed by the container.

Meanwhile Captain Bildad sat earnestly and steadfastly eyeing Queequeg, and at last rising solemnly and fumbling in the huge pockets of his broad-skirted drab coat, took out a bundle of tracts, and selecting one entitled "The Latter Day Coming; or No Time to Lose,' placed it in Queequeg's hands, and then grasping them and the book with both his, looked earnestly into his eyes, and said, "Son of darkness, I must do my duty by thee; I am part owner of this ship, and feel concerned for the souls of all its crew; if thou still clingest to thy Pagan ways, which I sadly fear, I beseech thee, remain not for aye a Belial bondsman. Spurn the idol Bell, and the hideous dragon; turn from the wrath to come; mind thine eye, I say; oh! goodness gracious! steer clear of the fiery pit!'

This content breaks out of the container and has the boxed layout restored which is why the text is aligned to the other elements that are not breaking out of the container.

Something of the salt sea yet lingered in old Bildad's language, heterogeneously mixed with Scriptural and domestic phrases.

"Avast there, avast there, Bildad, avast now spoiling our harpooneer,' cried Peleg. "Pious harpooneers never make good voyagers—it takes the shark out of 'em; no harpooneer is worth a straw who aint pretty sharkish. There was young Nat Swaine, once the bravest boat-header out of all Nantucket and the Vineyard; he joined the meeting, and never came to good. He got so frightened about his plaguy soul, that he shrinked and sheered away from whales, for fear of after-claps, in case he got stove and went to Davy Jones.'

"Peleg! Peleg!' said Bildad, lifting his eyes and hands, "thou thyself, as I myself, hast seen many a perilous time; thou knowest, Peleg, what it is to have the fear of death; how, then, can'st thou prate in this ungodly guise. Thou beliest thine own heart, Peleg. Tell me, when this same Pequod here had her three masts overboard in that typhoon on Japan, that same voyage when thou went mate with Captain Ahab, did'st thou not think of Death and the Judgment then?'

"Hear him, hear him now,' cried Peleg, marching across the cabin, and thrusting his hands far down into his pockets,—"hear him, all of ye. Think of that! When every moment we thought the ship would sink! Death and the Judgment then? What? With all three masts making such an everlasting thundering against the side; and every sea breaking over us, fore and aft. Think of Death and the Judgment then? No! no time to think about Death then. Life was what Captain Ahab and I was thinking of; and how to save all hands—how to rig jury-masts—how to get into the nearest port; that was what I was thinking of.'

Type

Font levels

The scale also provides classes which you can use for type sizing. The classes are defined using utilities/headings.scss. Check $grid-heading-setup in common/variables.scss for a list of classes and sizes.

Example	Class
Font size level 1	`.fl-1`
Font size level 2	`.fl-2`
Font size level 3	`.fl-3`
Font size level 4	`.fl-4`
Font size level 5	`.fl-5`
Font size level 6	`.fl-6`
Font size level 7	`.fl-7`

Headings

Their sizes follow font levels but start from level 2 and down. Sizes are defined using utilities/headings.scss. Check $grid-heading-setup in common/variables.scss for a list of sizes.

Example	Heading	Font size level
Heading 1	`<h1>`	Font size level 2
Heading 2	`<h2>`	Font size level 3
Heading 3	`<h3>`	Font size level 4
Heading 4	`<h4>`	Font size level 5
Heading 5	`<h5>`	Font size level 6
Heading 6	`<h6>`	Font size level 7

Headings also have some margins applied to them.

This is an `<h1>` tag with some trailing text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is an `<h2>` tag with some trailing text

This is an `<h3>` tag with some trailing text

This is an `<h4>` tag with some trailing text

This is an `<h5>` tag with some trailing text

This is an `<h6>` tag with some trailing text

Body text

Lorem ipsum dolor and a link, consectetur ~~adipisicing elit~~. Recusandae, rerum perferendis quos aspernatur ullam eos voluptate quo cupiditate assumenda facilis, iste animi doloremque, quasi eveniet laboriosam. Dolor perferendis debitis dolore. Repellendus laudantium, quas excepturi ducimus reiciendis, eligendi unde quia perspiciatis voluptatibus pariatur repellat quibusdam, molestiae cum quaerat ex a modi neque? Id officiis doloremque nisi, veritatis fugit fugiat eveniet placeat?

Officia, veniam. Molestias harum quasi, explicabo nesciunt fugit dicta provident natus veniam eveniet eos doloremque dolor, similique voluptates qui adipisci repudiandae iste sit nobis soluta error dolore accusamus fugiat, porro.

Links

Add classes to give links different styling.

Normal link

Link

.link-alt

Alt link

.link-underline

Underline link

Group .link-alt and .link-underline to get custom link.

Custom link

Lists

Unordered list:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ordered list:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Definition list:

Time: The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.
Space: A continuous area or expanse that is free, available, or unoccupied.; The dimensions of height, depth, and width within which all things exist and move.

Lists unstyled

Use .list-unstyled or extend %list-unstyled to get an unstyled list. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lists styled

Use .list-styled to add styling too lists. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well. Only <ul> and <pl> lists are supported.

Unordered list styled:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at

Ordered list styled:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
  1. Phasellus iaculis neque
  2. Purus sodales ultricies
  3. Vestibulum laoreet porttitor sem
  4. Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at

Blockquote

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."

To add a source of the quote add a <footer> or <cite> in the <blockquote>.

"I am game for his crooked jaw, and for the jaws of Death too, Captain Ahab, if it fairly comes in the way of the business we follow; but I came here to hunt whales, not my commander’s vengeance. How many barrels will thy vengeance yield thee even if thou gettest it, Captain Ahab? it will not fetch thee much in our Nantucket market."
Starbuck

Horizontal rule

Use to separate content sections.

NOTE: don't use it to separate <div> elements or some similar layout actions. Use border instead or if you have to add an element you can use .separator class on a <div> or <span> or any other element.

Abbreviations

attr

HTML

Other text inline elements

<mark> - You can use the mark tag to highlight text.

<del> - ~~This line of text is meant to be treated as deleted text.~~

<s> - ~~This line of text is meant to be treated as no longer accurate.~~

<ins> - This line of text is meant to be treated as an addition to the document.

<u> - This line of text will render as underlined

<small> - This line of text is meant to be treated as fine print.

<strong> - This line rendered as bold text.

<em> - This line rendered as italicized text.

<b> - This line rendered as bold text.

<i> - This line rendered as italicized text.

.mark and .small classes are also available to apply the same styles as <mark> and <small>.

Accent

Helper to highlight text.

Buttons

Use .btn class to reset button styling on <button>, <input> or <a> and use the modifier classes to add color styling. Always use <button> element if you are writing the markup.

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

You can also use the .btn class on other elements but some interaction that is based on pseudo selectors (mainly :focus) will be different.

Pseudo selectors :focus and :active are styled but you also have classes (.focus and .active) to trigger the appearance programmatically.

Link

Button variants

.btn--alpha

Link

.btn--beta

Link

.btn--gama

Link

Button disabled

Add disabled attribute to <button> or .disabled class to <a>. All the buttons will look the same in their disabled state no mater the variant.

Link

Button loading

You can use .loading class on all buttons if you need to add a loading feedback after user clicks on a button.

Link

Button large

Button with larger spacing.

Button small

Button with smaller spacing.

Button icons

Add <svg> icons in buttons. You can add it in all button types or sizes.

NOTE: Only <button> and <a> can contain <svg> elements since <input> elements are self-closing (empty elements) which can't contain other HTML elements.

NOTE: If you want to use the icon next to the text add a modifier class btn--icon to the button so that you get a margin on the svg element.

Button block

Use .btn--block for full width buttons.

Style Guide

Font levels

Font size level 1

Font size level 2

Font size level 3

Font size level 4

Font size level 5

Font size level 6

Font size level 7

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is an <h1> tag with some trailing text

This is an <h2> tag with some trailing text

This is an <h3> tag with some trailing text

This is an <h4> tag with some trailing text

This is an <h5> tag with some trailing text

This is an <h6> tag with some trailing text

Body text

Links

Lists

Lists unstyled

Lists styled

Blockquote

Horizontal rule

Abbreviations

Other text inline elements

Accent

Button variants

Button disabled

Button loading

Button large

Button small

Button icons

Button block

This is an `<h1>` tag with some trailing text

This is an `<h2>` tag with some trailing text

This is an `<h3>` tag with some trailing text

This is an `<h4>` tag with some trailing text

This is an `<h5>` tag with some trailing text

This is an `<h6>` tag with some trailing text