Hero 244 - Visible 12-column gridPro
The underlying 12-column grid is drawn as hairline guides; the headline spans nine columns, the CTA sits in the last three and three images snap to 4/5/3-column widths.
About Hero 244
The underlying 12-column grid is drawn as hairline guides; the headline spans nine columns, the CTA sits in the last three and three images snap to 4/5/3-column widths.
Hero 244 is a hero block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 86 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
- grid-lines
- editorial
- swiss
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add hero-244Dependencies installed automatically: lucide-react.
Uses: button, reveal, utils.
Usage
import Hero244 from "@/components/blocks/hero-244"
export default function Page() {
return <Hero244 />
}