Pop Grid
Pop art masonry grid with vibrant colors and bold patterns.
Main Features of Pop Grid
How to Use Pop Grid in Next.js
Installation Guide for Pop Grid
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [...12 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 | #FFE5E5 | Background color (hex, rgb, or hsl). |
itemPrefix | string | ITEM | Prefix text for item labels. |
badgeText | string | POP | Badge text displayed on images. |
colors | string[] | ['#A3E635', '#60A5FA', '#F472B6'] | Array of background colors (hex) for alternating items. |
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
QWhy 'Pop-Art'?
The grid features thick borders (4px), vibrant primary colors, and intentional 'uncomfortable' spacing to simulate the raw structural honesty of the pop-art movement.
QCan I adjust the colors?
Absolutely, you can adjust both the `backgroundColor` and the primary `colors` array (default: vibrant mix) to match your brand's specific high-intensity palette.
QIs it mobile responsive?
The grid spans and typographic scales adapt for mobile, ensuring the bold narrative remains impactful and structural on small screens.