Clay Grid
Soft clay masonry grid with organic shapes and earthy tones.
Main Features of Clay Grid
How to Use Clay Grid in Next.js
Installation Guide for Clay Grid
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [...9 image URLs] | Array of image URLs. |
content | Array<{type: 'img'|'text', src?: string, title?: string, text?: string, span?: string}> | Array of content items (images or text cards). If not provided, default content is generated from images. | |
backgroundColor | string | #e0e5ec | Background color (hex, rgb, or hsl). |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QWhat is 'Clay Design'?
The component uses localized CSS box-shadows and subtle inner glows to simulate the soft, matte surfaces found in high-fidelity 3D clay renders.
QAre colors dynamic?
Absolutely, while the background is typically neutral, each item's specific imagery and primary background color can be adjusted to fit your project's environmental theme.
QIs it mobile responsive?
The grid spans and typographic scales adapt for mobile, ensuring the objective clarity remains consistent on high-density mobile screens.