Card-component met CSS-custom properties

Een kaartcomponent is een zelfstandige container voor inhoud. Ontwerpdoelen: consistente binnenruimte met afstandstokens, themabare kleuren met aliastokens, responsieve afmetingen zonder JS en ondersteuning voor varianten (verhoogd, omlijnd, vlak) via CSS-aangepaste eigenschappen.

Gebruik één klasse .card met CSS-aangepaste eigenschappen voor configureerbare waarden. Interne elementen (kop, hoofdgedeelte, voettekst) erven van het bereik van de kaart. Dit beperkt stijlvervaging tussen kaartinstanties in de hele codebasis.

Overschrijf aangepaste eigenschappen op kaartniveau met variantklassen in plaats van afzonderlijke regelsets te schrijven. Variantklassen hoeven alleen gewijzigde variabelen opnieuw te definiëren — ongewijzigde eigenschappen erven automatisch de basiswaarden zonder herhaling.

Wanneer een themaklasse van een ouder --color-surface wijzigt, werken alle kaarten binnen dat thema automatisch hun achtergrond bij. Er is geen kaart-specifieke code voor thema-overschrijvingen nodig — het aliastokensysteem handelt dit transparant af.

Gebruik clamp() met overschrijvingen van aangepaste eigenschappen voor flexibele opvulling: --card-padding: clamp(1rem, 4vw, 2rem). Grotere weergavegebieden krijgen ruimere opvulling; kleine weergavegebieden krijgen minimale opvulling — alles wordt vanuit één tokendefinitie beheerd.

Een kaartraster met CSS Grid en auto-fill van minmax maakt een zichzelf ordenende indeling: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). Kaarten vullen de beschikbare ruimte en lopen automatisch door naar een nieuwe regel zonder breekpunten in mediaquery's.

Houd consistente beeldverhoudingen voor kaartafbeeldingen aan met aspect-ratio: 16/9 op de afbeeldingscontainer. Afbeeldingen vullen de container met object-fit: cover, zodat kaarthoogtes gelijk blijven, ongeacht de afmetingen van de bronafbeelding.

Voeg hover- en focus-within-toestanden toe die de kaart iets optillen: transform: translateY(-2px) en een grotere box-shadow. Animeer dit met transition: transform 200ms ease, box-shadow 200ms ease voor soepele, compositorvriendelijke feedback tijdens interactie.

Maak de hele kaart klikbaar met een uitgestrekte koppeling: positioneer de kaart relatief en positioneer de hoofdkoppeling absoluut met inset: 0. Schermlezers lezen de tekst van de koppeling voor; de overliggende laag bedekt de kaart visueel voor muisgebruikers.

Voeg een .card--loading-variant toe die de inhoud vervangt door een glinsterend skelet met een CSS-animatie: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)), geanimeerd met background-size: 200% en animation: shimmer 1.5s infinite.

In de donkere modus verandert het token --color-surface automatisch van licht naar donker. Als verhoogde kaarten voor diepte vertrouwen op box-shadow, die op donkere achtergronden verdwijnt, voeg je een subtiele rand toe of vergroot je het contrast van de oppervlaktekleur om diepte in de donkere modus zichtbaar te houden.

Het bouwen van een kaartcomponent met aangepaste CSS-eigenschappen creëert een flexibel, thematiseerbaar UI-basisbouwblok dat rekening houdt met varianten. Basisvariabelen stellen standaardwaarden in; variantklassen overschrijven selectief; themaklassen overschrijven globaal. In combinatie met responsieve afmetingen, toegankelijke koppelingen en laadtoestanden schaalt dit patroon netjes binnen ontwerpsystemen.