Elementy

Strona robocza fabryki: wszystkie podstawowe elementy w jednym miejscu — do porównania przed i po zmianach w motywie.

Typografia

Nagłówek H3

Nagłówek H4

Nagłówek H5
Nagłówek H6

Akapit z pogrubieniem, kursywą i odnośnikiem. Zażółć gęślą jaźń — polskie znaki w tekście ciągłym.

Rozmiar xs — Zażółć gęślą jaźń

Rozmiar sm — Zażółć gęślą jaźń

Rozmiar md — Zażółć gęślą jaźń

Rozmiar lg — Zażółć gęślą jaźń

Rozmiar xl — Zażółć gęślą jaźń

Rozmiar 2xl — Zażółć gęślą jaźń

Paleta

accent-1

accent-2

accent-3

accent-4

body

muted

surface

line

white

black

Skala odstępów

spacing-20 (padding góra i dół)

spacing-30 (padding góra i dół)

spacing-40 (padding góra i dół)

spacing-50 (padding góra i dół)

spacing-60 (padding góra i dół)

spacing-70 (padding góra i dół)

spacing-80 (padding góra i dół)

Przyciski

Przycisk wypełniony
Przycisk z obrysem

Listy, cytat, tabela, rozwijane

  • Pierwszy punkt
  • Punkt z podlistą
    • podpunkt A
    • podpunkt B
  • Ostatni punkt
  1. Krok pierwszy
  2. Krok drugi
  3. Krok trzeci

Cytat w treści strony — sprawdza styl bloku cytatu.

Autor cytatu
UsługaCzasCena od
Audyt strony internetowej1 tydzień1500 zł
Projekt graficzny serwisu3–4 tygodnie4800 zł
Wdrożenie strony na WordPressie4–6 tygodni7900 zł
Rozwiń szczegóły (nie FAQ)

Treść widoczna po rozwinięciu — blok szczegółów do treści innych niż pytania i odpowiedzi.

Brak wyrównania — pudełko na szerokość kontenera, z tłem.

Szeroka — sekcja na szerokość „wide”.

Pełna — tło od krawędzi do krawędzi, treść na szerokość kontenera.

Kolumny i siatka

Kolumna 1 z 4 — na tablecie 2, na telefonie 1.

Kolumna 2 z 4 — na tablecie 2, na telefonie 1.

Kolumna 3 z 4 — na tablecie 2, na telefonie 1.

Kolumna 4 z 4 — na tablecie 2, na telefonie 1.

Kolumna 33%

Kolumna 67% — proporcja w procentach, bez stałej szerokości.

Węższy tekst — tylko gdy makieta tego wymaga

Jedna kolumna 66,66 % — tekst węższy niż kontener bez stałej szerokości. Domyślnie tekst ma pełną szerokość kontenera; węższy tylko wtedy, gdy pokazuje go projekt graficzny.

Karty w rzędzie — równa wysokość

Karta 1

Krótki tekst.

Karta 2

Dłuższy tekst karty, który zajmuje kilka linii — sąsiednie karty i tak mają tę samą wysokość, bo karta wypełnia kolumnę (starter, standard równych wysokości).

Karta 3

Średni tekst w trzeciej karcie.

Siatka 3 → 2 → 1, element 1

Siatka 3 → 2 → 1, element 2

Siatka 3 → 2 → 1, element 3

Siatka 3 → 2 → 1, element 4

Siatka 3 → 2 → 1, element 5

Siatka 3 → 2 → 1, element 6

Responsywność i widoczność

Padding 70 na desktopie, 30 na telefonie (styl @mobile w bloku).

Widoczny tylko na komputerze.

Widoczny tylko na tablecie.

Widoczny tylko na telefonie.

Bardzo długi nagłówek, który sprawdza łamanie wierszy na wąskich ekranach i interlinię przy trzech, czterech albo nawet pięciu liniach tekstu

Najdłuższe polskie słowo: Konstantynopolitańczykowianeczka. Adres bez spacji: bardzo.dluga.nazwa.skrzynki.pocztowej@example.com

Lista z jednym punktem:

  • Jedyny punkt listy

Lista z dwunastoma punktami:

  • Punkt numer 1
  • Punkt numer 2
  • Punkt numer 3
  • Punkt numer 4
  • Punkt numer 5
  • Punkt numer 6
  • Punkt numer 7
  • Punkt numer 8
  • Punkt numer 9
  • Punkt numer 10
  • Punkt numer 11
  • Punkt numer 12