Global settings

We're setting some sensible defaults and adding some more opiniated styling. We're using the following to set that up:

  • Normalize in vendor ('vendor/normalize.scss')
  • Clean ('global/clean.scss') - reset some browser defaults after Normalize
  • Base ('globale/base.scss') - more opiniated styling

Some more notable settings:

  • The box-sizing is globally set on every element—including *::before and *::after, to border-box.
  • Set 1rem to 10px.
  • The <body> element also has these properties set:
    • text-align
    • color
    • background-color
    • font-family
    • font-size
    • font-weight
  • Add margin-bottom to all <p> elements.

For coding standards check Neuralab Coding Standards.

For more info check the referenced files.

Responsive breakpoints

Breakpoint name XS SM MD LG XL
Breakpoint size < 480px ≥ 480px ≥ 768px ≥ 1024px ≥ 1440px

We're using Bootstrap 4 responsive utilities so always use Sass mixins and variables for media queries.

bad @media (min-width: 576px) { ... }
good @include media-breakpoint-up(xs) { ... }

Check the documentation for more detailes.

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% 24px
SM 100% 40px
MD 100% same as previous breakpoint
LG 100% 80px
XL 1920px same as previous breakpoint

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 < 480px ≥ 480px ≥ 768px ≥ 1024px ≥ 1440px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-

Bootstrap utilities

We're using some Bootstrap 4 utilities so check the table and the documentation.

Description Documentation
Display Quickly and responsively toggle the display value of components and more with our display utilities. (NOTE: We're not using the print part of the utility.) Docs
Flexbox Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. Docs
Float Toggle floats on any element, across any breakpoint, using our responsive float utilities. Docs
Spacing Shorthand responsive margin and padding utility classes to modify an element's appearance. NOTE: we're not using the negative margin classes. Docs

Custom spacing utilities

We also have some custom spacing utilities built with Bootstrap spacing utilities. You can combine the custom utility classes with the ones that come with Bootstrap spacing utilities.

Description Classes
Gutter utilities Add padding the same size as 1 or 2 spaces of the gutter base (if the grid gutter is 24px the gutter base is half of that - 12px). We only support padding on X axis (right, left or both). Media queries are also supported (add breakpoint size in the class the same you would for other Bootstrap spacing utilities). .pr-gb-1, .pl-gb-1, .px-gb-1 + breakpoint versions (IE: .pr-md-gb-1)
Breakout utilities Add negative margin the same size as 1 or 2 spaces of the gutter base (if the grid gutter is 24px the gutter base is half of that - 12px). We only support margin on X axis (right, left or both). Media queries are also supported (add breakpoint size in the class the same you would for other Bootstrap spacing utilities). Useful for exiting .container padding and grid gutters for child elements.
NOTE: If you add one of the classes to an element and add a .row and .col's in that element it will produce a horizontal margin in some cases because of the negative margins on .row. To get around that wrap the .row in an element with a gutter utility class on it with the same size as the breakout (IE: if using .mx-br-1 on parent add .px-gb-1 on the child).
.mr-br-1, .ml-br-1, .mx-br-1 + breakpoint versions (IE: .mr-md-br-1)

Breakout background

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 background 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.'

Breakout background with an image

Since we're using ::before element for the background adding the background image with an inline style is not possible. You can either write your own CSS to set that property on the ::before or ad an img in .breakout-bg. Note that the second option is not supported in IE 11 since it's using object-fit property.

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!'

Setting the CSS property example:

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.'

Using an image example:

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.

Bildad said no more, but buttoning up his coat, stalked on deck, where we followed him. There he stood, very quietly overlooking some sailmakers who were mending a top-sail in the waist. Now and then he stooped to pick up a patch, or save an end of tarred twine, which otherwise might have been wasted.

"Shipmates, have ye shipped in that ship?"

Queequeg and I had just left the Pequod, and were sauntering away from the water, for the moment each occupied with his own thoughts, when the above words were put to us by a stranger, who, pausing before us, levelled his massive forefinger at the vessel in question. He was but shabbily apparelled in faded jacket and patched trowsers; a rag of a black handkerchief investing his neck. A confluent small-pox had in all directions flowed over his face, and left it like the complicated ribbed bed of a torrent, when the rushing waters have been dried up.

"Have ye shipped in her?" he repeated.

"You mean the ship Pequod, I suppose," said I, trying to gain a little more time for an uninterrupted look at him.

"Aye, the Pequod—that ship there," he said, drawing back his whole arm, and then rapidly shoving it straight out from him, with the fixed bayonet of his pointed finger darted full at the object.

"Yes," said I, "we have just signed the articles."

Clearfix

Clear floats by adding .clearfix to the parent element. Can also be used as a silent class %clearfix.

Example of the applied .clearfix:

This text is on the left
This text is on the right

Example without .clearfix:

This text is on the left
This text is on the right

Color utilities

Color utilities

Utility class Example
All colors
.text-c-1

Example

.text-c-2

Example

.text-black

Example

.text-gray-dark

Example

.text-gray

Example

.text-gray-light

Example

.text-gray-lighter

Example

.text-white

Example

Context colors (tied in with a context, IE: .text-body-color will always be the same color as <body>)
.text-link-color
.text-link-hover-color
.text-body-bg

Example

.text-body-color

Example

.text-fr-l-1

Example

.text-fr-l-2

Example

.text-fr-l-3

Example

.text-fr-l-4

Example

.text-fr-1

Example

.text-fr-2

Example

.text-fr-3

Example

.text-fr-4

Example

.text-success

Example

.text-info

Example

.text-warning

Example

.text-danger

Example

.text-brand-primary

Example

Background color utilities

All colors
.bg-c-1
.bg-c-2
.bg-black
.bg-gray-dark
.bg-gray
.bg-gray-light
.bg-gray-lighter
.bg-white
Context colors (tied in with a context, IE: .bg-body-bg will always be the same background color as <body>)
.bg-link-color
.bg-link-hover-color
.bg-body-bg
.bg-body-color
.bg-fr-l-1
.bg-fr-l-2
.bg-fr-l-3
.bg-fr-l-4
.bg-fr-1
.bg-fr-2
.bg-fr-3
.bg-fr-4
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-brand-primary

JS Visibility

Use to show or hide content based on if JavaScript is active. Disable JavaScript to see changes on the example bellow.

The way this works is our html tag has .no-js class added and if JavaScript loads the class get's replaced with .js class. For more info check this post.

Use .hidden-js to hide content if JavaScript is enabled.

This is hidden if JavaScript is enabled.

Use .hidden-no-js to hide content if JavaScript is disabled.

This is hidden if JavaScript is disabled.

Child reset

Add .fc-reset to any element and remove top margin from all direct first child elements.

This <h1> element doesn't have a top margin

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 <h1> element has a top margin

Add .lc-reset to any element and remove bottom margin from all direct last child elements.

This <h1> element has a bottom margin

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 <h1> element doesn't have a bottom margin

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?

Read more

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

Read more

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.

Read more

Position

Utility classes to set element position. No responsive functionality. Available classes:

.p-static
.p-relative
.p-absolute

Screen reader

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.

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 cleft
Font family utilities
.ff-base Base font family
.ff-alt Alt font family (also defines font-weight: 700;)

Type

Type scale

This is the type scale for the project. It's used for all type sizing and (both font size and line height).

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

There is also an alternative scale used by the display component.

NOTE: The font size and line heights used for <body> and <blockquote> are not in the scale.

Example Font size Line height
(unitless)
Line height computed
(font-size x line-height)
Class

Font size level 1

font-size: 4rem line-height: 1.2 4.8rem .fl-1

Font size level 2

font-size: 3.2rem line-height: 1.25 4rem .fl-2

Font size level 3

font-size: 2.4rem line-height: 1.3333333333333 3.2rem .fl-3

Font size level 4

font-size: 2rem line-height: 1.6 3.2rem .fl-4

Font size level 5

font-size: 1.8rem line-height: 1.3333333333333 2.4rem .fl-5

Font size level 6

font-size: 1.4rem line-height: 1.7142857142857 2.4rem .fl-6

Font size level 7

font-size: 1.2rem line-height: 2 2.4rem .fl-7

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.

Add classes to give links different styling.

.link-alt

Alt link


.link-underline

Underline link


.link-inv

Inverted link

Headings

Headings by default all have %title-base silent class applied. Their sizes use the type scale but start from level 2 and down. Sizes are defined using utilities/headings.scss. Check $type-breakpoint-settings 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

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 <h3> 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 <h4> 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 <h5> 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 <h6> 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.

Titles

Add .title class to heading or any other element to make it look like a title. Use classes from the type scale for sizing and line height.

This is a Level 1 title

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 a Level 2 title

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 a Level 3 title

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 a Level 4 title

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 a Level 5 title

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 a Level 6 title

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 a Level 7 title

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.

Display

This component uses a different type scale and a different font. Add .display class to heading or any other element. You also have to use size modifier classes to set the font size and line height.

Sizes modifiers are defined using utilities/headings.scss. Check $type-breakpoint-settings in common/variables.scss for a list of classes and sizes.

Example Font size Line height
(unitless)
Line height computed
(font-size x line-height)
Class

Display level 1

font-size: 8rem line-height: 1.2 9.6rem .display--1

Display level 2

font-size: 4.8rem line-height: 1.3333333333333 6.4rem .display--2

Display level 3

font-size: 4rem line-height: 1.4 5.6rem .display--3

Display level 4

font-size: 3.2rem line-height: 1.25 4rem .display--4

Display level 5

font-size: 2.4rem line-height: 1.3333333333333 3.2rem .display--5

Display level 6

font-size: 2rem line-height: 1.6 3.2rem .display--6

Display level 7

font-size: 1.6rem line-height: 1.5 2.4rem .display--7

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:

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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:

  1. 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.
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. 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
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  9. Faucibus porta lacus fringilla vel
  10. Aenean sit amet erat nunc
  11. 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.

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.


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.

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.

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.

Code

Used mainly for style guide and documentation.

Wrap inline snippets of code with <code>. Be sure to escape HTML.

This tag: "<div>" is marked as code and is inline with the rest of the text.

Use <pre> for multiple lines of code.

                   This whole text is marked as block of code and it's
         white space
               sensitive.

      <div>Some example HTML</div>  

Tables

# Name Rank Handle
1 Ahab Captain @ahab
2 Ishmael Crewman @ishmael
3 Starbuck Chief Mate @starbuck
4 Moby Dick The Whale @mobyDick

Tables striped

Add .table--striped modifier class for a striped table.

# Name Rank Handle
1 Ahab Captain @ahab
2 Ishmael Crewman @ishmael
3 Starbuck Chief Mate @starbuck
4 Moby Dick The Whale @mobyDick

Alerts

Used to return feedback to user actions with a color that conveys the state of the feedback.

Default alert:

Contextual alerts with modifier classes:

.alert--success

.alert--info

.alert--warning

.alert--danger

All <a> are also styled to follow the alert color. Use .alert__link for additional links in the .alert that get aligned to the right of the .alert.

Animation and effects

Fade

Add .fade class on an element and add .show class to fade in the content. Used in tabs.


This content fades in and out. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius atque nemo sit, dicta cupiditate odio architecto autem debitis inventore dolorem minima qui, ipsum error soluta ducimus dolor vero, aliquam id!

Badges

I'm a badge

Banners

.banner only adds a background color and sets up everything to use a background on it. For the inside spacing, margins and layout use sizing utilities and the grid.

.banner with utility color class for background and content.

.banner with a background image.

Indicate the current page inside a navigational hierarchy. The separator get's automatically via ::before element. Be sure to wrap the breadcrumbs in a <nav> element and add a aria-label label to the <nav> which describes the navigation (IE: aria-label="Breadcrumbs"). Also add an aria-current="page" attribute to the last item to indicate the active page for assistive technologies like screen readers.

Bullets

Similar component to buttons but it only supports <button> and <a> elements because it has to have other elements inside so you can't use it on an <input> element since it's self closing and can't contain any child elements.

You can also use the .bullet 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.

One important difference between .btn and .bullet is that the .bullet block class includes color styling.

Bullet variants

Use .bullet--alt modifier for a different color version of the component.

Text instead of an icon

To use a text instead of an icon add .bullet__text inside .bullet__content but keep in mind that the space in the bullet is limited so you can't have a lot of characters in .bullet__text.

50%
50%

Bullets with labels

Bullets support additional labels. To add a label add .bullet__label element.

I'm also a bullet
50% I'm also a bullet

Disabled bullets

Bullet small

Bullet groups

Optional wrappers for bullet layout:

  • .bullet-group - wrapper for a group of bullets and works like .row except with smaller gutters and centers the content. The element also has a bottom negative margin to account for bottom spacing that .bullet__item element has.
  • .bullet-group__item - first child of .bullet-group which works like .col-auto except with smaller gutters and with a bottom margin for cases when bullets break into multiple rows.

NOTE:.bullet inside .bullet-group has a set width.

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

.btn--delta

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
Link
Link
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
Link
Link
Link

Button icons

Button with smaller x padding.

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.

We also have a .btn--icon modifier which you can use to just show an icon which is a bit bigger than in default buttons. All button sizes are supported.

NOTE: This modifier doesn't support text next to the icon and it always has 1:1 size.

NOTE: This modifier can't be used with .btn--compact modifier.

NOTE: Since the button only has an icon in it don't forget to add aria-label attribute that explains the function of the button to assistive technologies. In the example below we'e added aria-label="Search" to the <button>, or you can add screen reader text in the <button> that has .sr-only class on the text.

Button block

Use .btn--block for full width buttons.

Use .btn--link for a button that looks like a link and has an underline.

NOTE: This button modifier is different than other button modifiers:

  • The class can only be applied to <button> and <a> elements since it's using ::after pseudo element for the underline marker.
  • It is not compatible with any of other button modifiers (IE: .btn--block, .btn--icon ...) so you can't use it with any them.
  • It also has a different height so it's not going to be aligned vertically with any form elements.
  • It does support adding <svg> icons in the element itself.
  • It does support all of the other button states (disabled, :focus, :active) and their class counterparts (.disabled, .focus, .active).
  • It does support .loading class.
Link

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

A flexible content container used to show a list of posts/products etc. The styling is minimal and can be extended with any of the Bootstrap utilities or any of our utility classes (color, font site etc...).

The markup of the .card is minimal and has a few rules:

  • .card will take up 100% of it's parent so for the layout use the grid or flex utilities. The example bellow is using the grid.
  • It has background-color set but you can override that with color utilities.
  • It has height: 100% applied to it to make all of the cards be the same height.
  • It has support for some optional child elements:
    • .card__img-wrap - wrapper for the image.
    • .card__content - wrapper for the content which also supports optional sub elements:
      • .card__header - wrapper for the header content.
      • .card__footer - wrapper for the footer content.
  • It has position: relative; defined to be compatible with stretched link utility.
  • It has some flex styling applied to it and to some of it's child elements. Mainly to stretch .card__content to the whole available space and to keep .card__header fixed to the top and .card__footer to the bottom of .card__content. For more details about the inner layout rules check componets/cards.scss.
How to

Nostrud

Cards with image hover effects

Cards also support two images in .card__img-wrap of which one will be visible only on hover. To use that feature add two <img> tags in .card__img-wrap and add .card__img-hover on the image you'd like to show on hover.

How to

Nostrud

Card modifiers

Card products

Add .card--product for a slightly opiniated version of .card. Mainly it changes the layout in .card__content and defines a min-height on .card__footer to make sure all content sticks to the bottom. It also provides support for bullets component which is used to show discount percentage.

Bestseler
Eaamet Utut Sunt

Non Sliqua

Eau de parfum
-20%
Reprehenderit Consequat Ex

Dolore Id

Dau de cologne
-30%
New
Anim Consequat

Laborum Velit

Deo
Bestseller
Sint Mollit Sint

Ot Ad

Eau de toilette
-50%
Laborum Commodo Sunt Duis

Consequat Nisi Reprehenderit Voluptate

Eau de parfum
Bestseller
Minim Reprehenderit

Ad Magna Sit Quis Consectetur Cillum

Eau de toilette
Dernisi

Sit Quis Consectetur

Deo
-90%
New
Pariatur Elit

Enim Nisi Adipisicing

Dau de cologne

Forms

Use .form-control to style all input elements except where otherwise noted.

File and Range

For file and range, use .form-control-file.

NOTE: this is not a modifier of .form-control.

Disabled forms

Add the disabled attribute on an input to prevent user interactions and change the styling or add disabled to a <fieldset> to disable all fields.

NOTE: type="file" and type="range" don't have any special styling for disabled except the browser defaults.

Adding disabled to every input example:


Adding disabled to a <fieldset> example:

Readonly

Use attr readonly to disable interactions and change the style. Also use .form-control--text to make a readonly field look like plain text.

Checkbox and radio

Each checkbox and radio <input> and <label> pairing is wrapped in .form-check.

Browsers that support appearance property will get the styled checkbox and the ones that don't support it will get the default browser styled checkbox. Check this section in Internet Explorer 11 to se how the default fallback looks like.


Inline checkbox and radio

Inline checkbox and radios are not supported in Internet Explorer (bug). If you need that option to work in Internet Explorer 11 use the grid and .col-auto to achieve a similar result or add min-width to .form-check--inline.


Useful for adding links to terms in checkbox and similar.

Additional helper elements

  • Use .form-block for a wrapper for each input element that adds bottom margin.
  • <label> for input get's styled via element selector but add .form-label for additional styling required for form validation.
  • Use .form-text for additional text under input elements for feedback or instruction for the user.
  • Hide <label> with .sr-only to make it accessible.
  • You can also use Bootstrap spacing utility classes on labels or add additional elements you need to add.

Here is some text that is just a paragraph with a smaller bottom margin than default.

Enter a valid e-mail address
Enter username
Here is a form block that has a bigger bottom margin and a hidden label

Here is some text that is just a paragraph.

Form validation

Add .is-valid or .is-invalid class to .form-block.

NOTE: Requires all form elements to be wrapped in .form-block because we are changing the appearance of some of the additional form elements based on the form field validation state.

Use the buttons bellow to check all the states.

Hover box

Use .hover-box to align text vertically over an image and add some effects (zoom image and add opacity) on hover. The component consists of two sub elements:

  • <img> - there is no need for a class the component will apply the styling based on the > img selector.
  • .hover-box__content - Wrapper for the text. This element is position absolutely so the amount of text is limited to the size of the image. Large texts will be cut of.

NOTE: The scale on <img> is set to scale(1.1) so include a larger <img> according to the scale than the size of the element so you avoid blurred images on hover.

Size modifiers

Use .hover-box--sm for a smaller and differently oriented version of .hover-box.

Use .hover-box--square for a square version of .hover-box.

NOTE: This version doesn't have a max width defined so it will stretch to file the entire parent.

Icons

Add icons in text or buttons. The default size of the icon is 2.4rem x 2.4rem. All <svg> elements have fill: currentColor set so the color follows the parent color.

NOTE: Don't forget to add aria-hidden="true" on the icon, and in case there is no text to explain the icon aria-label attribute on the parent with some explanation of the icon meaning.

Name Icon Icon in <a>
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-bestseller
icon-caret-down
icon-caret-up
icon-close
icon-new
icon-sale
icon-search

Product icons

Perfume fragrance

Perfume type

Product category

Images

All the <img> tags are responsive and scale with their parent element. No additional class is required.

Round images

Add a round image effect.

Labels

All <label> elements get some default styling via the element selector. There is also a .label class available to apply the same styling on some other element.

Forms also use <label> but the default styling gets overridden in some cases. For more info check forms documentation.


This is a span that looks like a label

Media object

Inspired with Bootstrap media object. Use for a list of media items alongside some content. Has minimal styling. Use spacing and flex utility classes to additionally edit layout.

Here is the breakdown of the component and the supported subcomponents:

  • .media - Has display: flex; applied to it.
  • .media__img-wrap - Wrapper for the <img> tag. Doesn't have any styling applied to it.
  • .media__content - Has flex: 1; applied to it only if it's a direct descendant of .media so it fills all the available space and removes bottom margin from the last child element.
  • .media__body - Optional element to wrap the main content. Also removes margin from direct last child element.

Ad magna ut tempor commodo

Dolor et labore sint commodo pariatur sunt eu aliquip labore eu non eu labore fugiat. Nostrud culpa est mollit sint sunt minim ea nulla reprehenderit incididunt cupidatat adipisicing aute. Lorem laboris non officia deserunt laboris ea. Qui magna sunt deserunt enim nostrud proident ad minim dolore consequat nulla commodo ut.

Incididunt et veniam excepteur

Quis ut culpa voluptate aliquip aliquip sunt adipisicing culpa incididunt amet. Incididunt id labore voluptate ex incididunt excepteur cupidatat exercitation culpa. Nisi id adipisicing tempor ea dolor esse magna laboris reprehenderit commodo veniam cupidatat ex. Ad officia ipsum laborum dolore ad enim aliquip id officia irure incididunt deserunt laborum ullamco. Eiusmod exercitation ea id officia irure duis. Ea reprehenderit cupidatat veniam ut sint irure ipsum.

Est occaecat amet ex

Deserunt velit consectetur consectetur laboris aliqua nostrud proident occaecat aliquip incididunt in non. Aute veniam cupidatat ullamco laborum et sunt. Nulla irure amet laboris velit laboris excepteur quis esse velit occaecat consectetur consectetur aliqua cillum.

Nostrud ex incididunt nulla adipisicing tempor incididunt

Dolore occaecat sunt enim qui ipsum eiusmod fugiat dolor sint in adipisicing mollit incididunt voluptate. Consectetur anim aliquip sunt consectetur deserunt consectetur sunt. Et exercitation quis labore veniam ipsum cillum duis. Ex consequat ipsum non consectetur est cillum non tempor nostrud.

Nostrud

Eiusmod mollit laboris proident amet. Pariatur pariatur aute amet mollit consectetur elit sunt nisi sint quis consectetur. Excepteur ut non nostrud in excepteur eu consequat exercitation et ut.

Ea commodo labore et cillum non

Laborum occaecat non aliqua do labore ex dolor. Magna eiusmod veniam officia dolore. Lorem consectetur tempor adipisicing cillum sint eiusmod.

Media with grid

Use .media--grid modifier if you'd like to use the grid for the layout.

Ad magna ut tempor commodo

Dolor et labore sint commodo pariatur sunt eu aliquip labore eu non eu labore fugiat. Nostrud culpa est mollit sint sunt minim ea nulla reprehenderit incididunt cupidatat adipisicing aute. Lorem laboris non officia deserunt laboris ea. Qui magna sunt deserunt enim nostrud proident ad minim dolore consequat nulla commodo ut.

Read more

Incididunt et veniam excepteur

Quis ut culpa voluptate aliquip aliquip sunt adipisicing culpa incididunt amet. Incididunt id labore voluptate ex incididunt excepteur cupidatat exercitation culpa. Nisi id adipisicing tempor ea dolor esse magna laboris reprehenderit commodo veniam cupidatat ex. Ad officia ipsum laborum dolore ad enim aliquip id officia irure incididunt deserunt laborum ullamco. Eiusmod exercitation ea id officia irure duis. Ea reprehenderit cupidatat veniam ut sint irure ipsum.

Read more

Est occaecat amet ex

Deserunt velit consectetur consectetur laboris aliqua nostrud proident occaecat aliquip incididunt in non. Aute veniam cupidatat ullamco laborum et sunt. Nulla irure amet laboris velit laboris excepteur quis esse velit occaecat consectetur consectetur aliqua cillum.

Read more

Nostrud ex incididunt nulla adipisicing tempor incididunt

Dolore occaecat sunt enim qui ipsum eiusmod fugiat dolor sint in adipisicing mollit incididunt voluptate. Consectetur anim aliquip sunt consectetur deserunt consectetur sunt. Et exercitation quis labore veniam ipsum cillum duis. Ex consequat ipsum non consectetur est cillum non tempor nostrud.

Read more

Nostrud

Eiusmod mollit laboris proident amet. Pariatur pariatur aute amet mollit consectetur elit sunt nisi sint quis consectetur. Excepteur ut non nostrud in excepteur eu consequat exercitation et ut.

Read more

Cover

.media--cover

Ad magna ut tempor commodo

Dolor et labore sint commodo pariatur sunt eu aliquip labore eu non eu labore fugiat. Nostrud culpa est mollit sint sunt minim ea nulla reprehenderit incididunt cupidatat adipisicing aute. Lorem…

Read more

Incididunt et veniam excepteur

Quis ut culpa voluptate aliquip aliquip sunt adipisicing culpa incididunt amet. Incididunt id labore voluptate ex incididunt excepteur cupidatat exercitation culpa. Nisi id adipisicing tempor ea dolor esse magna laboris…

Read more

Est occaecat amet ex

Deserunt velit consectetur consectetur laboris aliqua nostrud proident occaecat aliquip incididunt in non. Aute veniam cupidatat ullamco laborum et sunt. Nulla irure amet laboris velit laboris excepteur quis esse velit…

Read more

Nostrud ex incididunt nulla adipisicing tempor incididunt

Dolore occaecat sunt enim qui ipsum eiusmod fugiat dolor sint in adipisicing mollit incididunt voluptate. Consectetur anim aliquip sunt consectetur deserunt consectetur sunt. Et exercitation quis labore veniam ipsum cillum…

Read more

Nostrud

Eiusmod mollit laboris proident amet. Pariatur pariatur aute amet mollit consectetur elit sunt nisi sint quis consectetur. Excepteur ut non nostrud in excepteur eu consequat exercitation et ut.

Read more

Ea commodo labore et cillum non

Laborum occaecat non aliqua do labore ex dolor. Magna eiusmod veniam officia dolore. Lorem consectetur tempor adipisicing cillum sint eiusmod.

Read more

Alt cover version

.media--cover-alt

Ad magna ut tempor commodo

Dolor et labore sint commodo pariatur sunt eu aliquip labore eu non eu labore fugiat. Nostrud culpa est mollit sint sunt minim ea nulla reprehenderit incididunt cupidatat adipisicing aute. Lorem…

Read more

Incididunt et veniam excepteur

Quis ut culpa voluptate aliquip aliquip sunt adipisicing culpa incididunt amet. Incididunt id labore voluptate ex incididunt excepteur cupidatat exercitation culpa. Nisi id adipisicing tempor ea dolor esse magna laboris…

Read more

Est occaecat amet ex

Deserunt velit consectetur consectetur laboris aliqua nostrud proident occaecat aliquip incididunt in non. Aute veniam cupidatat ullamco laborum et sunt. Nulla irure amet laboris velit laboris excepteur quis esse velit…

Read more

Nostrud ex incididunt nulla adipisicing tempor incididunt

Dolore occaecat sunt enim qui ipsum eiusmod fugiat dolor sint in adipisicing mollit incididunt voluptate. Consectetur anim aliquip sunt consectetur deserunt consectetur sunt. Et exercitation quis labore veniam ipsum cillum…

Read more

Nostrud

Eiusmod mollit laboris proident amet. Pariatur pariatur aute amet mollit consectetur elit sunt nisi sint quis consectetur. Excepteur ut non nostrud in excepteur eu consequat exercitation et ut.

Read more

Ea commodo labore et cillum non

Laborum occaecat non aliqua do labore ex dolor. Magna eiusmod veniam officia dolore. Lorem consectetur tempor adipisicing cillum sint eiusmod.

Read more

Hero cover version

.media--cover-hero

Ad magna ut tempor commodo

Dolor et labore sint commodo pariatur sunt eu aliquip labore eu non eu labore fugiat. Nostrud culpa est mollit sint sunt minim ea nulla reprehenderit incididunt cupidatat adipisicing aute. Lorem laboris non officia deserunt laboris ea. Qui magna sunt deserunt enim nostrud proident ad minim dolore consequat nulla commodo ut.

Read more

Incididunt et veniam excepteur

Quis ut culpa voluptate aliquip aliquip sunt adipisicing culpa incididunt amet. Incididunt id labore voluptate ex incididunt excepteur cupidatat exercitation culpa. Nisi id adipisicing tempor ea dolor esse magna laboris reprehenderit commodo veniam cupidatat ex. Ad officia ipsum laborum dolore ad enim aliquip id officia irure incididunt deserunt laborum ullamco. Eiusmod exercitation ea id officia irure duis. Ea reprehenderit cupidatat veniam ut sint irure ipsum.

Read more

Est occaecat amet ex

Deserunt velit consectetur consectetur laboris aliqua nostrud proident occaecat aliquip incididunt in non. Aute veniam cupidatat ullamco laborum et sunt. Nulla irure amet laboris velit laboris excepteur quis esse velit occaecat consectetur consectetur aliqua cillum.

Read more

Nostrud ex incididunt nulla adipisicing tempor incididunt

Dolore occaecat sunt enim qui ipsum eiusmod fugiat dolor sint in adipisicing mollit incididunt voluptate. Consectetur anim aliquip sunt consectetur deserunt consectetur sunt. Et exercitation quis labore veniam ipsum cillum duis. Ex consequat ipsum non consectetur est cillum non tempor nostrud.

Read more

Nostrud

Eiusmod mollit laboris proident amet. Pariatur pariatur aute amet mollit consectetur elit sunt nisi sint quis consectetur. Excepteur ut non nostrud in excepteur eu consequat exercitation et ut.

Read more

Ea commodo labore et cillum non

Laborum occaecat non aliqua do labore ex dolor. Magna eiusmod veniam officia dolore. Lorem consectetur tempor adipisicing cillum sint eiusmod.

Read more

Examples of media object usage

Quotes

Quote with .media and .breakout-bg:

Ad magna ut tempor commodo

Dolor et labore sint commodo pariatur sunt eu aliquip labore eu non eu labore fugiat. Nostrud culpa est mollit sint sunt minim ea nulla reprehenderit incididunt cupidatat adipisicing aute. Lorem laboris non officia deserunt laboris ea. Qui magna sunt deserunt enim nostrud proident ad minim dolore consequat nulla commodo ut.

Ahab

Incididunt et veniam excepteur

Quis ut culpa voluptate aliquip aliquip sunt adipisicing culpa incididunt amet. Incididunt id labore voluptate ex incididunt excepteur cupidatat exercitation culpa. Nisi id adipisicing tempor ea dolor esse magna laboris reprehenderit commodo veniam cupidatat ex. Ad officia ipsum laborum dolore ad enim aliquip id officia irure incididunt deserunt laborum ullamco. Eiusmod exercitation ea id officia irure duis. Ea reprehenderit cupidatat veniam ut sint irure ipsum.

Ishmael

Media for post entry

.media--entry-item

Dolor et labore sint commodo pariatur sunt eu aliquip labore eu non eu labore fugiat. Nostrud culpa est mollit sint…

Quis ut culpa voluptate aliquip aliquip sunt adipisicing culpa incididunt amet. Incididunt id labore voluptate ex incididunt excepteur cupidatat exercitation…

Deserunt velit consectetur consectetur laboris aliqua nostrud proident occaecat aliquip incididunt in non. Aute veniam cupidatat ullamco laborum et sunt.…

Dolore occaecat sunt enim qui ipsum eiusmod fugiat dolor sint in adipisicing mollit incididunt voluptate. Consectetur anim aliquip sunt consectetur…

How to

Nostrud

Eiusmod mollit laboris proident amet. Pariatur pariatur aute amet mollit consectetur elit sunt nisi sint quis consectetur. Excepteur ut non…

Media with breakout

.media with .breakout-bg utility.

Ad magna ut tempor commodo

Dolor et labore sint commodo pariatur sunt eu aliquip labore eu non eu labore fugiat. Nostrud culpa est mollit sint sunt minim ea nulla reprehenderit incididunt cupidatat adipisicing aute. Lorem laboris non officia deserunt laboris ea. Qui magna sunt deserunt enim nostrud proident ad minim dolore consequat nulla commodo ut.

Read more

Incididunt et veniam excepteur

Quis ut culpa voluptate aliquip aliquip sunt adipisicing culpa incididunt amet. Incididunt id labore voluptate ex incididunt excepteur cupidatat exercitation culpa. Nisi id adipisicing tempor ea dolor esse magna laboris reprehenderit commodo veniam cupidatat ex. Ad officia ipsum laborum dolore ad enim aliquip id officia irure incididunt deserunt laborum ullamco. Eiusmod exercitation ea id officia irure duis. Ea reprehenderit cupidatat veniam ut sint irure ipsum.

Read more

Est occaecat amet ex

Deserunt velit consectetur consectetur laboris aliqua nostrud proident occaecat aliquip incididunt in non. Aute veniam cupidatat ullamco laborum et sunt. Nulla irure amet laboris velit laboris excepteur quis esse velit occaecat consectetur consectetur aliqua cillum.

Read more

Nostrud ex incididunt nulla adipisicing tempor incididunt

Dolore occaecat sunt enim qui ipsum eiusmod fugiat dolor sint in adipisicing mollit incididunt voluptate. Consectetur anim aliquip sunt consectetur deserunt consectetur sunt. Et exercitation quis labore veniam ipsum cillum duis. Ex consequat ipsum non consectetur est cillum non tempor nostrud.

Read more

Nostrud

Eiusmod mollit laboris proident amet. Pariatur pariatur aute amet mollit consectetur elit sunt nisi sint quis consectetur. Excepteur ut non nostrud in excepteur eu consequat exercitation et ut.

Read more

Add .nav class to a <ul> that contains a list of links to add layout and styling properties.

Use .active and .disabled classes to style the links in those situations. NOTE: the classes get added to the <li> element and not the <a>.

NOTE: This component is built to be compatible with WordPress wp_nav_menu(); function which has an opinionated markup. To get around that we're not adding any classes to the containing elements and are using element and child selector selectors to style them (IE: .nav > li). That's also the reason why .active and .disabled classes are added to the <li> element instead of the <a> element.

Similar to nav underline Except it has an extra border under every <li>.

Slightly more opinionated component which defines the width of all <a> elements and uses the grid for layout of all <li> elements.

Add .nav--stacked for vertical nav.

Use Bootstrap flexbox utilities or grid classes and our text utilities for additional layout and alignment options. Here are a few examples:

Stacked .nav only until screen lg.

Centered .nav.

Justified .nav.

Grid and .nav combined.

Since <a> get horizontal padding to make them a bit bigger and easier to interact on touch screens you can use .nav--align-fix on .nav to account for the extra spacing that the padding on <a> is causing. The class adds a negative margin to the left side of the .nav to account for the mentioned extra space.

NOTE: Use this class only with .nav and .nav--stacked. For other .nav modifiers or more complex layouts you'll have to write additional CSS if the extra space is something you have to account for (IE: remove the x padding from <a> if using .nav with grid classes).

The text in the links is aligned with the text in this paragraph.


The text in the links is aligned with the text in this paragraph.

Pagination

The pagination is built to work with WordPress paginate_links(); function (documentation) which means we had to make some exceptions from our default coding standards:

  • Class names don't follow BEM.
  • We wrap the output of paginate_links(); inside a <nav> with the class of .pagination.
  • We have to use an element selector to style the <ul> since .page-numbers class is applied to both <ul> and the element in <li> (IE: .pagination ul).
  • We have to use an element selector to style the <li> since paginate_links(); doesn't add any class to <li> (IE: .pagination ul li).
  • Since .page-numbers gets added to .dots & .current which are a <span> we are using an overqualified selector (a.page-numbers) to give appropriate styling (IE: :hover state) to only <a> elements.

To make the pagination more accessible:

  • Wrap paginate_links(); inside a <nav> element.
  • Add a descriptive aria-label to the <nav> element.
  • If using only icons for .next and .prev pagination elements add aria-hidden="true" to the icon and add a .sr-only text that describes the action.

Pagination with "current / total" marker

Use this version to only show .prev and .next links and the "current page / total count of pages" marker.

To use this version you can't use WordPress paginate_links(); function but you'll have to build your own pagination functionality.

Helper class to add responsive vertical spacing to any heading or any other element and aligns the text to center.

This is the header

The navbar doesn't have a demo here since it's tied in to the site structure (monitoring the scroll to fix the navbar). For more details check components/navbar.scss and the navbar at the top of the site:)...

Button JS

Programmatically set button states using JavaScript using Bootstrap buttons plugin. For more info check the docs.

Radio and checkbox

You can wrap a <input type="checkbox"> or <input type="radio"> with a <label> element that has the button styles applied to it. Using it with the plugin you can have button like checkboxes and radios.

Some important notes:

  • You have to wrap the buttons with a parent element that has [data-toggle="buttons"] attribute.
  • For the first element to be active you have to manually add the .active class and the checked attribute.
  • The plugin doesn't reset the <input> elements checked attribute so you'll have to do that part. Check the source of the example for more info.

Collapse

We're using Bootstrap collapse so for info about the docs and usage check the docs.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Accordions

Accordions are built with collapse for more info check Bootstrap accordions docs.

Who told thee that?" cried Ahab; then pausing, "Aye, Starbuck; aye, my hearties all round; it was Moby Dick that dismasted me; Moby Dick that brought me to this dead stump I stand on now. Aye, aye," he shouted with a terrific, loud, animal sob, like that of a heart-stricken moose; "Aye, aye! it was that accursed white whale that razeed me; made a poor pegging lubber of me for ever and a day!" Then tossing both arms, with measureless imprecations he shouted out: "Aye, aye! and I’ll chase him round Good Hope, and round the Horn, and round the Norway Maelstrom, and round perdition’s flames before I give him up. And this is what ye have shipped for, men! to chase that white whale on both sides of land, and over all sides of earth, till he spouts black blood and rolls fin out. What say ye, men, will ye splice hands on it, now? I think ye do look brave.

Fashioned at last into an arrowy shape, and welded by Perth to the shank, the steel soon pointed the end of the iron; and as the blacksmith was about giving the barbs their final heat, prior to tempering them, he cried to Ahab to place the water-cask near.

"No, no – no water for that; I want it of the true death-temper. Ahoy, there! Tashtego, Queequeg, Daggoo! What say ye, pagans! Will ye give me as much blood as will cover this barb?" holding it high up. A cluster of dark nods replied, Yes. Three punctures were made in the heathen flesh, and the White Whale’s barbs were then tempered.

"Ego non baptizo te in nomine patris, sed in nomine diaboli!" deliriously howled Ahab, as the malignant iron scorchingly devoured the baptismal blood.

Oh, lonely death on lonely life! Oh, now I feel my topmost greatness lies in my topmost grief. Ho, ho! from all your furthest bounds, pour ye now in, ye bold billows of my whole foregone life, and top this one piled comber of my death! Towards thee I roll, thou all-destroying but unconquering whale; to the last I grapple with thee; from hell’s heart I stab at thee; for hate’s sake I spit my last breath at thee. Sink all coffins and all hearses to one common pool! and since neither can be mine, let me then tow to pieces, while still chasing thee, though tied to thee, thou damned whale! Thus, I give up the spear!

Carousels

We're using Slick slider for all sliders. The slider doesn't support arrow controls for navigation.

To init add data-ride="carousel" on a .carousel element. Keep in mind that you have to follow the markup from the example bellow.

To control the slider settings use data-slick attribute. The attribute should be placed on .carousel__slides element. Check the example markup.

Useful for multiple slides that have the same spacing like grid columns.

To enable the dropdown add data-dropdown="toggle" attribute to .dropdown__toggle. The .dropdown__toggle has to be a child of .dropdown. The menu has to have .dropdown__menu class.

NOTE: .dropdown, .dropdown__toggle and .dropdown__menu elements are required for the dropdown to work. The other elements are optional.

  • .dropdown__toggle it the "toggler" that shows/hides .dropdown__menu. Use an <a> or <button> for that. If used in navs it also gets addition styling when the dropdown is opened. Other than that no other styling is applied on .dropdown__toggle.
  • .dropdown__toggle-marker is an optional element you can add to .dropdown__menu. The marker rotates based on if dropdown is open or closed.
  • .dropdown is a wrapper element for the dropdown.
  • .dropdown__menu is the element that gets shown/hidden. We're using <ul> for .dropdown__menu since we have to use it with WordPress wp_nav_menu(); function that has an opinionated markup. That's also the reason why .active and .disabled classes are added to .dropdown__menu-block since that's how wp_nav_menu(); does it.
  • .dropdown__menu-blocks is an optional element you can use to wrap multiple .dropdown__menu-block elements. Useful for mega menu.
  • .dropdown__menu-block is an optional element you can use to wrap .dropdown__menu-item.
  • .dropdown__menu-item is the item of the menu. It's supports <a>, <span> and <div> elements.
  • .dropdown__menu-item--text modifier of .dropdown__menu-item to enable text to break in to multiple lines.

NOTE: The width of .dropdown__menu is not defined so it will take up 100% of .dropdown. It does have min-width defined to prevent it from collapsing if the content is too small. With this unopinionated you can set the width based on the location of the dropdown.

  • If you're using an <a> element as a .dropdown__toggle add the role="button" attribute on .dropdown__toggle.
  • Add aria-haspopup="true" and aria-expanded="false" to .dropdown__toggle. The JavaScript will toggle the aria-expanded attribute value based on weather the dropdown is open or closed.
  • Make sure .dropdown__toggle has an id attribute and that the .dropdown__menu has aria-labelledby set to the id of .dropdown__toggle.

Check the examples for more details on accessibility.

Dropdown with <a> element as .dropdown__toggle.

Dropdown with .btn element as .dropdown__toggle.

Dropdown with .nav element as .dropdown__toggle.

Dropdown with .bullet element as .dropdown__toggle.

One a dropdown is open it will close only if you click outside .dropdown__menu or on the .dropdown__toggle or if you open a new dropdown. You can add data-dropdown="close" on an element inside .dropdown__menu and clicking on that element will close the dropdown also.

Modals

Our modal is built with Bootstrap modal but with some differences:

  • Class names have been changed (both in CSS and JavaScript) to use BEM.
  • All of our modals are vertically centered so we don't have .modal-dialog-centered class.
  • We don't have support for .modal-dialog-scrollable.
  • All of the styling is a lot les opiniated than Bootstrap's version so all of the spacing or layout for every modal is done with utility classes, grid classes, components or extra CSS specific to the modal.
  • There is no support for different modal sizes.

Scroll to

Use to scroll an element in to view. Add data-scroll-to="target" on an <a> element and an ID of the element you want to scroll to in the href attribute. The scroll is created with Smooth Scroll behavior polyfill. For more info check the docs.

Add optional data-scroll-to-offset attribute to add an offset that accepts either a number or a valid element selector. If it's the element selector than the element's height is used for the offset value.

NOTE: only vertical scrolling is supported.

Tabs

We're using a modified version of Bootstrap tabs. The most notable change is that class names have been changed (both in CSS and JavaScript) to use BEM. One more difference is that we're not using navs component for tab controls but a separate component .tab-control.

Use grid classes for layout in .tab-control. Add .no-gutters on .row or you'll get gaps between .control__item elements.

The tab you want to be visible on initial view has to have .active class on both .tab-content__item and .tab-control__item.

To add the "fade in" effect (docs), add .fade to each .tab-content__item. The active .tab-content__item also has to have .show to make it visible.

NOTE: .tab-control looks the same as underlined navigation full but it's not related to it in any way. We had to separate those components because the Bootstrap tabs JavaScript can't handle the markup that our navs component uses.

Fashioned at last into an arrowy shape, and welded by Perth to the shank, the steel soon pointed the end of the iron; and as the blacksmith was about giving the barbs their final heat, prior to tempering them, he cried to Ahab to place the water-cask near.

"No, no – no water for that; I want it of the true death-temper. Ahoy, there! Tashtego, Queequeg, Daggoo! What say ye, pagans! Will ye give me as much blood as will cover this barb?" holding it high up. A cluster of dark nods replied, Yes. Three punctures were made in the heathen flesh, and the White Whale’s barbs were then tempered.

"Ego non baptizo te in nomine patris, sed in nomine diaboli!" deliriously howled Ahab, as the malignant iron scorchingly devoured the baptismal blood.

Oh, lonely death on lonely life! Oh, now I feel my topmost greatness lies in my topmost grief. Ho, ho! from all your furthest bounds, pour ye now in, ye bold billows of my whole foregone life, and top this one piled comber of my death! Towards thee I roll, thou all-destroying but unconquering whale; to the last I grapple with thee; from hell’s heart I stab at thee; for hate’s sake I spit my last breath at thee. Sink all coffins and all hearses to one common pool! and since neither can be mine, let me then tow to pieces, while still chasing thee, though tied to thee, thou damned whale! Thus, I give up the spear!

Who told thee that?" cried Ahab; then pausing, "Aye, Starbuck; aye, my hearties all round; it was Moby Dick that dismasted me; Moby Dick that brought me to this dead stump I stand on now. Aye, aye," he shouted with a terrific, loud, animal sob, like that of a heart-stricken moose; "Aye, aye! it was that accursed white whale that razeed me; made a poor pegging lubber of me for ever and a day!" Then tossing both arms, with measureless imprecations he shouted out: "Aye, aye! and I’ll chase him round Good Hope, and round the Horn, and round the Norway Maelstrom, and round perdition’s flames before I give him up. And this is what ye have shipped for, men! to chase that white whale on both sides of land, and over all sides of earth, till he spouts black blood and rolls fin out. What say ye, men, will ye splice hands on it, now? I think ye do look brave.