Hero light beams
BlockA centred hero under a fan of light — an announcement pill, the headline, copy and two actions. CSS only.
- Heroes
- 2 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add hero-light-beamsimport { HeroLightBeamsBlock } from "@/components/blocks/hero-light-beams"; export default function Page() { return <HeroLightBeamsBlock />;}<HeroLightBeamsBlock>
| Prop | Type | Default |
|---|---|---|
announcementA short announcement above the headline, as a link. | HeroLightBeamsAction | null | { label: "New: voice input for every assistant", href: "#" } |
beamColorBeam colour: a token or any CSS colour. Default "primary". | string | "primary" |
description | string | "Accessible components and blocks you install as source — themed, motion-aware and ready for production." |
headingLevelThe headline's level, so the block fits any page outline. | 1 | 2 | 3 | 4 | 5 | 6 | 1 |
primaryActionThe main call to action. | HeroLightBeamsAction | null | { label: "Get started", href: "#" } |
secondaryActionThe quieter call to action. | HeroLightBeamsAction | null | { label: "Browse components", href: "#" } |
titleThe headline. | string | "Interfaces that feel lit from within" |
Plus every attribute of <section> except title.
One section landmark named by its headline, whose level is a prop (h1 by default — it is meant to open a page). The beams are aria-hidden decoration that hold still under reduced motion, and the copy sits on the theme's own background so its contrast does not depend on the light. The announcement is a real link whose dot and arrow are hidden from screen readers.