Asymmetric
Asymmetric gallery with dynamic positioning.
galleryasymmetricdynamicpositioning
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | Array<{src: string, width?: string, height?: string, top?: string, left?: string, right?: string, bottom?: string, rotate?: number, label?: string, grayscale?: boolean, decoration?: React.ReactNode}> | [{src: '...', width: '300px', height: '350px', top: '20', left: '10', rotate: -6, label: 'Summer 23', grayscale: true}, ...] | Array of image objects with positioning and styling properties. |
backgroundColor | string | #fcf8f3 | Background color (hex, rgb, or hsl). |
patternUrl | string | https://www.transparenttextures.com/patterns/cubes.png | URL for background pattern texture. |
title | string | COLLAGE | Large background title text. |
titleColor | string | rgba(0,0,0,0.05) | Title text color (hex, rgb, or rgba). |