Feature card with CQ
Feature card that adapts layout via container queries — no JavaScript required.
Advanced Analytics
Get deep insights into your data with real-time dashboards and customizable reports.
- Real-time data visualization
- Custom report builder
- Team collaboration tools
Secure Storage
Your data is encrypted and backed up automatically. Peace of mind included.
- End-to-end encryption
- Automatic backups
- Geo-distributed redundancy
Quick implementation
/* HTML:
<div class="feature-wrapper">
<div class="feature-card">
<div class="feature-icon">A</div>
<div class="feature-content">
<h3>Title</h3>
<p>Description</p>
<ul>...</ul>
</div>
<div class="feature-cta">
<button>CTA</button>
</div>
</div>
</div>
*/
.feature-wrapper {
container-type: inline-size;
container-name: feature;
}
.feature-card {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
border: 1px solid var(--card-border);
border-radius: var(--radius);
background: var(--card);
}
.feature-icon {
width: 3rem;
height: 3rem;
background: var(--accent);
border-radius: var(--radius);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
/* Wide layout (container >= 20rem) */
@container feature (min-width: 20rem) {
.feature-content {
display: flex;
flex-direction: column;
}
.feature-cta {
margin-top: auto;
}
}
/* Narrow layout (container < 20rem) */
@container feature (max-width: 19.99rem) {
.feature-card {
padding: 1.25rem;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer specializing in modern CSS layout.
Goal: Build a feature card component that adapts its layout based on available container width — no JavaScript.
Technical constraints:
- Use container-type: inline-size and @container queries to detect wrapper width.
- Structure: icon + title + description + feature list + CTA button.
- Use oklch() for all colors — no hex or rgba().
- Layout shift: adapts padding and font sizes based on container width.
- Include focus-visible styles for interactive elements (buttons, links).
Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept `title`, `description`, `features` (array), `icon`, `onCtaClick` props; include CSS as a CSS module.
Edge cases to handle:
- Disabled state: add .disabled class with opacity: 0.6 and cursor: not-allowed on CTA.
- What happens if container queries are not supported? Provide a media query fallback.
- ARIA: the card should be wrapped in <article> for semantic meaning.
Return HTML + CSS, clearly separated.Why this matters in 2026
Feature cards are everywhere — pricing pages, landing pages, dashboard widgets. Container queries let them adapt to their context without media queries. A feature card in a narrow sidebar can show compact content, while the same card in a wide grid can expand with more breathing room. This is component-driven design at its best.
The logic
container-type: inline-size establishes the sizing context. The @container feature (min-width: 20rem) query checks the wrapper width, not the viewport. When the container crosses the threshold, padding and font sizes adjust accordingly. The flex-direction: column stays consistent, but spacing and typography scale with available space.
Why container queries over media queries? Media queries tie your component to viewport size. Container queries tie it to its actual context — the space it's given. This makes components truly reusable across different layouts.
Accessibility & performance
Container queries run entirely in CSS — no performance penalty, no layout thrashing. For accessibility, wrap the card in <article> for semantic meaning. Ensure the CTA button has visible focus rings (:focus-visible). The icon should have aria-hidden="true" if it's decorative, or be replaced with an <svg> with proper labeling if it conveys meaning.
@media (min-width: 20rem) fallback.