{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "recipes", "type": "registry:block", "title": "Recipes", "description": "A card-grid screen with a page header, a large search and category sections of recipe cards. Logos are placeholder tiles to swap for the real brand logo.", "registryDependencies": [ "tokens", "tokens-console", "sidebar", "badge", "avatar", "button" ], "meta": { "category": "Blocks", "layout": "screen", "theme": "console" }, "files": [ { "path": "blocks/recipes.html", "type": "registry:file", "target": "blocks/recipes.html", "content": "\n\n
\n \n\n
\n

Recipes

\n

Complex filter combinations made for you to get the best results

\n\n
\n \n \n \n
\n\n
\n
\n Highlighted\n
\n
\n
\n
B
\n

Bubble.io

\n

Bubble.io is the leading no-code platform for building fully functional, data-driven web applications through a visual drag-and-drop interface.

\n Cloud\n
\n
\n
F
\n

Flutterflow APP

\n

FlutterFlow is a visual low-code platform built on Google's Flutter framework that enables anyone to design, build and deploy cross-platform apps.

\n Cloud\n
\n
\n
B
\n

Bolt

\n

Bolt.new is an AI-powered full-stack web development agent by StackBlitz that turns natural language prompts into deployable applications.

\n Cloud\n
\n
\n
\n\n
\n
\n E-commerce (48)\n See all\n
\n
\n
\n
\n

Thuiswinkel

\n T\n
\n

Thuiswinkel Waarborg is a Dutch e-commerce trust mark for online stores.

\n
\n
\n
\n

One.com

\n O\n
\n

One.com Webshop is a user-friendly e-commerce builder for small businesses.

\n
\n
\n
\n

Tray

\n Y\n
\n B3:LWSA3\n

Tray is a Brazilian e-commerce platform for building online stores.

\n
\n
\n
\n

Websitebuilder

\n W\n
\n

Web.com Websitebuilder offers a hosted store and site building service.

\n
\n
\n
\n
\n
\n" }, { "path": "blocks/recipes.css", "type": "registry:file", "target": "blocks/recipes.css", "content": "/* Recipes block\n A card-grid screen: page header, a large search, and category sections of\n recipe cards. Composed under the console theme. */\n\n.dp-recipes-title {\n margin: 0 0 var(--dp-space-2);\n font-size: var(--dp-text-4xl);\n font-weight: var(--dp-weight-extrabold);\n color: var(--dp-navy);\n}\n\n.dp-recipes-desc {\n margin: 0 0 var(--dp-space-6);\n font-size: var(--dp-text-lg);\n color: var(--dp-text-muted);\n}\n\n/* Large search */\n.dp-recipes-search {\n position: relative;\n margin-bottom: var(--dp-space-10);\n}\n\n.dp-recipes-search input {\n width: 100%;\n height: 3.25rem;\n font-family: var(--dp-font-sans);\n font-size: var(--dp-text-base);\n color: var(--dp-navy);\n background: var(--dp-surface);\n border: 1px solid var(--dp-border-neutral);\n border-radius: var(--dp-radius-lg);\n padding: 0 3rem;\n}\n\n.dp-recipes-search input::placeholder { color: var(--dp-text-subtle); }\n\n.dp-recipes-search input:focus {\n outline: none;\n border-color: var(--dp-primary-bg);\n box-shadow: var(--dp-shadow-focus);\n}\n\n.dp-recipes-search .dp-recipes-search-icon {\n position: absolute;\n left: var(--dp-space-4);\n top: 50%;\n transform: translateY(-50%);\n width: 1.25rem;\n height: 1.25rem;\n color: var(--dp-text-subtle);\n pointer-events: none;\n}\n\n.dp-recipes-search .dp-recipes-search-info {\n position: absolute;\n right: var(--dp-space-4);\n top: 50%;\n transform: translateY(-50%);\n width: 1.25rem;\n height: 1.25rem;\n color: var(--dp-text-subtle);\n}\n\n/* Section */\n.dp-recipes-section { margin-top: var(--dp-space-10); }\n\n.dp-recipes-section-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--dp-space-4);\n margin-bottom: var(--dp-space-5);\n}\n\n.dp-recipes-section-title {\n font-size: var(--dp-text-2xl);\n font-weight: var(--dp-weight-extrabold);\n color: var(--dp-navy);\n}\n\n.dp-recipes-section-title span {\n font-weight: var(--dp-weight-regular);\n color: var(--dp-text-muted);\n}\n\n.dp-recipes-seeall {\n color: var(--dp-navy);\n font-weight: var(--dp-weight-semibold);\n font-size: var(--dp-text-base);\n text-decoration: none;\n}\n\n.dp-recipes-seeall:hover { color: var(--dp-link); }\n\n/* Cards */\n.dp-recipe-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: var(--dp-space-5);\n}\n\n.dp-recipe-grid[data-compact] {\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n}\n\n.dp-recipe-card {\n display: flex;\n flex-direction: column;\n padding: var(--dp-space-6);\n background: var(--dp-surface);\n border: 1px solid var(--dp-border);\n border-radius: var(--dp-radius-xl);\n}\n\n.dp-recipe-logo {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 8rem;\n margin-bottom: var(--dp-space-5);\n}\n\n.dp-recipe-logo-tile {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 4.5rem;\n height: 4.5rem;\n border-radius: var(--dp-radius-lg);\n background: var(--dp-surface-soft);\n color: var(--dp-brand-purple, var(--dp-navy));\n font-size: var(--dp-text-3xl);\n font-weight: var(--dp-weight-extrabold);\n}\n\n.dp-recipe-title {\n margin: 0 0 var(--dp-space-2);\n font-size: var(--dp-text-xl);\n font-weight: var(--dp-weight-bold);\n color: var(--dp-navy);\n}\n\n.dp-recipe-desc {\n flex: 1;\n margin: 0 0 var(--dp-space-4);\n font-size: var(--dp-text-sm);\n color: var(--dp-text-muted);\n}\n\n/* Compact card: title and logo on one row */\n.dp-recipe-card[data-compact] { padding: var(--dp-space-5); }\n\n.dp-recipe-card[data-compact] .dp-recipe-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--dp-space-3);\n margin-bottom: var(--dp-space-3);\n}\n\n.dp-recipe-card[data-compact] .dp-recipe-title { margin: 0; font-size: var(--dp-text-lg); }\n\n.dp-recipe-card[data-compact] .dp-recipe-logo-tile {\n width: 2.75rem;\n height: 2.75rem;\n font-size: var(--dp-text-lg);\n border-radius: var(--dp-radius-md);\n}\n" } ] }