Komponent karty z niestandardowymi właściwościami CSS

Komponent card to samodzielny kontener na treść. Cele projektowe obejmują spójne dopełnienie z użyciem tokenów odstępów, kolorów dostosowywanych do motywu za pomocą tokenów aliasów, responsywne skalowanie bez JavaScriptu oraz obsługę wariantów (elevated, outlined, flat) za pomocą własnych właściwości CSS.

Należy użyć pojedynczej klasy .card z własnymi właściwościami CSS dla konfigurowalnych wartości. Elementy wewnętrzne (header, body, footer) dziedziczą wartości z zakresu card. Ogranicza to rozbieżności stylów między instancjami card w całej bazie kodu.

Należy nadpisywać własne właściwości na poziomie card za pomocą klas wariantów zamiast tworzyć oddzielne zestawy reguł. Klasy wariantów muszą definiować tylko zmienione zmienne — niezmienione właściwości automatycznie dziedziczą wartości bazowe bez powtórzeń.

Gdy klasa motywu nadrzędnego zmieni --color-surface, wszystkie cardy znajdujące się w tym motywie automatycznie zaktualizują tło. Nie jest potrzebny kod zastępujący motyw dla poszczególnych cardów — system tokenów aliasów obsługuje to w sposób przejrzysty.

Użyj clamp() z możliwością nadpisywania właściwości niestandardowych, aby uzyskać płynny padding: --card-padding: clamp(1rem, 4vw, 2rem). Większe obszary widoku otrzymają większy padding, a mniejsze — minimalny; wszystko jest sterowane z jednej definicji tokenu.

Siatka kart wykorzystująca auto-fill CSS Grid wraz z minmax tworzy samoczynnie organizujący się układ: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). Karty wypełniają dostępną przestrzeń i automatycznie przechodzą do kolejnych wierszy bez punktów przerwania media queries.

Zachowaj spójne proporcje obrazów kart, ustawiając aspect-ratio: 16/9 na kontenerze obrazu. Obrazy wypełniają kontener dzięki object-fit: cover, co zapewnia jednakową wysokość kart niezależnie od wymiarów obrazów źródłowych.

Dodaj stany hover i focus-within, które lekko unoszą kartę: transform: translateY(-2px) oraz zwiększony box-shadow. Animuj je za pomocą transition: transform 200ms ease, box-shadow 200ms ease, aby uzyskać płynną informację zwrotną przyjazną dla compositora.

Uczyń całą kartę klikalną za pomocą rozciągniętego linku: ustaw kartę jako pozycjonowaną relatywnie, a główny link pozycjonuj absolutnie za pomocą inset: 0. Czytniki ekranu odczytają tekst linku, a nakładka wizualnie pokryje kartę dla użytkowników myszy.

Dodaj wariant .card--loading, który zastępuje zawartość szkieletem z efektem shimmer, wykorzystując animację CSS: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)) animowaną za pomocą background-size: 200% i animation: shimmer 1.5s infinite.

W trybie ciemnym token --color-surface automatycznie zmienia się z jasnego na ciemny. Jeśli karty z efektem uniesienia polegają na box-shadow, aby uzyskać głębię, a efekt ten zanika na ciemnych tłach, dodaj subtelne obramowanie lub zwiększ kontrast koloru powierzchni, aby zachować wrażenie uniesienia kart w trybie ciemnym.

W jaki sposób właściwości niestandardowe CSS umożliwiają tworzenie wariantów kart bez powielania całego zestawu reguł?

Utworzenie komponentu karty za pomocą właściwości niestandardowych CSS daje elastyczny, możliwy do dostosowania do motywu i obsługujący warianty podstawowy element interfejsu. Zmienne bazowe określają wartości domyślne, klasy wariantów selektywnie je nadpisują, a klasy motywów nadpisują je globalnie. W połączeniu z responsywnym rozmiarem, dostępnymi linkami i stanami ładowania wzorzec ten dobrze skaluje się w systemach projektowych.