Karty to przyciski, które zawsze występują w grupach i są zależne od siebie nawzajem: w danym momencie aktywny może być tylko jeden przycisk.
Karty
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Anatomia

2. Ikona nieaktywnej karty
3. Etykieta aktywnej karty
4. Etykieta nieaktywnej karty
Okular
Karty zagnieżdżone na pasku aplikacji – wyrównane do lewej

Karty zagnieżdżone na pasku aplikacji – elastyczne wyrównanie

Karty zwinięte na pasku aplikacji – menu szuflady

Samodzielny pasek kart – wyrównany do lewej

Samodzielny pasek kart – elastyczne wyrównanie

Przepełnienie ciągu etykiety karty

Skalowanie układów
Te układy referencyjne pokazują, jak dostosować zakładki do ekranów o różnych szerokościach i wysokościach. Należy pamiętać, że wszystkie wartości pikseli podano w pikselach renderowanych, przed jakimkolwiek próbkowaniem w dół lub w górę.
Ekrany standardowe i szerokie w segmencie o niskiej wysokości

Ekrany standardowe i szerokie w standardowym przedziale wysokości

Standardowe i szerokie ekrany w segmencie wysokich wysokości

Ekrany bardzo szerokie i super szerokie we wszystkich przedziałach wysokości

Style
Typografia
| Styl czcionki | Krój pisma | Waga | Rozmiar (dp) |
|---|---|---|---|
| Korpus 3 M | Roboto | Średni | 24 |
| Ciało 3 | Roboto | Regularny | 24 |
Kolor
| Element | Kolor (tryb dzienny) | Kolor (tryb nocny) |
|---|---|---|
| Typ podstawowy / ikony | Biały | Biały @ 88% |
| Typ drugorzędny / ikony | Biały @ 72% | Biały @ 60% |
| Tło paska kart | Czarny | Czarny |
| Tło paska kart podczas przewijania | Czarny @ 84% | Czarny @ 88% |
| Ikona zakładki – stan aktywny | Biały | Biały @ 88% |
| Ikona karty - stan nieaktywny | Biały @ 56% | Biały @ 50% |
Rozmiarowanie
| Element | Rozmiar (dp) |
|---|---|
| Ikona główna | 44 |
| Ikona drugorzędna | 36 |
| Ikona celu dotykowego | 76 |
Przykłady


