Card

Een card toont een klein stukje informatie met een link naar meer info. Cards worden altijd buiten een content block geplaatst. Een card heeft een beperkte breedte, dit kan tot problemen leiden met lange woorden. Plaats een ​ in lange woorden op de plaats waar het woord afgebroken mag worden.

Plaats de afbeelding als background-image, zodat deze in alle browsers meeschaalt.

Wanneer er maar één card in de lijst zit, wordt deze altijd als de mobiele weergave getoond. Dit kan ook worden afgedwongen door de modifier list--card-small toe te voegen aan de lijst en elke card de modifier card--small te geven. Wanneer er altijd maar één card is, dan is een lijst niet nodig, en kan een losse card gebruikt worden.

Standaard zijn de thumbnails op mobiel in portrait formaat. Met de modifier card__thumb--square kan een vierkant formaat worden afgedwongen.

Benodigde stylesheets

• uno/components/list/list-card.css
• uno/components/card/card.css