Stormfors - Style Guide

Client-First Version 1.0

HTML Heading Tags

H1
Sample text is being used as a placeholder.

H2
Sample text is being used as a placeholder as real text.

H3
Sample text helps you understand how real text may look on your website.

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

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

H6
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 that is normally present.

Heading Classes

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall

Other HTML Tags

All Paragraphs
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.

All Links

All Quotes
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.

Text Classes

text-size-large
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.

text-size-medium
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.

text-size-regular
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.

text-size-small
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.

text-size-tiny
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.

text-style-strikethrough

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

text-style-quote
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.

text-style-2lines
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.

text-style-3lines
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.dolor sit amet,

Text Weights

text-weight-normal

text-weight-bold

Text Alignments

text-align-left

text-align-center

text-align-right

Text Colors

text-color-grey

text-color-black

Slider Pagination

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

Link

The rich text element allows you to create and format headings, and if the line is longer it will cause a linebrake that need to be acounted for. Even if the text spans multiple lines like in this example where it spans three or more lines.
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.

‍

The rich text element allows you to create and format headings, and if the line is longer it will cause a linebrake that need to be acounted for. Even if the text spans multiple lines like in this example where it spans three or more lines.
The rich text element allows you to create and format headings,
The rich text element allows you to create and format headings,
‍

Rich Text

Heading 1 dhdhdgh

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

The rich text element allows you to create and format headings, and if the line is longer it will cause a linebrake that need to be acounted for. Even if the text spans multiple lines like in this example where it spans three or more lines.
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.

‍

The rich text element allows you to create and format headings, and if the line is longer it will cause a linebrake that need to be acounted for. Even if the text spans multiple lines like in this example where it spans three or more lines.
The rich text element allows you to create and format headings,
The rich text element allows you to create and format headings,
‍

Color Palette

Primary

Secondary

Text Color

Buttons

button

Backgrounds

Icons Sizes

Icons 1x1 Sizes

Card Variants

Revisions

Headscratches

Stormfors - Style Guide

H1Sample text is being used as a placeholder.

H2Sample text is being used as a placeholder as real text.

H3Sample text helps you understand how real text may look on your website.

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

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

H6Sample 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 that is normally present.

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1 dhdhdgh

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Card Variants

Card variant 1

Card Variant 2

Card Variant 3

Aktiespararna

Amra Medical

Apsis

Asedo

Centuri

Containertjänst

Credo.ai

Crosskey

Dianthus

Ebab

Effective Communication

Ejes Choklad

Envigas

FundedByMe

HUR

Herrmans

IP-Solutions

KSMG

Key Solutions

Kinectify

Leadfront

Lekab

Lesslie

Litium

Luna Diabetes

Maderna Fonder

Maderna Terapi

Matilda FoodTech

Neonode

Nordic Lights

OK

PatientSky

Patriam

Qarlbo

Recipharm

Rey Urban

Roots Invest

S2

Saxo

Skattebetalarna

Snow Software

Sophone

Submit

TSS

Taskbuddy

The Place

Trapets

Tyrens

UX Ventures

VO2

Wiraya

Yogayama

H1
Sample text is being used as a placeholder.

H2
Sample text is being used as a placeholder as real text.

H3
Sample text helps you understand how real text may look on your website.

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

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

H6
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 that is normally present.