Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Heroes

Responsive hero sections for product, editorial, and marketing pages.

BlocksMarketing@gaudi/design-system/blocks/HeroView in StorybookSource

One shared layout owns the heading, introduction, action group, and media; compose the slots with existing Gaudi components.

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Heroes from '@gaudi/design-system/blocks/Hero';

Usage

import { Hero } from '@gaudi/design-system/blocks/Hero';import Button from '@gaudi/design-system/core/Button';
<Hero title='A good place to start.' description='Your content. Shared foundations.' actions={<Button href='/start'>Get started</Button>} />

Examples

Aurora

Storybook

Mesh gradient

Storybook

Live surface

Storybook

Journal topics

Storybook

Split image

Storybook

Product preview

Storybook

Editorial

Storybook

API

9 props

Accessibility

The section is labelled by its heading. Reading order is eyebrow, heading, description, actions, supporting content, then media. Images need meaningful alternative text, or empty alt text when decorative. Background imagery must be decorative and non-interactive.

Notes

  • The hero responds to its container, stacking split and editorial layouts below 48rem.
  • Supply prepared content and real destinations. Navigation, forms, claims, and product behavior belong to the host.
  • Animated examples reuse Gaudi backgrounds (Aurora, Grainient, Dark Veil, Floating Lines, Liquid Ether) and include a pause control; reduced motion stops them.
  • The examples are original Gaudi compositions using local artwork; no Tailwind Plus source is included.
NavigationThe site header block: brand, primary NavigationMenu with a two-block Blog panel (categories beside recent posts) or a Categories panel on the supplied blog route, search, theme switch, and a phone sheet below lg. LayoutContainer renders it from menuProps.AuroraTheme-aware Aurora light curtains, with a Soft Aurora variant that forms a narrow glowing ribbon.GrainientA slowly warped three-color gradient with fine animated grain.ButtonButton renders the Gaudi action and link-button variants.7 examplesLinkLink centralizes navigation semantics for internal, anchor, and external links.