Frame
The outer surface separates one item from the page.
Platform under construction
Cards
Cards group related content and actions. Good card CSS creates structure without turning every section into a decorative box.
.card {
display: grid;
gap: 1rem;
padding: 1rem;
border: 1px solid var(--line);
}
Component mental model
Cards are containers for one focused idea.
A card should package a piece of content so it can be scanned, compared or selected. It might hold a lesson, product, article, feature or dashboard item.
Strong card design depends on spacing, hierarchy, media treatment and clear actions. Weak cards become visual clutter.
Cards are useful for repeated items. They should not be used as a default page section style for everything.
Hierarchy
Title, metadata, text and actions need a clear order.
Media
Images need stable aspect ratio and cropping rules.
Action
A card should make the next step obvious when needed.
Visual model
See the parts of the component before styling the surface.
Stable frame
The image area reserves predictable space.
Text rhythm
Headings and copy have calm spacing.
Small signal
Labels support scanning.
Next step
The card points to a clear action.
Good CSS versus fragile CSS
Card with internal rhythm
.card {
display: grid;
gap: 1rem;
padding: 1rem;
border: 1px solid var(--line);
border-radius: 1rem;
}
.card__media { aspect-ratio: 16 / 9; object-fit: cover; }Everything becomes a card
section, header, footer, main, article {
padding: 30px;
border-radius: 30px;
box-shadow: 0 20px 80px #000;
}Rules of thumb
Components need systems, not one-off decoration.
Use cards for repeatable items
Cards work best when users compare similar pieces of content.
Keep one focus
A card should not contain five unrelated ideas.
Use stable media ratios
Images should not make grids jump while loading.
Avoid nested cards
Cards inside cards usually create visual noise.
Design content overflow
Long titles and descriptions should still look intentional.
Make click behavior clear
If the whole card is clickable, focus and hover states must make that clear.
Production thinking
A component is only good when real content and real states still work.
Why does this matter?
Cards are powerful when they help scanning. They are weak when they become decoration without information structure.
Accessibility
Avoid wrapping a card in a link when it contains multiple interactive controls. Keep focus order clear.
Production note
Test cards with short, long and missing content. Real data always finds weak spacing.
SEO note
Cards can expose clear headings and links for repeated content, but the semantic HTML still matters.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Make the title twice as long and check whether spacing still works.
- Change the media aspect ratio to 4 / 5 and judge the composition.
- Remove the meta label and decide if the card still scans well.
Practice assignment
Do this before moving to the next lesson.
- Create a card with media, meta, title, text and action.
- Use one gap value for internal rhythm.
- Explain why this card is a repeated item and not a page section.
Try it yourself
Build a resilient lesson card
Self-check
Before you continue, prove that you understand Cards.
Answer these questions before moving on. If a state, long label or mobile width breaks the component, the component is not finished yet.
- Can you explain when a card is useful?
- Can you avoid putting cards inside cards?
- Can you make card media stable with aspect-ratio?
- Can you test long content inside a card?
- Can you decide whether the whole card or only one action should be clickable?
Senior audit upgrade
Clickable cards need careful focus order.
Making an entire card clickable can be convenient, but nested links and hidden focus traps create bad interaction.
Whole-card link
Use when the card has one primary destination and no competing interactive controls.
Separate action
Use a clear action link when the card contains more than one possible action.
Focus outline
Make the focused clickable area visually obvious.