Grids & Layouts
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
bentoeditorialfashionasymmetric
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
heroImageSrc | string | https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?q=80&w=2070&auto=format&fit=crop | Hero image source URL. |
heroImageAlt | string | Editorial | Hero image alt text. |
heroTitle | string | Collection 001 | Hero section title. |
heroDescription | string | Exploring the intersection of brutalism and organic growth through digital mediums. | Hero section description. |
stats | Array<{value: string, label: string}> | [{value: '84.2K', label: 'Active Users'}, {value: '12.5%', label: 'Growth Rate'}, {value: '0.02s', label: 'Latency'}] | Array of stat objects with value and label. |
statsButtonText | string | View Report | Stats section button text. |
audioFileName | string | Audio_Viz.wav | Audio visualization file name. |
quote | string | Design is intelligence made visible. | Quote text. |
quoteColor | string | #000000 | Quote text color (hex, rgb, or hsl). |
bottomTitle | string | The Process | Bottom section title. |
bottomDescription | string | A systematic approach to creative problem-solving. | Bottom section description. |
bottomAvatars | number[] | [1, 2, 3, 4] | Array of avatar seed numbers for profile images. |
techText | string | React • TypeScript • Next.js | Technology stack text. |
backgroundColor | string | #ffffff | Background color (hex, rgb, or hsl). |