Hero 251 - Scattered images on a 12-column gridPro
Headline in the first five columns while four images of different sizes are placed at irregular column starts and vertical offsets across the remaining grid.
About Hero 251
Headline in the first five columns while four images of different sizes are placed at irregular column starts and vertical offsets across the remaining grid.
Hero 251 is a hero block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 83 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- asymmetric
- scattered
- images
- grid
- editorial
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add hero-251Dependencies installed automatically: lucide-react.
Uses: button, reveal, utils.
Usage
import Hero251 from "@/components/blocks/hero-251"
export default function Page() {
return <Hero251 />
}