Styleguide
Theme: invita
Headings (MOBILE) (TABLET) (DESKTOP)
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
This is a prominent heading
It can be used on any tag
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 "paragraph-para"
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
Icons
We are using material designs icons found here. Since we are separating markup from styling we add the ones we need separately.
Lists
- This is an unordered list item
- This is also an unordered list item
- This is another unordered list item
Buttons
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