Cardona CT LabAI Tooling · Design & Accessibility
● Design System · Feed Patterns
Feed Card
Pattern: feed/feed-card Version: 3.2.0 Status: Stable Owner: Patterns & Design Innovation
Live component
Toggle component states and vision simulations independently. Compliance indicators update per WCAG 1.4.3 and Section 508.
Component state
Vision simulation
Red and dark peppers with white flowers in an aeroponic tower system
Grow your own peppers — beginner container guide
gardeningknow.com
Default resting state. Save button and overlay hidden until interaction.
Variants
Three layout densities respond to surface context and personalization signals. Cards never hardcode their own width.
Grow your own peppers
gardeningknow.com
Standard
Default · 236px col · 4:3 or taller
Pepper guide
gardeningknow.com
Compact
High-density · 3+ cols · square
How to grow peppers in containers
gardeningknow.com
Wide
2-col · editorial · 16:9
Usage guidelines
✓ Do
Let the masonry engine control card width based on column count and viewport.
Cards are fluid within their column. Never set a fixed width on the card element itself.
✕ Don't
Don't hardcode card dimensions or override the image aspect ratio.
Fixed sizes break the masonry layout and cause reflow issues.
✓ Do
Use feed/feed-card for all organic content in feed surfaces.
Ad content uses feed/promoted-card with required disclosure UI.
✕ Don't
Don't use feed card outside of masonry or list feed layouts.
Profile grids, search, and related content use dedicated pattern variants.
✓ Do
Respect prefers-reduced-motion — switch to immediate visibility, not slower animation.
Save button still appears. No duration fallback.
✕ Don't
Don't rely on hover as the only access point for the save action.
Touch and keyboard users need persistent or focus-triggered access.
Token anatomy — primitive → semantic → component
Every value traces back through the full token chain. Component tokens are the only tokens engineers consume directly.
Color — save button background
Primitive
color.red.600
#E60023
→
Semantic
color.action.primary
= color.red.600
→
Component
card.saveButton.bg.default
= color.action.primary
Color — save button (saved state)
Primitive
color.gray.900
#111111
→
Semantic
color.action.selected
= color.gray.900
→
Component
card.saveButton.bg.saved
= color.action.selected
Spacing — image corner radius
Primitive
space.4
16px
→
Semantic
radius.card.default
= space.4
→
Component
card.image.borderRadius
= radius.card.default
Motion — overlay fade
Primitive
duration.fast
120ms
→
Semantic
motion.overlay.duration
= duration.fast
→
Component
card.overlay.transition
= motion.overlay.duration + ease.enter
Typography — card title
Primitive
fontSize.sm · fontWeight.medium
14px · 500
→
Semantic
text.body.md.medium
= fontSize.sm + fontWeight.medium
→
Component
card.title.typography
= text.body.md.medium
Motion specification
All transitions use tokens from the motion scale. Reduced motion consumers receive immediate state changes — not slower animation.
Overlay fade
120ms · ease.enter
cubic-bezier(0,0,0.2,1) — decelerates into visible state
Save button entrance
120ms · opacity + translateY(−4px → 0)
Directional cue draws eye without demanding attention
Image scale on hover
300ms · ease.standard · scale(1.02)
Confirms interactivity. Never exceed 1.04.
Reduced motion override
prefers-reduced-motion → transitions: none
Save button immediately visible. No duration fallback.
Save button exit
100ms · ease.exit
cubic-bezier(0.4,0,1,1) — exits faster than it enters
Saved state transition
200ms · ease.standard · bg color swap
Red → charcoal confirms action. No scale or bounce.
Accessibility annotations
Save button contrast
White (#FFF) on brand red (#E60023) — 4.6:1. Passes WCAG AA and Section 508 1.4.3.
Keyboard access
Card focusable via Tab. Save and More expose on focus-within. Focus ring uses card.focusRing.color token.
Screen reader labeling
Card uses role="article". Image has descriptive alt from content metadata. Save uses aria-label with card title.
Overlay action tap targets
Save button minimum 44×44px on mobile (default: 36×36px). Low-vision variant resolves this — lv token override required.
Title text contrast
Gray-900 (#111) on white — 20.4:1 (AAA). Source text at gray-600 (#767676) — 4.5:1, passes AA. Section 508 302.3 compliant.
Motion / vestibular
All animation responds to prefers-reduced-motion. Hover scale held below 1.04. No autoplaying media.
Responsive behavior
BreakpointColumnsCard widthVariantNotes
xs · <375px1100%WideSingle column, full bleed
sm · 375–599px2~170pxStandardDefault mobile
md · 600–899px3~184pxStandardTablet portrait
lg · 900–1199px4–5~200–236pxStandardTablet landscape
xl · 1200px+5–7~172–236pxCompact or StandardPersonalization-driven