A Card is a unit of content featuring an image along with a title and description, wrapped in a block-level link.
Cards come in a variety of sizes, activated by adding a modifier class:
Cards support images in three different aspect ratios, also indicated by a class:
Because cards are responsive and may change size in different viewports, you should take some care in sizing images appropriately:
In addition to the image, title, and description, cards may hold a few other distinct pieces of content:
A card must contain at minimum an image and either a title or a description (or both). All other content is optional. Try to keep card titles to one or two lines (about 50 characters max) and descriptions to two or three lines (about 150 characters max). Tags should be short, just one or two words. Calls to Action and meta labels should fit on one line, about 30-40 characters max.
The optional tag can also include an icon, indicated by a modifier class on the card container:
The default Card size with no other modifier classes is small:
<section class="mzp-c-card mzp-has-aspect-3-2"> <a class="mzp-c-card-block-link" href="https://example.com"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="../../img/image-3-2.jpg" alt=""> </div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">Card title with about 30-40 characters</h2> <p class="mzp-c-card-desc">A description of about 150 characters, give or take. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-cta"><span class="mzp-c-card-cta-text">Call to action</span></p> <p class="mzp-c-card-meta">Card meta info</p> </div> </a> </section>