Przejdź do treści
Spis treści

Komponenty

Karty

Rytm oparty na prostych kartach. Papier na tle neutralnym, narożnik 16 px, wnętrze 24 px, cienka linia. Karta grupuje, nie dekoruje.

Stan rozdziału:
gotowe
Aplikacja dziś:
rozjazd z brandbookiem

Przykład

Urządzenie

Analizator laboratoryjny

MP-0241

Następna czynność

Przegląd okresowy

24.09.2026

za 12 dni
Karta z brandbooka (s. 10): kicker, tytuł, identyfikator, dwa przyciski. Wnętrze 24 px, narożnik 16 px.

Kiedy używać

  • Gdy grupa informacji ma własny tytuł i własną czynność: karta urządzenia, „Następna czynność”, „Historia urządzenia” (brandbook s. 11).
  • Gdy na jednym ekranie stoi kilka równorzędnych grup obok siebie (pulpit).
  • Jako pojemnik na tabelę albo formularz, wtedy bez własnego wypełnienia, bo tabela ma swoje.

Kiedy nie

  • Karta w karcie. Jeżeli potrzebujesz zagnieżdżenia, wewnętrzna grupa dostaje tło neutralne bez linii (jak lista kroków w stanie pustym), nie drugą kartę.
  • Karta wokół jednego zdania. Zdanie stoi samo.
  • Karta jako przycisk. Jeżeli cała karta ma być klikalna, to jest odnośnik z tytułem w fiolecie, a nie karta z niewidocznym obszarem klikania.

Budowa

CzęśćZasada
TłoBiel na tle neutralnym. Papier, gdy karta stoi bezpośrednio na papierze strony; wtedy linia jest jedynym odcięciem.
LiniaKolor „linia”, 1 px. Zawsze, także na tle neutralnym.
Cień„Karta”: ledwo widoczny. Nigdy „uniesiony” dla karty w spoczynku.
Narożnik16 px.
Wnętrze24 px z każdej strony. Na telefonie 16 px.
KickerDrobny podpis wielkimi literami w fiolecie: „URZĄDZENIE”, „NASTĘPNA CZYNNOŚĆ”. Opcjonalny.
TytułNagłówek karty (20 px / 600). Poziom nagłówka zależy od miejsca na stronie, nie od karty.
Podpis pod tytułemTekst pomocniczy, 14 px, do 70 znaków.
CzynnościNa dole karty, wyrównane do lewej. Główny plus drugorzędny, nie więcej.

Klawiatura

Karta sama nie jest interaktywna i nie dostaje ogniska. Ognisko przechodzi przez czynności wewnątrz karty w kolejności czytania. Nagłówek karty jest elementem h2 do h4, żeby czytnik ekranu mógł skakać po kartach.

Co zmienić w aplikacji