Hero Two

The Hero Two block is a full-bleed hero section that layers text content over a background image. It renders a heading, description rich text, a link group, and a cover image — the image fills the entire block background while text overlays on top.

npx shadcn@latest add @rokkit200-ui/hero-two

Preview

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

• Lorem ipsum dolor
• Sit amet

Code

import mockedHeroBlock from "@/data/mock/optimizely/hero/hero-block-alternate.json";
import { heroCmsMappers } from "@/registry/rokkit200-ui/blocks/hero/internals/lib/hero-utils";
import { HeroTwo } from "@/registry/rokkit200-ui/blocks/hero/variants/hero-two/hero-two";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";
import { heroBlockCodeModel, heroBlockFragment } from "../constants";

export default function HeroTwoDefaultDemo() {
    const properties = mapCmsType(
        heroCmsMappers,
        mockedHeroBlock.data.HeroBlock.item
    );

    return <HeroTwo {...properties!} />;
}

Code Model

WIP

GraphQL Query

query HeroBlockQuery {
    HeroBlock {
      item {
        ...HeroBlockFragment
      }
    }
  }

  fragment HeroBlockFragment on HeroBlock {
    Heading
    MainBody {
      json
    }
    Links {
      __typename
      url {
        type
        default
        hierarchical
        internal
        graph
        base
        __typename
      }
      target
      text
      title
    }
    Media {
      ... on ImageMedia {
        AltText
        _metadata {
          url {
            default
          }
        }
        _imageMetadata {
          width
          height
        }
      }
    }
  }

Composition

HeroTwo is assembled from the following components:

Component	Role
RichText	Renders the hero body as structured rich text
LinkGroup	Renders the call-to-action links with primary/secondary variant slots
CoverImage	Renders the background image as a full-bleed cover

Shared internals (hero-internals) provide the HeroProperties type, image profile, and CMS mapper utilities used by all hero variants.

Usage

Below is an example of how to use HeroTwo in your site.

import { HeroTwo } from "@/rokkit200-ui/blocks/hero/variants/hero-two/hero-two";
import { mapCmsType } from "@/rokkit200-ui/lib/content-mapper/content-mapper-util";
import { heroCmsMappers } from "@/rokkit200-ui/blocks/hero/internals/lib/hero-utils";

const properties = mapCmsType(heroCmsMappers, heroResponse);

return <HeroTwo {...properties!} />;

Customisation

All visual customisation is done via className props. No additional CSS or theme tokens are required — pass Tailwind classes to adjust layout, spacing, typography, and media styling.

Centered Text

Centre-align the text overlay and spread the body text to full width.

Preview

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

• Lorem ipsum dolor
• Sit amet

Code

import mockedHeroBlock from "@/data/mock/optimizely/hero/hero-block-alternate.json";
import { heroCmsMappers } from "@/registry/rokkit200-ui/blocks/hero/internals/lib/hero-utils";
import { HeroTwo } from "@/registry/rokkit200-ui/blocks/hero/variants/hero-two/hero-two";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

export default function HeroTwoCenteredDemo() {
    const properties = mapCmsType(
        heroCmsMappers,
        mockedHeroBlock.data.HeroBlock.item
    );

    return (
        <HeroTwo
            {...properties!}
            className="items-center text-center"
            textContainerClassName="items-center"
            bodyClassName="md:w-full"
            linksClassName="justify-center"
        />
    );
}

Compact

Reduce vertical margins, border radius, and heading size for a tighter presentation.

Preview

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

• Lorem ipsum dolor
• Sit amet

Code

import mockedHeroBlock from "@/data/mock/optimizely/hero/hero-block-alternate.json";
import { heroCmsMappers } from "@/registry/rokkit200-ui/blocks/hero/internals/lib/hero-utils";
import { HeroTwo } from "@/registry/rokkit200-ui/blocks/hero/variants/hero-two/hero-two";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

export default function HeroTwoCompactDemo() {
    const properties = mapCmsType(
        heroCmsMappers,
        mockedHeroBlock.data.HeroBlock.item
    );

    return (
        <HeroTwo
            {...properties!}
            className="rounded-lg"
            textContainerClassName="my-[80px] md:my-[100px]"
            headingClassName="text-3xl"
        />
    );
}

API Reference

HeroTwoProperties

Extends HeroProperties (from hero-internals).

Prop	Type	Default	Description
heading	string	—	The hero heading text. Required.
mainBody	RichTextNode[]	—	Structured rich text nodes for the body content.
links	LinkItem[]	—	Array of link items rendered via LinkGroup.
media	{ imageSource, profile }	—	Image source and responsive picture profile for CoverImage.
className	string	—	Classes applied to the root <article> element.
textContainerClassName	string	—	Classes applied to the text content wrapper.
headingClassName	string	—	Classes applied to the <h2> heading element.
bodyClassName	string	—	Classes applied to the RichText component wrapper.
linksClassName	string	—	Classes applied to the LinkGroup wrapper.
mediaContainerClassName	string	—	Classes applied to the image container (unused in this variant — reserved for consistency).
mediaClassName	string	—	Classes applied to the CoverImage element.

Accessibility

• The root element is an <article> with aria-labelledby pointing to the heading, providing a labelled landmark for assistive technology.
• The heading renders as an <h2>. Ensure it fits the document outline where the block is placed.
• The cover image receives loading="eager" and fetchPriority="high" to prioritise above-the-fold rendering.
• Links inherit accessibility behaviour from the Link component, including safe rel tokens for external targets.
• Because text overlays the image, ensure sufficient colour contrast between the text and the underlying image. Consider adding a semi-transparent overlay via className if the source image varies.

Related Patterns

• Responsive Images — guidance on image profiles and <picture> usage.
• Grouped Content — composing blocks into page sections.