Hero One

The Hero One block is a simple, composable hero section that displays content alongside an image in a side-by-side layout. It renders a heading, description rich text, a link group, and an image — stacking vertically on mobile and sitting side-by-side on larger screens.

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

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.json";
import { heroCmsMappers } from "@/registry/rokkit200-ui/blocks/hero/internals/lib/hero-utils";
import { HeroOne } from "@/registry/rokkit200-ui/blocks/hero/variants/hero-one/hero-one";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";
import { heroBlockCodeModel, heroBlockFragment } from "../constants";

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

    return <HeroOne {...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

HeroOne 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
ContentImage	Renders the hero image with responsive <picture> support

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 HeroOne in your site.

import { HeroOne } from "@/rokkit200-ui/blocks/hero/variants/hero-one/hero-one";
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 <HeroOne {...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.

Reversed Layout

Flip the image to the leading side by reversing the flex direction.

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.json";
import { heroCmsMappers } from "@/registry/rokkit200-ui/blocks/hero/internals/lib/hero-utils";
import { HeroOne } from "@/registry/rokkit200-ui/blocks/hero/variants/hero-one/hero-one";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

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

    return <HeroOne {...properties!} className="md:flex-row-reverse" />;
}

Compact

Reduce padding, gaps, 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.json";
import { heroCmsMappers } from "@/registry/rokkit200-ui/blocks/hero/internals/lib/hero-utils";
import { HeroOne } from "@/registry/rokkit200-ui/blocks/hero/variants/hero-one/hero-one";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

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

    return (
        <HeroOne
            {...properties!}
            className="gap-2 rounded-lg p-2"
            headingClassName="text-3xl"
            mediaClassName="rounded-lg"
        />
    );
}

API Reference

HeroOneProperties

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 ContentImage.
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 <div>.
mediaClassName	string	—	Classes applied to the ContentImage 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 hero 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.

Related Patterns

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