Design guidelines

Designing for the web is not the same as designing for print media. Following are some guidelines to design usability and accessibility friendly web designs. When these guidelines are implemented properly, the website will score better on search engines as well.

The information below might be a bit overkill. It gives an idea of how we think a proper website should work code-wise. We understand if not everything is clear, or if you simply disagree. In that case we'd love to sit together to discuss the best way to merge our design-systems.

General

For easier communication between teams; it's a good practice to define and name everything. From color names and font-sizes to entire elements. We can put all this info in an online styleguide (like this example) accessible to everybody. This makes designing new pages a breeze, even if a new member joins the team. It also helps keeping the code-base small and efficient (resulting in faster pages).

Typography

Pick a maximum of 4 fonts

When using webfonts; each weight is a webfont in itself. So Helvetica regular, regular-italic, light and bold are actually 4 fonts, which would complete the websites font list. Too many fonts make a website heavy (and thus slow, scoring lower on search engines).

Default font size

Pick a default font-size for mobile and one for desktop (they could be the same). Both should be at least 16px. All "scaling" in the website will depend on this/these "root" font-size(s)

Headings

We usually work with heading:xxs up to heading:xl, but other names are good as well. These font-styles will define font-family, font-weight, font-size, line-height and letter-spacing for both mobile up to desktop. Color (and other) modifiers will be defined elsewhere.

Fonts sizes

We usually work with font-size:xs up to font-size:xl (where font-size:m is the "root" page font-size, for example 16px), but other names are good as well. These will define font-size and line-height for both mobile and desktop. Other modifiers (like color, alignment, font-weight, etc.) will be defined elsewhere.

Font modifiers

We usually work with modifiers like font-weight:bold, text-align:center, but other names are good as well. Two different fonts for headings? You could add a modifier here like font-family:alternative

Check out some examples in the Typography section of this styleguide

Color

Naming

Define an X amount of colors and name them. Shades of colors and alpha transparent values of colors should have their own name as well. This way we can keep colors manageable. Each color should have a "type" color as well. This "type" color is the text color whenever the (non-type) color is used as a background color. Keep contrast in mind (see contrast below).

We usually create both backgrounds, as well as colors modifiers for all available colors such as color:black, background:white. etc. which can be used as classes in the markup. The examples in the styleguide show the background color with the "type" color as the text color.

Contrast

Make sure all important elements, such as forms, warnings, labels, buttons etc. have efficient color contrast. This is not only for people with limited or no sight; but also for viewing the website on a mobile phone in the middle of the summer when the brightness of your screen can't get bright enough due to the brightness of the sun.

Check out some examples in the Color section of this styleguide

Mobile first

Content mobile-first

Start thinking about what needs to be displayed on a small mobile phone (320 x 568 is still a good start). If a particular piece of content (text, image, video, interactive) is not needed on mobile to convey the message, it's also not needed on desktop sized viewports. Two news-items on mobile to save space? Then two items on desktop it is as well. This is especially helpful when users switch devices (mobile on the way home during a train ride vs continuing on the couch on a tablet).

From 320 to 2560

What happens when the max-width of a design is reached (for example 1980px wide)? Does the website keep growing? Center the design with colored areas left and right? Add a shadow behind the main design? Think about a proper maximum width for the design, but also what happens when a user spans their browser on a 2560px wide (or even wider) screen. Below you can find two examples. (close the navigation sidebar for a better demo result)

Center the design when the max width is reached

Block 1

Block 2

The design keeps growing but the content has a max-width

Block 1

Block 2

Order of elements

In general; what's on top on mobile is on the left on desktop. Technically everything is possible, but extra code results in slower pages. Also keep in mind that users navigating with a keyboard expect items to focus in the order that they visually see them as well. So try to keep the order of elements the same on mobile up to desktop.

Visibility

Hidden content behind a tab/slide/button might never be found by visitors. Make sure all (important) content is visible without a need of interaction. Automatic sliders aren't the solution either. A visitor quickly scanning the page for interesting headings skips the hidden content even if it goes to the next slide automatically. And sliders with elements that have different heights result in jumpy pages. In general; just display everything. Still want to show off your 240 testimonials? How aboout displaying two beside each other and add a "more testimonials" button below it? As a bonus you can hand-pick two testimonials that best represent the content on that particular page!

Navigation

This text will jump around which is very annoying while reading it.

This is a small slide

This is a slide with a considerable amount of text resulting in slides that have different heights. "fixing" this by giving the slider a fixed height is not desirable because either the small slide will have a huge amount of white-space or the big slide will be cut-off.

Try to read me when example is playing

This is the text that you can't read easily. This is true for all content that follows the slider above. And even if you "stop" the automatic sliding when the slider is outside the viewport, it's still highly annoying for reading when the slider is in fact in the viewport.

Layout

Our layout system is based on every-layout. They explain the rudiments quite good. We suggest at least scanning the rudiment pages and read the parts that grab your attention.

Responsive "units"

We work with the modular scale system. We suggest reading the first few paragraphs of this article (up to the Javascript parts) since our whole layout system is based on this principle. This means that the websites we build shrink and grow depending on the users browser settings. People with bad sight might have their devices set to a standard bigger font size, and when working with pixels, these settings are ignored.

As a second layer we like to make "values" grow with the browser by setting mininum and maximum values and scale between these values using the browser width. An example; a heading on mobile might have a font-size of 24px, on desktop it might be 32px. In our code we basically tell the browser that our heading should have a font-size of 24px up until a certain point (for example 37,5 "units"; which will translate to 600px when both the browser and main website font-size is set to the default 16px), then grow in size depending on the viewport size up until another point (60 units for example) and then stay 32px. To further demonstrate this check out the following example.

Example heading

The above heading has a min value of "24px" and max value of "48px"

First column

Second column

Spacing between grid items example

Names for layout elements

When building pages we love to work with a set of "layout-building-blocks" (see every-layout). We're using the "stack", "center", "cluster", "sidebar", "switcher" and the "grid" and we added our own "flag-object" and some options like "max" (span a maximum with based on the site with) and "shift" (when used with "max" you can shift elements to left or right).

All these layout elements do not care where they are or how wide your browser window is. Everything is calculated on the element width itself (using CSS, not JS). This make it "impossible" to design something "specific" for mobile/tablet/desktop since we never know where an element is being used and how it behaves on a certain width. Still need a button only on mobile? (there are use cases; like hiding a button on desktop that opens filters on mobile, while filters are always displayed in the sidebar on desktop for example) We can rebuild certain elements to make them dependent on the viewport instead of the element itself. These 'rebuilt' elements are less versatile but can be used whenever we exactly know where an element is being used.

Layout modifiers

With a stack element you can space elements vertically from each other, with a cluster you space items both horizontally and vertically. But not each element should be spaced the same. therefor we've got modifiers. Modifiers will make layout elements behave differently. Spacing is an example, grid item widths is another example. Preferably we work with the modular scale in here as well. As an example we can have a modifier called stack--ms:2 which uses the modular scale 2 value to space items apart.

Check out some examples in the Layout section of this styleguide

Forms

Labels

Each form element needs a label. Do not add the label inside the field itself since it will disappear when filling in the form. Always put the label in front or above the field.

When things go wrong

What if a user forgets to fill some fields? Make sure you design a proper "error message" as well. It's even better to think about how to assist the user as much as possible ibn the first place by designing notes with a form field for the more difficult fields to understand.

Check out some examples in the Form section of this styleguide

This is a bit too much to take in

The above information is, in a nutshell, how we like to work to create the best websites for everybody. We understand that this is a lot to take in, especially the "layout" section, and we fully understand that.

As demonstrated, the designs will never be pixel-perfect since they are depending on a lot of factors. So the make the designing phase a bit easier, here's a list of units you can use to design / size / space different elements:

Element	Calculated pixel size
Site width	1184px
Content width	776px
Narrow width	572px
Wider width	980px
Full width	entire browser viewport
Mobile gutter width	24px
Desktop gutter width	40px
Modular Scale (MS) 0	16px
MS -1	11px
MS -2	7px
MS -3	5px
MS -4	3px
MS 1	24px
MS 2	36px
MS 3	54px
MS 4	80px
Default grid item	266px
Sidebar width	266px
font-size-m	16px
font-size-s	15px
font-size-xs	14px
font-size-l	18px
font-size-xl	20px
heading-size-m	24px <> 32px
heading-size-s	20px <> 24px
heading-size-xs	18px <> 20px
heading-size-xxs	16px <> 18px
heading-size-l	32px <> 38px
heading-size-xl	38px <> 40px

The list above can easily be adjusted and extended. Just make sure everything fits in a design system :-)

More examples please

Understanding something by just reading it is quite hard ;)

Below you can find a "general" styleguide where you can click around, adjust your screen size, read the accompanying information and get a better understanding of the different building blocks. I also added some buttons, cards and utilities that we love to work with. These are all "structural" meaning that the design itself can go into any direction.

The following components are currently available:

Typography
Color
Layout
Buttons
Cards
Form
Utilities

Typography

The first heading on a page should always be an <h1> with the class heading:xl

Only one <h1> per page is allowed.

Headings

Heading XL

Lato Bold

Lorem ipsum dolor sit amet

Heading L

Lato Bold

Lorem ipsum dolor sit amet

Heading M

Lato Bold

Lorem ipsum dolor sit amet

Heading S

Lato Bold

Lorem ipsum dolor sit amet

Heading XS

Lato Bold

Lorem ipsum dolor sit amet

Body text

Font size XL

Lato Regular

Lorem ipsum dolor sit amet

Font size L

Lato Regular

Lorem ipsum dolor sit amet

Font size M

Lato Regular

Lorem ipsum dolor sit amet

Font size S

Lato Regular

Lorem ipsum dolor sit amet

Font size XS

Lato Regular

Lorem ipsum dolor sit amet

Weight

Weight normal

Puts text in normal weight

Lorem ipsum dolor sit amet

Markup

<p class="font-weight:normal">Lorem ipsum dolor sit amet</p>

Weight bold

Puts text in bold weight

Lorem ipsum dolor sit amet

Markup

<p class="font-weight:bold">Lorem ipsum dolor sit amet</p>

Alignment

Align center

Center text align

Lorem ipsum dolor sit amet

Markup

<p class="text-align:center">Lorem ipsum dolor sit amet</p>

Align right

Right text align

Lorem ipsum dolor sit amet

Markup

<p class="text-align:right">Lorem ipsum dolor sit amet</p>

Align left

Left text align

Lorem ipsum dolor sit amet

Balance text

Better line-breaks for lines that span multiple rows.

Lorem ipsum dolor sit amet consectetuer adipiscing elit.

Markup

<h2 class="heading:xl balance-text">Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>

Style

Italic

Italic text

Lorem ipsum dolor sit amet

Nowrap

Do not wrap text

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Markup

<p class="nowrap">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

Ellipsis on two lines

Markup

<p class="ellipsis:2">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

Color

On this page you can find all available colors.

Primary

example1
#277CB4

example2
#C75000

example3
#1E8549

example3-light
#8dd9ad

Support

support1
#8e44ad

support2
#c0392b

Neutral

neutral1
#34495e

neutral2
#bdc3c7

Layout

Magenta backgrounds and borders are added to the styleguide only to display the otherwise invisible containers.

The "Grid" in the top bar isn't pixel perfect and only "works" when the max-site width is reached. This is by design since we rely on an elements content to define it's width.

In this "layout" section you will find everything you need to structurally layout each page. All these elements are only styled structural so no borders, backgrounds or other properties will be found here.

Stack

All direct children in this container are stacked with their own top-margin (may be different for different items).

This is the main class to use to space elements from each other.

Example child

Markup

<div class="stack">
    <div>Example child</div>
    <div>Example child</div>
    <div>Example child</div>
    <div>Example child</div>
</div>

Stack | scale: -4

Using Modular Scale -4 for margins.

Example child

Markup

<div class="stack stack--ms:-4">
	<div>Example child</div>
	<div>Example child</div>
</div>

Stack | scale: -3

Using Modular Scale -3 for margins.

Example child

Markup

<div class="stack stack--ms:-3">
	<div>Example child</div>
	<div>Example child</div>
</div>

Stack | scale: -2

Using Modular Scale -2 for margins.

Example child

Markup

<div class="stack stack--ms:-2">
	<div>Example child</div>
	<div>Example child</div>
</div>

Stack | scale: -1

Using Modular Scale -1 for margins.

Example child

Markup

<div class="stack stack--ms:-1">
	<div>Example child</div>
	<div>Example child</div>
</div>

Stack | scale: 0

Using Modular Scale 0 for margins.

Example child

Markup

<div class="stack stack--ms:0">
	<div>Example child</div>
	<div>Example child</div>
</div>

Stack | scale: 1

Using Modular Scale 1 for margins.

Example child

Markup

<div class="stack stack--ms:1">
	<div>Example child</div>
	<div>Example child</div>
</div>

Stack | scale: 2

Using Modular Scale 2 for margins.

Example child

Markup

<div class="stack stack--ms:2">
	<div>Example child</div>
	<div>Example child</div>
</div>

Stack | scale: 3

Using Modular Scale 3 for margins.

Example child

Markup

<div class="stack stack--ms:3">
	<div>Example child</div>
	<div>Example child</div>
</div>

Stack | scale: 4

Using Modular Scale 4 for margins.

Example child

Markup

<div class="stack stack--ms:4">
	<div>Example child</div>
	<div>Example child</div>
</div>

Stack | scale: none

Remove margins

Example child

Markup

<div class="stack stack--ms:none">
	<div>Example child</div>
	<div>Example child</div>
	<div>Example child</div>
</div>

Stack center

All direct children in this container are centered using the $content-width variable.

Note: Some elements can't be used as direct children (for example any inline, inline-block or inline-flex element, a .flag-object, a .horizontal-list) because they won't center on larger screens. If you need one of these elements simply wrap it in a div for example.

Example child

Note: This element is failing on desktop. Wrap it in a div for example.

Markup

<div class="stack stack--center">
	<div>Example child</div>
	<div>Example child</div>
	<div>Example child</div>
	<div class="flag-object">
		<div class="flag-object__body">Note: This element is failing on desktop. Wrap it in a div for example.</div>
	</div>
</div>

Stack center > narrow

Makes the element as wide as the $narrow-width variable. Use as child of a .stack.stack--center container.

...

Stack center > wider

Makes the element as wide as the $wider-width variable. Use as child of a .stack.stack--center container.

...

Stack center > widest

Makes the element as wide as the $site-width variable. Use as child of a .stack.stack--center container.

...

Stack center > full-width

Makes the element as wide as the parent container. Use as child of a .stack.stack--center container.

Use this element to span the entire site and add background colors to this div to create colored sections.

...

Center

Self centering element.

Example

Center: size XS

Small self centering element.

Example

Grid

Children will stay neatly in a self-growing grid. All children are at least $grid-item-width wide.

Falls back to flexbox on older browsers.

Grid item

Markup

<div class="grid">
	<div class="inner">
		<div>Grid item</div>
		<div>Grid item</div>
		<div>Grid item</div>
	</div>
</div>

Grid S

All children are at least $grid-item-width--s wide.

Grid item

Markup

<div class="grid grid--size:s">
	<div class="inner">
		<div>Grid item</div>
		<div>Grid item</div>
		<div>Grid item</div>
	</div>
</div>

Grid L

All children are at least $grid-item-width--l wide.

Grid item

Markup

<div class="grid grid--size:l">
	<div class="inner">
		<div>Grid item</div>
		<div>Grid item</div>
		<div>Grid item</div>
	</div>
</div>

Switcher

Stacked containers on a small screen and aligned when all children are at least $grid-item-width wide.

Switcher item

Markup

<div class="switcher">
	<div class="inner">
		<div>Switcher item</div>
		<div>Switcher item</div>
		<div>Switcher item</div>
		<div>Switcher item</div>
	</div>
</div>

Switcher 1:2

Stacked containers on a small screen and aligned in a 1/2 ratio when both children are at least $grid-item-width wide.

Switcher item

Markup

<div class="switcher switcher--1:2">
	<div class="inner">
		<div>Switcher item</div>
		<div>Switcher item</div>
	</div>
</div>

Switcher 2:1

Stacked containers on a small screen and aligned in a 2/1 ratio when both children are at least $grid-item-width wide.

Switcher item

Markup

<div class="switcher switcher--2:1">
	<div class="inner">
		<div>Switcher item</div>
		<div>Switcher item</div>
	</div>
</div>

Switcher: size S

A small size switcher.

Switcher item

Markup

<div class="switcher switcher--size:s">
	<div class="inner">
		<div>Switcher item</div>
		<div>Switcher item</div>
		<div>Switcher item</div>
		<div>Switcher item</div>
	</div>
</div>

Has sidebar

Has left sidebar.

A left sidebar. Sidebar has a "fixed" width which differs it from the switcher.

Markup

<div class="has-sidebar has-sidebar--left">
	<div class="inner">
		<div>The sidebar</div>
		<div>The content</div>
	</div>
</div>

Has right sidebar.

A right sidebar. Sidebar has a "fixed" width which differs it from the switcher.

Markup

<div class="has-sidebar has-sidebar--right">
	<div class="inner">
		<div>The content</div>
		<div>The sidebar</div>
	</div>
</div>

Has left & right sidebar.

Left & right sidebar. Sidebars have "fixed" widths which differs it from the switcher.

Markup

<div class="has-sidebar has-sidebar--both">
	<div class="inner">
		<div>The left sidebar</div>
		<div>The content</div>
		<div>The right sidebar</div>
	</div>
</div>

Flag object

Automatically sizing flag-object. The body is fluid and aside is fixed.

Make sure you define a width for fluid elements (like images) inside an aside to avoid weird growing flag objects

Body element
Multiline

Markup

<div class="flag-object">
	<div class="flag-object__aside">Aside</div>
	<div class="flag-object__body">Body element <br/> Multiline</div>
</div>

Flag object | scale: -2

Smaller spacing between elements

Body element

Markup

<div class="flag-object flag-object--scale:-2">
	<div class="flag-object__aside">Aside</div>
	<div class="flag-object__body">Body element</div>
</div>

Flag object | scale: -3

Smaller spacing between elements

Body element

Markup

<div class="flag-object flag-object--scale:-3">
	<div class="flag-object__aside">Aside</div>
	<div class="flag-object__body">Body element</div>
</div>

Top aligned flag object

Add this modifier to vertically align all children on top instead of middle

Body element
Multiline

Markup

<div class="flag-object flag-object--top">
	<div class="flag-object__aside">Aside</div>
	<div class="flag-object__body">Body element <br/> Multiline</div>
</div>

Bottom aligned flag object

Add this modifier to vertically align all children on bottom instead of middle

Body element
Multiline

Markup

<div class="flag-object flag-object--bottom">
	<div class="flag-object__aside">Aside</div>
	<div class="flag-object__body">Body element <br/> Multiline</div>
</div>

No wrap flag object

Add this modifier to keep everything aligned instead of stacked even on smaller screens

Body

Markup

<div class="flag-object flag-object--nowrap">
	<div class="flag-object__aside">Aside</div>
	<div class="flag-object__body">Body</div>
</div>

Inline flag object

Add this modifier to get an inline-flex flag-object

Body

Markup

<div class="flag-object flag-object--inline">
	<div class="flag-object__aside">Aside</div>
	<div class="flag-object__body">Body</div>
</div>

Flag object with fill instead of body

Removes the 50% min-with from the "flexing" element

This is the flag-object__fill element. This item will just grow and shrink indefinitely

Markup

<div class="flag-object">
	<div class="flag-object__aside">Aside</div>
	<div class="flag-object__fill">This is the flag-object__fill element. This item will just grow and shrink indefinitely</div>
</div>

Cluster

A cluster of elements evenly spaced both vertical as horizontal.

The cluster doesn't care what you throw at it. Just remember that it is a flexbox so each row is as tall as the tallest child.

Cluster item

Markup

<div class="cluster">
	<div>Cluster item</div>
	<div>Cluster item</div>
	<a class="button" href="#">Cluster item</a>
</div>

Cluster XXS

Cluster with XXS sized gaps.

Cluster item

Markup

<div class="cluster:xxs">
	<div>Cluster item</div>
	<div>Cluster item</div>
	<a class="button" href="#">Cluster item</a>
</div>

Cluster XS

Cluster with XS sized gaps.

Cluster item

Markup

<div class="cluster:xs">
	<div>Cluster item</div>
	<div>Cluster item</div>
	<a class="button" href="#">Cluster item</a>
</div>

Cluster S

Cluster with S sized gaps.

Cluster item

Markup

<div class="cluster:s">
	<div>Cluster item</div>
	<div>Cluster item</div>
	<a class="button" href="#">Cluster item</a>
</div>

Cluster L

Cluster with L sized gaps.

Cluster item

Markup

<div class="cluster:l">
	<div>Cluster item</div>
	<div>Cluster item</div>
	<a class="button" href="#">Cluster item</a>
</div>

Cluster nowrap

Doesn't wrap items

Cluster item

Markup

<div class="cluster cluster--nowrap">
	<div>Cluster item</div>
	<div>Cluster item</div>
	<a class="button" href="#">Cluster item</a>
</div>

Cluster inline

An inline-flex cluster.

Cluster item

Markup

<div class="cluster cluster--inline">
	<div>Cluster item</div>
	<div>Cluster item</div>
	<a class="button" href="#">Cluster item</a>
</div>

Cluster fill

A cluster dividing children between the width of the parent.

Cluster item

Markup

<div class="cluster cluster--fill">
	<div>Cluster item</div>
	<div>Cluster item</div>
	<a class="button" href="#">Cluster item</a>
</div>

Cluster stretch

A cluster stretching children between the width of the parent.

Cluster item

Markup

<div class="cluster cluster--stretch">
	<div>Cluster item</div>
	<div>Cluster item</div>
	<a class="button" href="#">Cluster item</a>
</div>

Cluster center

Centered align cluster

Cluster item

Markup

<div class="cluster cluster--center">
	<div>Cluster item</div>
	<div>Cluster item</div>
	<a class="button" href="#">Cluster item</a>
</div>

Cluster end

Align items to the end.

Cluster item

Markup

<div class="cluster cluster--end">
	<div>Cluster item</div>
	<div>Cluster item</div>
	<a class="button" href="#">Cluster item</a>
</div>

Max

Spanning max 3 columns based on 12 columns and based on the $site-width variable, not based on 100% design width.

For example: max:6 is only 50% wide when the viewport has reached the $site-width width. When the screen is smaller, max:6 stays half the wifth of the $site-width variable.

Max 3

Example

Max 4

Example

Max 5

Example

Max 6

Example

Max 8

Example

Max 10

Example

Max narrow

As wide as the $narrow-width variable

Example

Max content

As wide as the $content-width variable

Example

Max center

Center align the max container when used outside of stack--center.

Example

Shift

Shift 3

Example

Buttons

Only use the button class for actual <button> or <a> elements.

Button example 1

Example

Markup

<a href="#" class="button button--example1"><span class="button__text">Example</span></a>

Button example 2

Example

Markup

<a href="#" class="button button--example2"><span class="button__text">Example</span></a>

Button block

Spans the entire width of it's parent

Example

Markup

<a href="#" class="button button--example1 button--block"><span class="button__text">Example</span></a>

Button large

Example

Markup

<a href="#" class="button button--example1 button--l"><span class="button__text">Example</span></a>

Button small

Example

Markup

<a href="#" class="button button--example1 button--s"><span class="button__text">Example</span></a>

Cards

When multiple cards are used in one container. Make sure to make the parent + cards an ul > li. If no other container is available (like a grid or switcher for example) you can use .cards as a class for the parent ul

Card

Basic card

Image

A card heading

Some card content in the card body
Image

A card heading

Some card content in the card body

Markup

<li class="card" data-card>
	<div class="card__image">
	    <div class="ratio:5:2">
	        Image
	    </div>
	</div>
	<div class="card__body">
		<div class="card__content">
		    <h3 class="heading:s">
                <a href="#" data-card-link>
                    A card heading
                </a>
		    </h3>
		    <p>Some card content in the card body</p>
		</div>
	</div>
</li>

Card aligned

Card where image always stays on the left of the body

Image

A card heading

Some card content in the card body

Markup

<li class="card card--aligned" data-card>
	<div class="card__image">
	    <div class="ratio:5:2">
	        Image
	    </div>
	</div>
	<div class="card__body">
		<div class="card__content">
		    <h3 class="heading:s">
                <a href="#" data-card-link>
                    A card heading
                </a>
		    </h3>
		    <p>Some card content in the card body</p>
		</div>
	</div>
</li>

Form

Basic form elements to use.

Fields

Form group

Group form elements like the label, input, hints etc. together.

Form elements here

Markup

<div class="form__group"><em>Form elements here</em></div>

Form field

Field label

Markup

<div class="form__group">
		<label class="form__label" for="input-text-example">Field label</label>
		<input class="form__input" id="input-text-example" name="input-text-example" type="text" />
	</div>

Select

Field label

Markup

<div class="form__group">
	<label class="form__label" for="select-example">Field label</label>
	<div class="custom-select">
		<select id="example3" name="select-example">
			<option value="option1">Option 1</option>
			<option value="option2">Option 2</option>
			<option value="option3">Option 3</option>
			<option value="option4">Option 4</option>
		</select>
	</div>
</div>

Text area

Field label

Explanation for textarea

Markup

<div class="form__group">
		<label class="form__label" for="textarea-example">Field label</label>
		<div class="form__hint" id="textarea-example-hint">Explanation for textarea</div>
		<textarea class="form__input" rows="6" id="textarea-example" name="textarea-example" aria-describedby="textarea-example-hint"></textarea>
	</div>

Checkboxes

Checkbox options

Explanation for options

Option 1

Option 2

Option 3

Markup

<div class="form__group">
	<fieldset aria-describedby="checkbox-example-hint">
		<legend class="heading:xs">Checkbox options</legend>
		<div class="form__hint" id="checkbox-example-hint">Explanation for options</div>
		<div class="multiple-choice">
			<input id="checkbox-example-1" name="checkbox-example" type="checkbox" value="option1">
			<label for="checkbox-example-1">Option 1</label>
		</div>
		<div class="multiple-choice">
			<input id="checkbox-example-2" name="checkbox-example" type="checkbox" value="option2">
			<label for="checkbox-example-2">Option 2</label>
		</div>
		<div class="multiple-choice">
			<input id="checkbox-example-3" name="checkbox-example" type="checkbox" value="option3">
			<label for="checkbox-example-3">Option 3</label>
		</div>
	</fieldset>
</div>

Radios

Radio options Explanation for options

Option 1

Option 2

Option 3

Markup

<div class="form__group">
	<fieldset aria-describedby="radio-example-hint">
		<legend class="heading:xs">Radio options</legend>
		<span class="form__hint" id="radio-example-hint">Explanation for options</span>
		<div class="multiple-choice">
			<input id="radio-example-1" name="radio-example" type="radio" value="option1">
			<label for="radio-example-1">Option 1</label>
		</div>
		<div class="multiple-choice">
			<input id="radio-example-2" name="radio-example" type="radio" value="option2">
			<label for="radio-example-2">Option 2</label>
		</div>
		<div class="multiple-choice">
			<input id="radio-example-3" name="radio-example" type="radio" value="option3">
			<label for="radio-example-3">Option 3</label>
		</div>
	</fieldset>
</div>

Input group

Explanation

Markup

<fieldset class="form__group" aria-describedby="group-example-hint">
		<legend class="heading:xs">Input group</legend>
		<div class="form__hint" id="group-example-hint">Explanation</div>
		<div class="form__input-group">
			<input class="form__input" id="group-example-input" name="group-example-input" type="text" />
			<button class="button" type="button">Button</button>
		</div>
	</fieldset>

Errors

Form field error

Field label Error: Some error message

Markup

<div class="form__group form__group--error">
    	<label class="form__label" for="input-error-example">Field label</label>
    	<span id="passport-issued-error" class="form__error">
          <span class="visually:hidden">Error:</span> Some error message
        </span>
    	<input class="form__input" id="input-error-example" name="input-text-example" type="text" aria-describedby="national-insurance-number-error" />
    </div>

Utilities

Classes that mostly do just one thing.

Margin

margin-top:auto

Auto margin top

margin-top:none

No margin top

margin-top:ms-4

Margin top using Modular scale of -4

Example

margin-top:ms-3

Margin top using Modular scale of -3

Example

margin-top:ms-2

Margin top using Modular scale of -2

Example

margin-top:ms-1

Margin top using Modular scale of -1

Example

margin-top:ms0

Margin top using Modular scale of 0

Example

margin-top:ms1

Margin top using Modular scale of 1

Example

margin-top:ms2

Margin top using Modular scale of 2

Example

margin-top:ms3

Margin top using Modular scale of 3

Example

margin-top:ms4

Margin top using Modular scale of 4

Example

Padding

padding

Sets a responsive (modular scale 0) padding on all sides of an element

Example

padding-top:none

No padding top

padding-top:ms-4

Padding top using Modular scale of -4

Example

padding-top:ms-3

Padding top using Modular scale of -3

Example

padding-top:ms-2

Padding top using Modular scale of -2

Example

padding-top:ms-1

Padding top using Modular scale of -1

Example

padding-top:ms0

Padding top using Modular scale of 0

Example

padding-top:ms1

Padding top using Modular scale of 1

Example

padding-top:ms2

Padding top using Modular scale of 2

Example

padding-top:ms3

Padding top using Modular scale of 3

Example

padding-top:ms4

Padding top using Modular scale of 4

Example

Position

Relative

Add position: relative

Absolute

Add position: absolute

Static

Add position: static

Z-index 1

Add z-index: 1

Z-index 2

Add z-index: 2

Z-index 3

Add z-index: 3

Ratio

ratio:16:9

Example

ratio:5:2

Example

ratio:4:3

Example

ratio:3:2

Example

ratio:1:1

Example

Visibility

visually:hidden

Hides an element visually while keeping it readable for screenreaders and search engines

overflow:hidden

Hides overflowing content