Home / Snippets / UI Components /
Basic card
Image, title, text, link — with a hover lift effect.
Quick implementation
.card {
background: oklch(0.19 0.02 260);
border: 1px solid oklch(0.25 0.02 260);
border-radius: 1rem;
overflow: hidden;
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px oklch(0 0 0 / 0.15);
}
.card-image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.card-body {
padding: 1rem 1.25rem 1.25rem;
}
.card-body h3 {
font-size: 1rem;
margin-bottom: 0.35rem;
}
.card-body p {
font-size: 0.85rem;
color: oklch(0.63 0.02 260);
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a card component.
Goal: A reusable card with image, title, description, and optional CTA link, with hover lift effect.
Technical constraints:
- Use border-radius: 1rem with overflow: hidden to clip the image.
- Hover: translateY(-4px) + deeper box-shadow for a lift effect.
- Image: aspect-ratio: 16/9 with object-fit: cover.
- Use oklch() for all colors, not hex or rgba().
- Transition: transform + box-shadow on 0.2s ease-out.
Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept image (string URL), title, description, and href props.
Edge cases to handle:
- Card without an image should still look complete (hide the image section).
- Long titles should wrap, not overflow.
- Reduce motion: skip the translateY hover for users who prefer reduced motion.
Return HTML + CSS.Why this matters in 2026
Cards are the building block of modern interfaces — product listings, blog feeds, dashboards. A solid base card with proper hover feedback, image handling, and spacing is the foundation that every variant (profile card, product card, stat card) extends from.
The logic
overflow: hidden on the card clips the image to the border-radius. The hover effect uses transform: translateY(-4px) (compositor-only, no layout shift) paired with a deeper box-shadow for a realistic lift. aspect-ratio: 16 / 9 on the image prevents layout shift during loading and ensures consistent proportions.
Accessibility & performance
If the entire card is clickable, wrap the card in an <a> or use a stretched link pattern — don't wrap interactive elements inside interactive elements. The hover animation uses transform and box-shadow, both compositor-friendly, avoiding layout recalculations. Add @media (prefers-reduced-motion: reduce) to disable the lift for motion-sensitive users.