Hero

Oversized two-title headline with optional description, CTAs, and media slot.

Built forteams who ship.

A pragmatic design system for productivity apps — built by Playstack on top of significa/foundations.

import { Hero } from '@/foundations/blocks/hero';
import { Button } from '@/components/button';

export default function HeroPreview() {
  return (
    <Hero
      eyebrow="Built for"
      title="teams who ship."
      description="A pragmatic design system for productivity apps — built by Playstack on top of significa/foundations."
      action={<Button>Get started</Button>}
      secondaryAction={<Button variant="outline">View on GitHub</Button>}
    />
  );
}

export const meta = {
  layout: 'fullscreen',
};

Dependencies

Container

Source Code

import {
  Container,
  type ContainerProps,
} from '@/components/container';
import { cn } from '@/lib/utils/classnames';

interface HeroProps
  extends Omit<React.ComponentPropsWithRef<'section'>, 'title'> {
  /** Smaller secondary line above the main title (the signature significa two-title pattern). */
  eyebrow?: React.ReactNode;
  title: React.ReactNode;
  description?: React.ReactNode;
  /** Primary action — typically a `<Button>`. */
  action?: React.ReactNode;
  /** Optional secondary action. */
  secondaryAction?: React.ReactNode;
  /** Optional media slot — image, video, or any node — rendered below the copy. */
  media?: React.ReactNode;
  /** Alignment of the copy. Defaults to `'start'`. */
  align?: 'start' | 'center';
  /** Gutter passed to the inner Container. Defaults to `'md'`. */
  gutter?: ContainerProps['gutter'];
}

const Hero = ({
  ref,
  className,
  eyebrow,
  title,
  description,
  action,
  secondaryAction,
  media,
  align = 'start',
  gutter,
  ...rest
}: HeroProps) => (
  <section
    ref={ref}
    className={cn('w-full py-16 md:py-24 lg:py-32', className)}
    {...rest}
  >
    <Container gutter={gutter}>
      <div
        className={cn(
          'flex flex-col gap-6',
          align === 'center' && 'items-center text-center'
        )}
      >
        <h1
          className={cn(
            'text-balance font-bold text-5xl md:text-6xl lg:text-7xl',
            'max-w-4xl'
          )}
        >
          {eyebrow && (
            <span className="block text-foreground-secondary">{eyebrow}</span>
          )}
          {title}
        </h1>

        {description && (
          <p className="max-w-2xl text-pretty text-2xl text-foreground-secondary">
            {description}
          </p>
        )}

        {(action || secondaryAction) && (
          <div
            className={cn(
              'mt-4 flex flex-wrap gap-3',
              align === 'center' && 'justify-center'
            )}
          >
            {action}
            {secondaryAction}
          </div>
        )}
      </div>

      {media && <div className="mt-12 md:mt-16 lg:mt-20">{media}</div>}
    </Container>
  </section>
);

export type { HeroProps };
export { Hero };

Hero is the top-of-page block: an oversized headline, optional description, action buttons, and a media slot. Use the eyebrow prop for the signature two-line title pattern (secondary tone + foreground tone).

Anatomy


          <Hero
  eyebrow="Built for"
  title="teams who ship."
  description="A design system for productivity apps."
  action={<Button>Get started</Button>}
  secondaryAction={<Button variant="secondary">Learn more</Button>}
/>

API Reference

Extends the section element.

Prop	Default	Type
`eyebrow`	-	`ReactNode`
`title *`	-	`ReactNode`
`description`	-	`ReactNode`
`action`	-	`ReactNode`
`secondaryAction`	-	`ReactNode`
`media`	-	`ReactNode`
`align`	`'start'`	`'start''center'`

Examples

Default

Built forteams who ship.

A pragmatic design system for productivity apps — built by Playstack on top of significa/foundations.

import { Hero } from '@/foundations/blocks/hero';
import { Button } from '@/components/button';

export default function HeroPreview() {
  return (
    <Hero
      eyebrow="Built for"
      title="teams who ship."
      description="A pragmatic design system for productivity apps — built by Playstack on top of significa/foundations."
      action={<Button>Get started</Button>}
      secondaryAction={<Button variant="outline">View on GitHub</Button>}
    />
  );
}

export const meta = {
  layout: 'fullscreen',
};

FAQs

Logo Cloud