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-sizingis globally set on every element—including*::beforeand*::after, toborder-box. - Set
1remto10px. - The
<body>element also has these properties set:text-aligncolorbackground-colorfont-familyfont-sizefont-weight
- Add
margin-bottomto 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) { ... } |
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:
Example without .clearfix:
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 |
Example |
.text-link-hover-color |
Example |
.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
.bg-c-1
.bg-c-2
.bg-black
.bg-gray-dark
.bg-gray
.bg-gray-light
.bg-gray-lighter
.bg-white
.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.
.hidden-js to hide content if JavaScript is enabled.
This is hidden if JavaScript is enabled.
.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
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?
Read moreLorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora qui nesciunt mollitia vel aliquid sequi esse aperiam quibusdam, quis ad!
Read moreLorem 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 morePosition
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: 1.3333333333333 |
1.6rem
|
.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.
Links
Add classes to give links different styling.
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:
- 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
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
- 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
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.
<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
Alerts with links
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.
Badges
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.
Breadcrumbs
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.
Bullets with labels
Bullets support additional labels. To add a label add .bullet__label element.
Disabled bullets
Bullet small
Bullet Wolt
Special modifier just for Wolt which has a different color and a bigger icon.
Bullet groups
Optional wrappers for bullet layout:
.bullet-group- wrapper for a group of bullets and works like.rowexcept with smaller gutters and centers the content. The element also has a bottom negative margin to account for bottom spacing that.bullet__itemelement has..bullet-group__item- first child of.bullet-groupwhich works like.col-autoexcept 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.
Button variants
.btn--alpha
.btn--beta
.btn--gama
.btn--delta
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.
Button loading
You can use .loading class on all buttons if you need to add a loading feedback after user clicks on a button.
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.
Button link
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::afterpseudo 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
.loadingclass.
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:
.cardwill 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-colorset 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__contentto the whole available space and to keep.card__headerfixed to the top and.card__footerto the bottom of.card__content. For more details about the inner layout rules checkcomponents/cards.scss.
Ad magna ut tempor commodo
Incididunt et veniam excepteur
Est occaecat amet ex
Nostrud
Ea commodo labore et cillum non
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.
Ad magna ut tempor commodo
Incididunt et veniam excepteur
Est occaecat amet ex
Nostrud
Ea commodo labore et cillum non
Card modifiers
Card products
Add .card--product for a slightly opinionated 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 product bullets that are built with the bullet component.
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.
Checkbox and radio with a link
Useful for adding links to terms in checkbox and similar.
Additional helper elements
- Use
.form-blockfor a wrapper for each input element that adds bottom margin. <label>for input get's styled via element selector but add.form-labelfor additional styling required for form validation.- Use
.form-textfor additional text under input elements for feedback or instruction for the user. - Hide
<label>with.sr-onlyto 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 addressHere 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> imgselector..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 |
||
icon-wolt |
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- Hasdisplay: flex;applied to it..media__img-wrap- Wrapper for the<img>tag. Doesn't have any styling applied to it..media__content- Hasflex: 1;applied to it only if it's a direct descendant of.mediaso 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.
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.
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…
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…
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…
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…
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.
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…
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…
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…
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…
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.
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.
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.
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
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…
Incididunt et veniam excepteur
Quis ut culpa voluptate aliquip aliquip sunt adipisicing culpa incididunt amet. Incididunt id labore voluptate ex incididunt excepteur cupidatat exercitation…
Est occaecat amet ex
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…
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.
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.
Navs
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.
Inverted version of .nav (for dark backgrounds)
Underlined navigation
Underlined navigation full
Similar to nav underline Except it has an extra border under every <li>.
Nav for letter index
Slightly more opinionated component which defines the width of all <a> elements and uses the grid for layout of all <li> elements.
Stacked nav
Add .nav--stacked for vertical nav.
Other Layout and alignment options
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.
Nav alignment fix
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-numbersclass is applied to both<ul>and the element in<li>(IE:.pagination ul). - We have to use an element selector to style the
<li>sincepaginate_links();doesn't add any class to<li>(IE:.pagination ul li). - Since
.page-numbersgets added to.dots&.currentwhich are a<span>we are using an overqualified selector (a.page-numbers) to give appropriate styling (IE::hoverstate) to only<a>elements.
To make the pagination more accessible:
- Wrap
paginate_links();inside a<nav>element. - Add a descriptive
aria-labelto the<nav>element. - If using only icons for
.nextand.prevpagination elements addaria-hidden="true"to the icon and add a.sr-onlytext 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.
Page header
Helper class to add responsive vertical spacing to any heading or any other element and aligns the text to center.
This is the header
Navbar
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
.activeclass and thecheckedattribute. - The plugin doesn't reset the
<input>elementscheckedattribute 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.
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.
Grid carousel
Useful for multiple slides that have the same spacing like grid columns.
Dropdowns
To enable the dropdown adddata-dropdown="toggle" attribute to .dropdown__toggle. The .dropdown__toggle has to be a child of .dropdown. The menu has to have .dropdown__menu class.
The markup
NOTE: .dropdown, .dropdown__toggle and .dropdown__menu elements are required for the dropdown to work. The other elements are optional.
.dropdown__toggleit 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-markeris an optional element you can add to.dropdown__menu. The marker rotates based on if dropdown is open or closed..dropdownis a wrapper element for the dropdown..dropdown__menuis the element that gets shown/hidden. We're using<ul>for.dropdown__menusince we have to use it with WordPresswp_nav_menu();function that has an opinionated markup. That's also the reason why.activeand.disabledclasses are added to.dropdown__menu-blocksince that's howwp_nav_menu();does it..dropdown__menu-blocksis an optional element you can use to wrap multiple.dropdown__menu-blockelements. Useful for mega menu..dropdown__menu-blockis an optional element you can use to wrap.dropdown__menu-item..dropdown__menu-itemis the item of the menu. It's supports<a>,<span>and<div>elements..dropdown__menu-item--textmodifier of.dropdown__menu-itemto 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.
Accessibility
- If you're using an
<a>element as a.dropdown__toggleadd therole="button"attribute on.dropdown__toggle. - Add
aria-haspopup="true"andaria-expanded="false"to.dropdown__toggle. The JavaScript will toggle thearia-expandedattribute value based on weather the dropdown is open or closed. - Make sure
.dropdown__togglehas anidattribute and that the.dropdown__menuhasaria-labelledbyset to theidof.dropdown__toggle.
Check the examples for more details on accessibility.
Toggle examples
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.
Close button
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.
- When a modal opens Bootstrap JavaScript adds
.modal-openclass to<body>. That class prevents scrolling while the modal is open withoverflow: hidden. Settingoverflowtohiddencauses the window scrollbar to disappear and with that all fixed content to moves to the right. To prevent this issue modal JavaScript calculates the scrollbar width and then addspadding-rightwith the value of the calculated scrollbar width to fixed components that are affected with this. The list of those components is stored inSelector.FIXED_CONTENTin modal JavaScript. Since we also have some fixed components that get affected with this behavior we've added our selectors:.navbar--nav-fixed .navbar__body.navbar--fixed .navbar__content#cookie-notice
- All of our modals are vertically centered so we don't have
.modal-dialog-centeredclass. - We don't have support for
.modal-dialog-scrollable. - All of the styling is a lot less opinionated 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.