Editorial Hero

Heroes 171

About

An editorial hero section with a left tagline, right-aligned headline and copy, optional CTAs, and a full-width image below.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Editorial Hero to your project and fits it to your theme.

Code

How Editorial Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Hero05, type Hero05Props } from '@/components/ui/hero-05'

const values = {
  tagline: 'Brand, product, and story for teams building something new',
  title:
    'A creative studio for founders who want their work to feel considered.',
  description:
    'We help early stage companies turn rough ideas into clear identities, thoughtful digital products, and messaging people remember. Strategy, design, and execution in one place.',
  landscapeImage:
    'https://cdn.21st.dev/assets/mirror/18/18129f9729d7e9fd5393c61d23efb785da4320478b3a878a3e6dd084d86a229d.jpg',
  landscapeAlt: 'Editorial hero landscape',
  animation: 'subtle',
  primaryCTA: {
    ctaEnabled: false,
    text: 'Start a project',
    link: '',
    variant: 'default',
  },
  secondaryCTA: {
    ctaEnabled: false,
    text: 'View work',
    link: '',
    variant: 'link',
  },
} satisfies Hero05Props

export default function Hero05Example() {
  return <Hero05 {...values} />
}