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 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.

accordion-normal.svg
add.svg
angle.svg
arrow-down.svg
arrow-left.svg
arrow-next-short.svg
arrow-previous.svg
book-appointment.svg
cabinet.svg
calendar.svg
check.svg
close.svg
customer.svg
delete.svg
designer.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
location_on.svg
map.svg
marker.svg
menu.svg
my-account.svg
my-user-account.svg
navigate_before.svg
navigate_next.svg
person_outline.svg
play.svg
plus.svg
search.svg
size.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
square_foot.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

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

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


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

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