Colors

All colors used in the project

primary
secondary
greyscale

Fonts

All fonts used in the project

Gilroy Light

AaBbCcDd

Gilroy Regular

AaBbCcDd

Gilroy SemiBold

AaBbCcDd

Gilroy Bold

AaBbCcDd

Typography (Font: Gilory)

All information about headings, paragraphs etc.

Headings

This is a h1 title

xs
font-size: 26px
line-height: 30px
md
font-size: 32px
line-height: 39px
lg
font-size: 36px
line-height: 40px
xl
font-size: 40px
line-height: 43px
xxl
font-size: 45px
line-height: 47px
fhd
font-size: 50px
line-height: 54px

This is a h2 title

xs
font-size: 24px
line-height: 26px
md
font-size: 28px
line-height: 32px
lg
font-size: 28px
line-height: 32px
xl
font-size: 32px
line-height: 35px
xxl
font-size: 36px
line-height: 38px
fhd
font-size: 45px
line-height: 48px

This is a h3 title

xs
font-size: 19px
line-height: 21px
md
font-size: 20px
line-height: 22px
lg
font-size: 20px
line-height: 22px
xl
font-size: 21px
line-height: 23px
xxl
font-size: 24px
line-height: 26px
fhd
font-size: 30px
line-height: 32px

This is a h4 title

xs
font-size: 18px
line-height: 20px
md
font-size: 18px
line-height: 20px
lg
font-size: 18px
line-height: 20px
xl
font-size: 19px
line-height: 21px
xxl
font-size: 20px
line-height: 22px
fhd
font-size: 22px
line-height: 28px
This is a h5 title
xs
font-size: 15px
line-height: 17px
md
font-size: 15px
line-height: 17px
lg
font-size: 15px
line-height: 17px
xl
font-size: 15px
line-height: 17px
xxl
font-size: 16px
line-height: 18px
fhd
font-size: 18px
line-height: 26px

Body

This is body text
This is italic body text
This is a link inside body text

xs
font-size: 14px
line-height: 24px
md
font-size: 14px
line-height: 24px
lg
font-size: 14px
line-height: 24px
xl
font-size: 14px
line-height: 24px
xxl
font-size: 15px
line-height: 26px
fhd
font-size: 16px
line-height: 30px
This is small text
This is italic small text
This is a link inside small text
xs
font-size: 12px
line-height: 13px
md
font-size: 12px
line-height: 13px
lg
font-size: 12px
line-height: 13px
xl
font-size: 13px
line-height: 14px
xxl
font-size: 13px
line-height: 14px
fhd
font-size: 14px
line-height: 15px

This is intro text
This is italic intro text
This is a link inside intro text

xs
font-size: 16px
line-height: 26px
md
font-size: 16px
line-height: 26px
lg
font-size: 16px
line-height: 26px
xl
font-size: 16px
line-height: 26px
xxl
font-size: 17px
line-height: 28px
fhd
font-size: 18px
line-height: 30px

Quote

Lorem ipsum dolor sit amet, consect etur adipiscing elit. Donec eget sapien tempor, posuere mi quis, semper orci.

xs
font-size: 18px
line-height: 28px
md
font-size: 18px
line-height: 28px
lg
font-size: 18px
line-height: 28px
xl
font-size: 18px
line-height: 28px
xxl
font-size: 22px
line-height: 30px
fhd
font-size: 26px
line-height: 40px

Lists

Ordered list

  1. List item
  2. List item
  3. List item

Unordered list

  • List item
  • List item
  • List item

Checklist

  • List item
  • List item
  • List item

Icons

All icons used in the project

Buttons

Default and hover state
Disabled state

Forms

Input fields

Default state
Disabled state
Readonly state

Checkboxes and radios

Stacked checkboxes

Stacked radios

Inline variations

Other

Accordion

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Aenean commodo ligula eget dolor. Aenean massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Aenean commodo ligula eget dolor. Aenean massa.

Labels

Open huis Nieuw Uitgelicht Verkocht Verkocht o.v.b. Verhuurd Open huis: 13 juni 16:00 tot 17:00

Deze website maakt gebruik van cookies

Voor welke cookies geef je akkoord?

Meer informatie