Styleguide
Theme: invita
Headings (MOBILE) (TABLET) (DESKTOP)
This is a prominent heading
It can be used on any tag not only the H1 tag
This is a H1 headåäö
This is a preamble paragraph with some extra text to show it
This is a H1 heading
with multiple lines
This is a paragraph with some text
This is a H2 headåäö
This is a paragraph with some text
This is a H2 heading
with multiple lines
This is a paragraph with some text
This is a H3 headåäö
This is a paragraph with some text
This is a H3 heading
with multiple lines
This is a paragraph with some text
This is a H4 headåäö
This is a paragraph with some text
This is a H4 heading
with multiple lines
This is a paragraph with some text
This is a H5 headåäö
This is a paragraph with some text
This is a H5 heading
with multiple lines
This is a paragraph with some text
This is a H6 headåäö
This is a paragraph with some text
This is a H6 heading
with multiple lines
This is a paragraph with some text
Paragraphs
Example of "paragraph-preamble-a"
Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design and typography are utilized to support its usability, influencing how the user performs certain interactions and improving the aesthetic appeal of the design; design aesthetics may enhance or detract from the ability of users to use the functions of the interface.
Example of "paragraph-preamble-b"
Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design and typography are utilized to support its usability, influencing how the user performs certain interactions and improving the aesthetic appeal of the design; design aesthetics may enhance or detract from the ability of users to use the functions of the interface.
Example of "paragraph-lead"
Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design and typography are utilized to support its usability, influencing how the user performs certain interactions and improving the aesthetic appeal of the design; design aesthetics may enhance or detract from the ability of users to use the functions of the interface.
Example of "<p>"
Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design and typography are utilized to support its usability, influencing how the user performs certain interactions and improving the aesthetic appeal of the design; design aesthetics may enhance or detract from the ability of users to use the functions of the interface.
Example of "paragraph-small"
Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design and typography are utilized to support its usability, influencing how the user performs certain interactions and improving the aesthetic appeal of the design; design aesthetics may enhance or detract from the ability of users to use the functions of the interface.
Example of "paragraph-byline"
Colours
Site common
Backgrounds and tones
Elements/Items
Extra alert
Lists
- This is an unordered list item
- This is also an unordered list item
- This is another unordered list item
Buttons
Links
Forms and inputs
Dividers
Tabs
Overlays
Picture ratios
Swipe (on touch devices) - Max 4 visible columns on large desktop
Capture the swipe event on mobile devices. Try swiping the area below.
Swipe (on touch devices) - Max 6 visible columns on large desktop
Capture the swipe event on mobile devices. Try swiping the area below.
Accordion
Opens item by content falling down
Quote
Displays a quote with two lines above and under the quote
Icons
We are using material designs icons found here. Since we are separating markup from styling we add the ones we need separately.
Tracking
The site uses GTM and below is a simple call of the event you can use
Device support
Detect what the current device supports