Informacje podstawowe

Grid
Kolory
Przyciski
Rozmiary fontów
Listy
Padding i marginesy

Grid

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1600px
Container `max-width`	None (auto)	540px	720px	960px	1164px	1320px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	1.5rem - 24px (.75rem - 12px on left and right)

Podstawowy container i mozliwe kolumny

col-12

col-11

col-10

col-9

col-8

col-7

col-6

col-5

col-4

col-3

col-2

col-1

Kolory

#8BBD3A text-primary

Kolor tekstu

bg-primary / text-bg-primary

Kolor tła

border border-primary

Kolor ramki

#3FA62D text-secondary

Kolor tekstu

bg-secondary / text-bg-secondary

Kolor tła

border border-secondary

Kolor ramki

#4874B5 text-tertiary

Kolor tekstu

bg-tertiary / text-bg-tertiary

Kolor tła

border border-tertiary

Kolor ramki

#7E808F text-gray

Kolor tekstu

bg-gray / text-bg-gray

Kolor tła

border border-gray

Kolor ramki

#F5F5F7 text-gray-100

Kolor tekstu

bg-gray-100 / text-bg-gray-100

Kolor tła

border border-gray-100

Kolor ramki

#D7D9E0 text-gray-200

Kolor tekstu

bg-gray-200 / text-bg-gray-200

Kolor tła

border border-gray-200

Kolor ramki

#C2C3CC text-gray-300

Kolor tekstu

bg-gray-300 / text-bg-gray-300

Kolor tła

border border-gray-300

Kolor ramki

#1F2029 text-gray-600

Kolor tekstu

bg-gray-600 / text-bg-gray-600

Kolor tła

border border-gray-600

Kolor ramki

#545666 text-gray-700

Kolor tekstu

bg-gray-700 / text-bg-gray-700

Kolor tła

border border-gray-700

Kolor ramki

#1F2029 text-gray-900

Kolor tekstu

bg-gray-900 / text-bg-gray-900

Kolor tła

border border-gray-900

Kolor ramki

#00B938 text-success

Kolor tekstu

bg-success / text-bg-success

Kolor tła

border border-success

Kolor ramki

#F1FCF5 text-success-light

Kolor tekstu

bg-success-light / text-bg-success-light

Kolor tła

border border-success-light

Kolor ramki

#CF2447 text-error

Kolor tekstu

bg-error / text-bg-error

Kolor tła

border border-error

Kolor ramki

#FDF8F9 text-error-light

Kolor tekstu

bg-error-light / text-bg-error-light

Kolor tła

border border-error-light

Kolor ramki

#D1B02E text-warning

Kolor tekstu

bg-warning / text-bg-warning

Kolor tła

border border-warning

Kolor ramki

#FCF9F0 text-warning-light

Kolor tekstu

bg-warning-light / text-bg-warning-light

Kolor tła

border border-warning-light

Kolor ramki

#0073A5 text-info

Kolor tekstu

bg-info / text-bg-info

Kolor tła

border border-info

Kolor ramki

#F5FAFD text-info-light

Kolor tekstu

bg-info-light / text-bg-info-light

Kolor tła

border border-info-light

Kolor ramki

#D32236 text-emergency

Kolor tekstu

bg-emergency / text-bg-emergency

Kolor tła

border border-emergency

Kolor ramki

#FB384E text-emergency-light

Kolor tekstu

bg-emergency-light / text-bg-emergency-light

Kolor tła

border border-emergency-light

Kolor ramki

Przyciski

Podstawowe - budowane automatycznie

btn-primary

btn-primary btn--sos

btn-primary btn--arrow

btn-primary btn--arrow btn--arrow--big

btn-secondary

btn-secondary btn--sos

btn-emergency

Lorem ipsum

btn-emergency btn--sos

Lorem ipsum

btn-emergency btn--arrow

btn-emergency btn--arrow btn--arrow--big

link-primary

Lorem ipsum

link-primary link--arrow

Lorem ipsum

Rozmiary fontów - desktop

Nagłówki

Display 1

72px

h1

72px

h2

48px

h3

32px

h4

32px

h5

20px

h6

16px

Standardowe

fs-lg

18px

fs-md

16px

fs-base

16px

fs-sm

14px

fs-xsm

12px

Grubości i style fontu

fw-extra-bold

Lorem ipsum - 800

fw-bold

Lorem ipsum - 700

fw-semibold

Lorem ipsum - 600

fw-medium

Lorem ipsum - 500

fw-normal

Lorem ipsum - 400

fst-italic

Lorem ipsum


        list-type-one

Domyślny styl listy

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ad soluta magnam labore illum animi hic incidunt inventore eos, eum, omnis, aliquam dignissimos aut ipsum ducimus! Atque cumque saepe ex?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint blanditiis obcaecati fugiat aspernatur at quaerat, cumque, placeat perferendis veniam, explicabo deleniti fuga eligendi omnis vitae provident nobis. Nam, explicabo maxime.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis natus voluptates mollitia, cumque earum iusto nemo reiciendis animi dolores deleniti minima eligendi rem, excepturi eos molestiae ullam enim, consequatur totam.

Padding i marginesy (analogicznie)

p-0

p-0_5

0.125rem - 2px

p-1

0.25rem - 4px

p-1_5

0.375rem - 6px

p-2

0.5rem - 8px

p-2_5

0.625rem - 10px

p-3

0.75rem - 12px

p-3_5

0.875rem - 14px

p-4

1rem - 16px

p-4_5

1.125rem - 18px

p-5

1.25rem - 20px

p-6

1.5rem - 24px

p-7

1.75rem - 28px

p-8

2rem - 32px

p-9

2.25rem - 36px

p-10

2.5rem - 40px

p-11

2.75rem - 44px

p-12

3rem - 48px

p-13

3.25rem - 52px

p-14

3.5rem - 56px

p-15

3.75rem - 60px

p-16

4rem - 64px

p-17

4.25rem - 68px

p-18

4.5rem - 72px

p-19

4.75rem - 76px

p-20

5rem - 80px

p-21

5.25rem - 84px

p-22

5.5rem - 88px

p-23

5.75rem - 92px

p-24

6rem - 96px

p-25

6.25rem - 100px

p-26

6.5rem - 104px

p-27

6.75rem - 108px

p-28

7rem - 112px

p-29

7.25rem - 116px

p-30

7.5rem - 120px

p-31

7.75rem - 124px

p-32

8rem - 128px

p-33

8.25rem - 132px

p-34

8.5rem - 136px

p-35

8.75rem - 140px

p-36

9rem - 144px

p-37

9.25rem - 148px

p-38

9.5rem - 152px

p-39

9.75rem - 156px

p-40

10rem - 160px

p-42

11.5rem - 184px

p-44

11rem - 176px

p-46

11.5rem - 184px

p-48

12rem - 192px

p-50

12.5rem - 200px

p-52

13rem - 208px

p-54

13.5rem - 216px

p-56

14rem - 224px

p-60

15rem - 240px

p-64

16rem - 256px

p-68

17rem - 272px

p-72

18rem - 288px

p-76

19rem - 304px

p-80

20rem - 320px