A card is a self-contained interface component that groups related content inside a bounded visual area. A practical card uses an outer container, an inner content layer, and readable text such as a heading, paragraph, and link. section 5.4
Listing 5.9 Card HTML in isolation
<section class="meeru-island"> #1
<div> #2
<h2>Meeru Island Resort & Spa</h2> #3
<p>The stylish Meeru Island Resort...</p> #3
<a href="#">Learn more</a> #3
</div>
</section>
Use the isolated HTML listing to see the outer section, inner content container, and card content before styling. section 5.4
Build a card from the outside inward:
- Give the outer container a background, rounded corners, and a shadow that visually separates it from the page. section 8.2.6
- Use an inner background color when content sits over an image, keeping the text legible. section 5.4
- Check default browser behavior: vertically padded inline links may extend beyond the card, so change them to inline-block. section 8.2.6
- Use Flexbox when the card arranges items along one axis and needs controlled spacing and alignment. section 9.2.2
A styled checkout card
A checkout layout can place each section on a pale background with a white surface, a 4px radius, and a 2px 2px 7px shadow. A virtual card can then use padding for breathing room, Flexbox for its top row, evenly spaced numbers in the middle, and separated details at the bottom. section 8.2.6 section 9.2.2
Listing 9.6 Layout for the top front of the card
.card-item__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 40px;
padding: 0 10px;
}
.card-item__chip {
width: 60px;
}
Inspect the Flexbox rule that aligns the card’s top items, distributes them to opposite edges, and sizes the chip. section 9.2.2
