Styleguide

• Colors

  Main Color

  Sub Colors

  Sub2 Colors

  Sub3 Colors

  Func Colors

  Success Colors

  Error Colors

  Font Colors

  .u-font-color-1

  .u-font-color-2

  .u-font-color-3

  .u-font-color-4

  .u-font-color-5

  .u-font-color-6

  .u-font-color-7

  .u-font-color-8

  Bg Colors

  .u-bg-color-1

  .u-bg-color-2

  .u-bg-color-3

  .u-bg-color-4

  .u-bg-color-5

  .u-bg-color-6

  .u-bg-color-7

  .u-bg-color-8

  .u-bg-color-9

  .u-bg-color-10

  .u-bg-color-11

  .u-bg-color-12

  .u-bg-color-13

  .u-bg-color-14

  .u-bg-color-15

  .u-bg-color-16

  Border Colors

  .u-border-color-1

  .u-border-color-2

  .u-border-color-3

  .u-border-color-4

  .u-border-color-5

  .u-border-color-6

• Typography

  Heading Font: Poppins

  H0

  H1

  H2

  H3

  H0

  H1

  H2

  H3

  H0

  H1

  H2

  H3

  H0

  H1

  H2

  H3

  H0

  H1

  H2

  H3

  H0

  H1

  H2

  H3

  H0

  H1

  H2

  H3

  H0

  H1

  H2

  H3

  Body Font: Arial

  Body bigger

  Bold bigger

  Body

  Bold

  Cta

  Body small

  Bold small

  Body smallest

  Bold smallest

  Body bigger

  Bold bigger

  Body

  Bold

  Cta

  Body small

  Bold small

  Body smallest

  Bold smallest

  Body bigger

  Bold bigger

  Body

  Bold

  Cta

  Body small

  Bold small

  Body smallest

  Bold smallest

  Body bigger

  Bold bigger

  Body

  Bold

  Cta

  Body small

  Bold small

  Body smallest

  Bold smallest

  Body bigger

  Bold bigger

  Body

  Bold

  Cta

  Body small

  Bold small

  Body smallest

  Bold smallest

  Body bigger

  Bold bigger

  Body

  Bold

  Cta

  Body small

  Bold small

  Body smallest

  Bold smallest

  Body bigger

  Bold bigger

  Body

  Bold

  Cta

  Body small

  Bold small

  Body smallest

  Bold smallest

  Body bigger

  Bold bigger

  Body

  Bold

  Cta

  Body small

  Bold small

  Body smallest

  Bold smallest

• Buttons

  Button primary

  Button primary

  Button primary

  Button secondary

  Button secondary

  Button secondary

  Button tertiary

  Button tertiary

  Button tertiary

  Button error

  Button error

  Button error

  Button success

  Button success

  Button success

  Button primary

  Button primary

  Button primary

  Button secondary

  Button secondary

  Button secondary

  Button tertiary

  Button tertiary

  Button tertiary

  Button error

  Button error

  Button error

  Button success

  Button success

  Button success

  Button primary

  Button primary

  Button primary

  Button secondary

  Button secondary

  Button secondary

  Button tertiary

  Button tertiary

  Button tertiary

  Button error

  Button error

  Button error

  Button success

  Button success

  Button success

  Button primary

  Button primary

  Button primary

  Button secondary

  Button secondary

  Button secondary

  Button tertiary

  Button tertiary

  Button tertiary

  Button error

  Button error

  Button error

  Button success

  Button success

  Button success

  Button primary

  Button primary

  Button primary

  Button secondary

  Button secondary

  Button secondary

  Button tertiary

  Button tertiary

  Button tertiary

  Button error

  Button error

  Button error

  Button success

  Button success

  Button success

  Button primary

  Button primary

  Button primary

  Button secondary

  Button secondary

  Button secondary

  Button tertiary

  Button tertiary

  Button tertiary

  Button error

  Button error

  Button error

  Button success

  Button success

  Button success

  Button primary

  Button primary

  Button primary

  Button secondary

  Button secondary

  Button secondary

  Button tertiary

  Button tertiary

  Button tertiary

  Button error

  Button error

  Button error

  Button success

  Button success

  Button success

  Button primary

  Button primary

  Button primary

  Button secondary

  Button secondary

  Button secondary

  Button tertiary

  Button tertiary

  Button tertiary

  Button error

  Button error

  Button error

  Button success

  Button success

  Button success

  Button primary

  Button primary

  Button primary

  Button secondary

  Button secondary

  Button secondary

  Button tertiary

  Button tertiary

  Button tertiary

  Button error

  Button error

  Button error

  Button success

  Button success

  Button success

• Form Inputs

  Pole tekstowe

  Pole tekstowe

  +48

  Pole tekstowe

  m2

  Pole tekstowe

  +48

  m2

  Pole tekstowe *

  Pole tekstowe *

  Pole tekstowe * Tutaj krótki opis

  Pole tekstowe * Tutaj krótki opis

  Wystąpił błąd

  Email

  Email

  +48

  Email

  m2

  Email

  +48

  m2

  Email *

  Email *

  Email * Tutaj krótki opis

  Email * Tutaj krótki opis

  Wystąpił błąd

  Hasło

  Hasło

  +48

  Hasło

  m2

  Hasło

  +48

  m2

  Hasło *

  Hasło *

  Hasło * Tutaj krótki opis

  Hasło * Tutaj krótki opis

  Wystąpił błąd

  Wyszukiwanie

  Wyszukiwanie

  +48

  Wyszukiwanie

  m2

  Wyszukiwanie

  +48

  m2

  Wyszukiwanie *

  Wyszukiwanie *

  Wyszukiwanie * Tutaj krótki opis

  Wyszukiwanie * Tutaj krótki opis

  Wystąpił błąd

  Url

  Url

  +48

  Url

  m2

  Url

  +48

  m2

  Url *

  Url *

  Url * Tutaj krótki opis

  Url * Tutaj krótki opis

  Wystąpił błąd

  Telefon

  Telefon

  +48

  Telefon

  m2

  Telefon

  +48

  m2

  Telefon *

  Telefon *

  Telefon * Tutaj krótki opis

  Telefon * Tutaj krótki opis

  Wystąpił błąd

  Numer

  Numer

  +48

  Numer

  m2

  Numer

  +48

  m2

  Numer *

  Numer *

  Numer * Tutaj krótki opis

  Numer * Tutaj krótki opis

  Wystąpił błąd

  Data

  Data

  +48

  Data

  m2

  Data

  +48

  m2

  Data *

  Data *

  Data * Tutaj krótki opis

  Data * Tutaj krótki opis

  Wystąpił błąd

  Autocomplete

  Autocomplete *

  Autocomplete *

  Autocomplete * Tutaj krótki opis

  Autocomplete * Tutaj krótki opis

  Wystąpił błąd

  Select

  -- Wybierz wartość -- Tak Nie Nie wiem

  Select *

  -- Wybierz wartość -- Tak Nie Nie wiem

  Select *

  -- Wybierz wartość -- Tak Nie Nie wiem

  Select * Tutaj krótki opis

  -- Wybierz wartość -- Tak Nie Nie wiem

  Select * Tutaj krótki opis

  -- Wybierz wartość -- Tak Nie Nie wiem

  Wystąpił błąd

  Textarea

  Textarea *

  Textarea *

  Textarea * Tutaj krótki opis

  0/350

  Textarea * Tutaj krótki opis

  Wystąpił błąd 0/350

  File

  Upuść plik tutaj
  lub

  Wgraj plik Edytuj

  File *

  Upuść plik tutaj
  lub

  Wgraj plik Edytuj

  File *

  Upuść plik tutaj
  lub

  Wgraj plik Edytuj

  File * Tutaj krótki opis

  Upuść plik tutaj
  lub

  Wgraj plik Edytuj

  File * Tutaj krótki opis

  Upuść plik tutaj
  lub

  Wgraj plik Edytuj

  Wystąpił błąd

  Checkbox Opcja 1 Opcja 2 Opcja 3

  Checkbox * Opcja 1 Opcja 2 Opcja 3

  Checkbox * Opcja 1 Opcja 2 Opcja 3

  Checkbox * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3

  Checkbox * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3

  Wystąpił błąd

  Radio Button Opcja 1 Opcja 2 Opcja 3

  Radio Button * Opcja 1 Opcja 2 Opcja 3

  Radio Button * Opcja 1 Opcja 2 Opcja 3

  Radio Button * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3

  Radio Button * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3

  Wystąpił błąd

  Checkbox Inline Opcja 1 Opcja 2 Opcja 3

  Checkbox Inline * Opcja 1 Opcja 2 Opcja 3

  Checkbox Inline * Opcja 1 Opcja 2 Opcja 3

  Checkbox Inline * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3

  Checkbox Inline * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3

  Wystąpił błąd

  Radio Button Inline Opcja 1 Opcja 2 Opcja 3

  Radio Button Inline * Opcja 1 Opcja 2 Opcja 3

  Radio Button Inline * Opcja 1 Opcja 2 Opcja 3

  Radio Button Inline * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3

  Radio Button Inline * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3

  Wystąpił błąd

  Checkbox Big Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Checkbox Big Text * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Checkbox Big Text * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Checkbox Big Text * Tutaj krótki opis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Checkbox Big Text * Tutaj krótki opis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Wystąpił błąd

  Radio Button Big Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Radio Button Big Text * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Radio Button Big Text * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Radio Button Big Text * Tutaj krótki opis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Radio Button Big Text * Tutaj krótki opis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Wystąpił błąd

  Checkbox Big Text Toggleable

  Zaznacz wszystkie zgody

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Checkbox Big Text Toggleable *

  Zaznacz wszystkie zgody

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Checkbox Big Text Toggleable *

  Zaznacz wszystkie zgody

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Checkbox Big Text Toggleable * Tutaj krótki opis

  Zaznacz wszystkie zgody

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Checkbox Big Text Toggleable * Tutaj krótki opis

  Zaznacz wszystkie zgody

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

  Wystąpił błąd

  Switch

  Switch *

  Switch *

  Switch * Tutaj krótki opis

  Switch * Tutaj krótki opis

  Wystąpił błąd

• Articles

  Studiowanie online

  

  Studia online – dla kogo to najlepszy wybór? Sprawdź, czy to opcja dla Ciebie

  Wybór ścieżki edukacyjnej w dzisiejszych czasach nie musi oznaczać rezygnacji z dotychczasowego stylu życia czy przeprowadzki do innego miasta. Nowoczesne…

  Studiowanie online

  

  Studia online – dla kogo to najlepszy wybór? Sprawdź, czy to opcja dla Ciebie

  Wybór ścieżki edukacyjnej w dzisiejszych czasach nie musi oznaczać rezygnacji z dotychczasowego stylu życia czy przeprowadzki do innego miasta. Nowoczesne…

  Studiowanie online

  

  Studia online – dla kogo to najlepszy wybór? Sprawdź, czy to opcja dla Ciebie

  Wybór ścieżki edukacyjnej w dzisiejszych czasach nie musi oznaczać rezygnacji z dotychczasowego stylu życia czy przeprowadzki do innego miasta. Nowoczesne…

  Studiowanie online

  

  Studia online – dla kogo to najlepszy wybór? Sprawdź, czy to opcja dla Ciebie

  Wybór ścieżki edukacyjnej w dzisiejszych czasach nie musi oznaczać rezygnacji z dotychczasowego stylu życia czy przeprowadzki do innego miasta. Nowoczesne…

  Studiowanie online

  

  Studia online – dla kogo to najlepszy wybór? Sprawdź, czy to opcja dla Ciebie

  Wybór ścieżki edukacyjnej w dzisiejszych czasach nie musi oznaczać rezygnacji z dotychczasowego stylu życia czy przeprowadzki do innego miasta. Nowoczesne…

  Studiowanie online

  

  Studia online – dla kogo to najlepszy wybór? Sprawdź, czy to opcja dla Ciebie

  Wybór ścieżki edukacyjnej w dzisiejszych czasach nie musi oznaczać rezygnacji z dotychczasowego stylu życia czy przeprowadzki do innego miasta. Nowoczesne…

  Studiowanie online

  

  Studia online – dla kogo to najlepszy wybór? Sprawdź, czy to opcja dla Ciebie

  Wybór ścieżki edukacyjnej w dzisiejszych czasach nie musi oznaczać rezygnacji z dotychczasowego stylu życia czy przeprowadzki do innego miasta. Nowoczesne…

  Primary Button

  Studiowanie online

  

  Studia online – dla kogo to najlepszy wybór? Sprawdź, czy to opcja dla Ciebie

  Wybór ścieżki edukacyjnej w dzisiejszych czasach nie musi oznaczać rezygnacji z dotychczasowego stylu życia czy przeprowadzki do innego miasta. Nowoczesne…

  Studiowanie online

  

  Studia online – dla kogo to najlepszy wybór? Sprawdź, czy to opcja dla Ciebie

  

  Studia online – dla kogo to najlepszy wybór? Sprawdź, czy to opcja dla Ciebie

  Secondary Button

  Studiowanie online

  

  Studia online – dla kogo to najlepszy wybór? Sprawdź, czy to opcja dla Ciebie

  Wybór ścieżki edukacyjnej w dzisiejszych czasach nie musi oznaczać rezygnacji z dotychczasowego stylu życia czy przeprowadzki do innego miasta. Nowoczesne…

  Studia online – dla kogo to najlepszy wybór? Sprawdź, czy to opcja dla Ciebie