Introduction
Welcome to the style guide for your website. You can use this page to quickly make changes to things such as fonts, text sizes, colours, buttons, and more. These changes will then be applied across your website.
To ensure your site is responsive and adapts to all devices, some elements will have different stylings across different breakpoints. For example, heading sizes on desktop breakpoints are slightly different to those on mobile breakpoints.
Your style guide is not viewable to the public, and can only be accessed with a password.
If you have any questions about this style guide or your website in general, then please do not hesitate to email me - example@domain.com
Farger
EKH rosa
Bej
Lys blå
Mørk grå
Sekundær
Andre farger
Typography
The primary colour for all typography on your website is #EEEEEE.
As mentioned in the introduction, the sizing of your headings differ between desktop and mobile breakpoints. Both desktop and mobile breakpoints have a base font size of 18px (1em). All pixel values have been rounded.
Desktop - Major Third Scale (1.25)
44px | 35px | 28px | 23px | 18px | 14px | 12px
Mobile - Minor Third Scale (1.20)
37px | 31px | 26px | 22px | 18px | 15px | 12px
The quick brown fox jumps over the lazy dog.
Mobile: Arial | 37px / 2.05em | 110% | Bold
The quick brown fox jumps over the lazy dog.
Mobile: Arial | 31px / 1.72em | 120% | Bold
The quick brown fox jumps over the lazy dog.
Mobile: Arial | 26px / 1.44em | 120% | Bold
The quick brown fox jumps over the lazy dog.
Mobile: Arial | 22px / 1.22em | 130% | Bold
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
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.
Block Quote
- This is a piece of text. Not quite the same as a paragraph element.
- This is a piece of text. Not quite the same as a paragraph element.
- This is a piece of text. Not quite the same as a paragraph element.
- This is a piece of text. Not quite the same as a paragraph element.
- This is a piece of text. Not quite the same as a paragraph element.
- This is a piece of text. Not quite the same as a paragraph element.
Logos & Assets
Rich Text - RT
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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
This is a H2 heading
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.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
This is a H2 heading
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.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
- Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viv
- Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viv
- Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viv
-
This is a H3 heading
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.
- Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viv
- Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viv
- Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viv
- Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viv
-
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.
This is a H4 heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is a H5 heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is a H6 heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is an ordered list -
- Fully responsive
- Cloneable
- Swap in with your client's styles
This an unordered list -
- Fully responsive
- Cloneable
- Swap in with your client's styles
Below is what block quotes will look like in your blog posts -
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
Rich Text ingress (RT ingress)
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Last ned vårt prisliste:
Other
You can use this section for any other important elements that you'll use throughout your client's website, such as -
• Navigation
• Footer
• Icons
• Cards
• Form elements
• Social media share buttons
Thank you for checking out this style guide template. You can clone it here. If you have any questions about it, please feel free to message me on Twitter.
Se våre referanser
