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
Read more
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.
Placeholder
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

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, 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.
Placeholder
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
Read more
Backgrounds
Icons Sizes
Icons 1x1 Sizes

Card Variants

3

+

Revisions

20

+

Headscratches

Card variant 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Read more

Card Variant 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Read more

Card Variant 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Read more

Academedia

Aktiespararna

Amra Medical

Apsis

Asedo

Asedo Skafferi

AstraZeneca

Backstory Brandning

Based on People

Carebound

Centuri

Cisive

Cloud Solutions

Collabodoc

Containertjänst

Credo.ai

Deepseq.ai

Dianthus

EUcaps

Ebab

Edukind

Effective Communication

Ejes Choklad

Emma Engelbert

Envigas

Ericsson

Filippa K

FundedByMe

Gasometer

HUR

Hasselbacken Hotel

Herrmans

Hydri

IP-Solutions

Isolotto Beach Club

KSMG

Keeparo

Key Solutions

Kinectify

Kungsbron

LA ROQQA

Leadfront

Lekab

Lesslie

Litium

Luna Diabetes

Lydmar Hotel

Maderna Fonder

Maderna Terapi

Matilda FoodTech

Miramis

Monopol Media

NZF Canada

Nalini Tours

Naprapathögskolan

Neonode

Nordic Lights

OK

Ocean Waste Plastic

Pack Tech

PatientSky

Patriam

Platonum

Porsche Club Sweden

ROL Group

Recipharm

Rey Urban

Roots Invest

S2

Sally

Saxo

Scandinavian Blonde

Sellmore

Simplehomes

Skafos.ai

Skattebetalarna

Snow Software

Sophone

Streamstone

Submit

Swivel CRM

TSS

Taskbuddy

The Place

Towo Labs

Trapets

Tyrens

UX Stream

UX Ventures

Ungdomsförmedlingen

Uniscale

VO2

Vloxq

Wiraya

Xiris Group

Yogayama

Zeitgeist

iFenix