Invita

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 H2 headåäö

This is a paragraph with some text

This is a H3 headåäö

This is a paragraph with some text

This is a H4 headåäö

This is a paragraph with some text

This is a H1 heading
with multiple lines

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 heading
with multiple lines

This is a paragraph with some text

This is a H4 heading
with multiple lines

This is a paragraph with some text


Colours


Icons

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

add.svg
arrow-down.svg
book-appointment.svg
calendar.svg
check.svg
close.svg
delete.svg
document.svg
error.svg
exit_to_app.svg
expand_less.svg
expand_more.svg
facebook.svg
favourite.svg
find-store.svg
flag-en.svg
flag-fi.svg
flag-ru.svg
flag-sv.svg
instagram.svg
map.svg
menu.svg
my-account.svg
navigate_before.svg
navigate_next.svg
plus.svg
search.svg
social-facebook.svg
social-houzz.svg
social-instagram.svg
social-linked-in.svg
social-pinterest.svg
social-twitter.svg
social-youtube.svg
spinner.svg
time.svg
wastebin.svg

Lists

  • This is an unordered list item
  • This is also an unordered list item
  • This is another unordered list item
  • This is an unordered list item with custom bullets
  • This is also an unordered list item custom bullets
  • This is another unordered list item custom bullets

Buttons







My link


Field must not be empty. Please enter value.
You must enter at least 3 characters
{{ slotProps.errorsText }}
{{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

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