Wszystkie komponenty — przewodnik po stylach

Redakcja Example.pl3 min czytania

Przegląd wszystkich elementów wizualnych: nagłówki, listy, tabele, bloki kodu, cytaty, diagramy i komponenty MDX. Referencyjna strona design systemu.

Wszystkie komponenty — przewodnik po stylach

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.


Nagłówki

H3 — Podtytuł sekcji

H4 — Podsekcja

H5 — Szczegółowy podział

Typografia

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pogrubienie (bold) i kursywa (italic) używane są do wyróżnienia ważnych informacji. Tekst może też zawierać kod inline, który wyróżnia fragmenty kodu lub nazwy techniczne.

Link do strony głównej prowadzi do innej podstrony. Linki są podkreślone i zaznaczone akcentowym kolorem.

Cytat blokowy (blockquote) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Listy

Lista punktowana

  • Lorem ipsum dolor sit amet consectetur
  • Adipiscing elit sed do eiusmod tempor
    • Zagnieżdżony element listy
    • Kolejny zagnieżdżony element
  • Incididunt ut labore et dolore magna
  • Ut enim ad minim veniam quis nostrud

Lista numerowana

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Sed do eiusmod tempor incididunt
  4. Ut labore et dolore magna aliqua

Tabela

Kolumna AKolumna BKolumna C
Loremipsum100
Dolorsit amet200
Consecteturadipiscing300
Elitsed do400

Blok kodu

// Lorem ipsum — przykład kodu JavaScript
function loremIpsum(words = 5) {
  const list = ['lorem', 'ipsum', 'dolor', 'sit', 'amet'];
  return list.slice(0, words).join(' ');
}

const result = loremIpsum(3);
console.log(result); // lorem ipsum dolor
/* Przykład kodu CSS */
.lorem-ipsum {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

Komponenty MDX

Badge

przykłady design styleguide

Button

Przycisk primary Przycisk secondary Przycisk outline Rozmiar sm Rozmiar lg

Disclaimer


Diagram Mermaid

Diagram

Separator poziomy

Powyżej i poniżej tego akapitu znajdują się separatory poziome (---).


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.