Een card-layout is een ontwerppatroon waarbij verwante stukjes inhoud, een afbeelding, een titel, een fragment en misschien een knop, worden gegroepeerd in een rechthoekig blok dat een card heet, en die cards in een raster worden gezet. Je ziet ze overal: productlijsten, blogoverzichten, dashboards, app stores.
Denk aan een prikbord vol indexkaarten. Elke kaart bevat één idee, je kunt ze allemaal in één oogopslag scannen, en je kunt ze herschikken zonder de rest te verstoren. Op een website doen de cards hetzelfde werk, en omdat elke card een op zichzelf staande eenheid is, herschikken ze soepel: drie naast elkaar op een desktop, boven elkaar op een telefoon. Dat maakt cards een natuurlijke partner voor responsive design, en consistente witruimte rond elke card is wat het raster ruim laat aanvoelen.
Cards belonen ook een componentgedreven aanpak. Definieer één card één keer, met zijn plek voor een afbeelding, een kop en een actie, en je rendert er honderd uit een lijst met data zonder iets met de hand opnieuw te tekenen. Daarom duikt het patroon zo vaak op in design systems: één blok doet dienst in het productraster, de blogindex en het dashboard.
Het patroon heeft grenzen. Elk item in een eigen rand en padding wikkelen kost ruimte, dus cards passen slecht bij lange artikelen of dichte tabellen waar rijen beter zouden werken. Ze kunnen ook een muur van even zware blokken worden waarin niets opvalt, dus een goed raster gebruikt grootte of kleur om aan te geven wat telt. Een vaste aspect ratio op de card-afbeeldingen aanhouden is een van de simpelste manieren om te voorkomen dat een raster er rommelig uitziet.
Bij TopDevs bouwen we cards als herbruikbare componenten, zodat het productraster, de blogindex en het dashboard van een klant allemaal één net, consistent blok delen.
