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

My link

Forms and inputs


Field must not be empty. Please enter value.
You must enter at least 3 characters
Below you can see which of the validators on this field that are active and who flag an error.
{{ error.name }}



Dividers

This is a divider heading


This is a divider caption

Tabs

This is the content of tab 1 and it is selected initially This is the content of tab 2

Click me to set tab 1 | Click me to set tab 2


Overlays

Testing the overlay

This is the overlay! The styling for this element needs to be at root level. Outside of the page styling.

This is the overlay! The styling for this element needs to be at root level. Outside of the page styling.
Close

Picture ratios




Accordion

Opens item by content falling down

Text 1 Text 2

Quote

Displays a quote with two lines above and under the quote

We are so incredibly impressed by the knowledge and skills that our Magnet designer Ann posessed. She made our vision a reality! The whole process from inspiration to getting the kitchen installed was a smooth experience
Anne Smith
Kitchen Buyer

Icons

We are using material designs icons found here. Since we are separating markup from styling we add the ones we need separately.

<i class="icon icon-loader" style="--size: 1em;"></i>

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