Home / Snippets / UI Components /

Recipe card

Editorial gradient stand-in for photography, timing chips, and a monospace ingredient teaser.

Smoky paprika shakshuka

35 min 4 serves Skill · Easy

Jammy tomatoes, roasted peppers, and eggs baked until the whites just set — brunch hero.

eggs ×4 · san marzano tomatoes · smoked paprika · feta · cilantro

Widely Supported

uino-js

Quick implementation

.rc-hero {
  min-height: 6.5rem;
  background:
    linear-gradient(0deg, var(--card), transparent 45%),
    radial-gradient(80% 120% at 20% 20%, oklch(0.75 0.12 85 / 0.5), transparent);
}

Prompt this to your LLM

Gradient-only hero keeps demos offline-friendly.

Create a recipe card.

Classes: .recipe-card-demo, .recipe-card-card.
Gradient header block, title, pill row for time/serves/skill, description, monospace ingredient line.

Return HTML + CSS.

Why this matters in 2026

Recipe SEO still rewards schema.org Recipe; this layout mirrors what JSON-LD expects visually.

The logic

Layered radial gradients suggest warmth without shipping bitmaps in the snippet pack.

Accessibility & performance

role="img" on hero with aria-label when no real img alt is present; swap to picture element in production.