Before this lesson

Understand semantic elements, heading levels, the box model and Flexbox.

What you will be able to do

Give variable-length content a clear structure without nested links or brittle dimensions.

Understand the mechanism

A card is a content pattern, not an HTML element. An independently meaningful course summary can use article, and heading levels depend on the surrounding page. Title, description and action each have a distinct role.

max-width controls reading width, padding supplies internal space and borders define boundaries. Fixed heights can clip longer translations. To align actions in a row, use column Flexbox and margin-top:auto on the action.

Do not nest links or buttons inside a whole-card link. A simple explicit reading link provides one understandable keyboard target. Render user-supplied descriptions as text.

Runnable example

<style>
.card { max-width:320px; padding:28px; border:1px solid #dce4dc; border-radius:16px; font:16px/1.6 system-ui; }
.card a { display:inline-block; padding:10px 18px; border-radius:8px; color:white; background:#176b4b; }
</style>
<article class="card">
  <h2>Learn HTML</h2>
  <p>Build a clear structure for your first page.</p>
  <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development">Start learning</a>
</article>

Trace and verify

Duplicate three cards with short, long and unbroken text. Test at 320 pixels and 200% zoom. Tab focus must reach the action without being clipped, and its destination must exist.

Common mistakes and boundaries

Replace practice destinations before publication. If adding images, supply dimensions and appropriate alt text to avoid layout shifts; decorative images use empty alt.

Practice challenge

Turn the cards into courses with difficulty and estimated duration, using text as well as color.

Reference solution and reasoning

Use readable metadata after the title. If duration has not been validated with learners, describe it as suggested study time rather than an exact promise.

Further reading