The Styleguide

This page contains main classes and styles that come with the nklnk template

Based on client-first 1.0 and nklnk 0.2

Colors

Use these color swatches to change colours throughout the site

Body text

#163860

AAA

Light text

#bca48f

AAA

Background color

#f3e9e0

AAA

Accent color 1

#4f76b8

AAA

Accent color 2

#202020

AAA

Accent color 3

#202020

AAA

Default headings

These classes affect the look of all <h> tags on the site

Heading 1

All H1 Headings

Heading 2

All H2 Headings

Heading 3

All H3 Headings

Heading 4

All H4 Headings

Heading 5

All H5 Headings

Heading 6

All H6 Headings

Heading classes

These classes can be used to style text elements that do not inherit from default <h> classes

heading-huge

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall

Text classes

These classes affect different properties of the text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

text-size-large

text-size-medium

text-size-regular

text-size-small

text-size-tiny

Lorem ipsum

text-style-strikethrough

Lorem ipsum

text-style-italic

Lorem ipsum

text-style-muted

Lorem ipsum

text-style-allcaps

Lorem ipsum

text-style-nowrap

Lorem ipsum

text-style-link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

text-style-quote

text-style-2lines

text-style-3lines

Default text classes

These classes affect default styles of text elements

All Paragraphs

Lorem ipsum

All Links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

All Quotes

Text weight

These classes affect the font-weight property

Lorem ipsum

text-weight-xbold

Lorem ipsum

text-weight-bold

Lorem ipsum

text-weight-semibold

Lorem ipsum

text-weight-medium

Lorem ipsum

text-weight-normal

Lorem ipsum

text-weight-light

Text alignment

These classes affect the text-align property

Lorem ipsum

text-align-left

Lorem ipsum

text-align-center

Lorem ipsum

text-align-right

Text color

These classes affect the font-color property

Lorem ipsum

text-color-white

Lorem ipsum

text-color-grey

Lorem ipsum

text-color-dark

Lorem ipsum

text-color-black

Rich text

This class can be applied to a rich text element to inherit all default classes for headings and text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

The rich text element allows you to create and format headings,
The rich text element allows you to create and format headings,
The rich text element allows you to create and format headings,

This is a link

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

This is a placeholder image.

text-rich-text

Background colors

These classes affect the background-color property

background-color-white

background-color-grey

background-color-black

Lists

These classes control default styles of list elements

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Icons

These classes can be used on images to get a fixed-size image

icon-small

icon-medium

icon-large

Square icons

These classes can be used on images to get a square image

icon-1x1-small

icon-1x1-medium

icon-1x1-large

Buttons

Button components

button

button-secondary

Form

Form component containing classes for labels, text areas and more

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

form-input

All Labels

Signup