Components
Structure
Hero

Hero

It is a multi-purpose component which creates boxes that are usually teasing some kind of content.

Import statement

import { Hero, HeroExternal } from "@wfp/react"

Usage

The Hero component can be used in various ways depending on the provided props. For example, it can serve as a clickable link to external content, display an image with a title and subtitle, or simply showcase additional metadata. The component supports different styles or kinds, such as overlay images or simple cards, which can be specified using the kind prop.

Example Regular

Expand code

Editable Example

import { Hero } from "@wfp/react";

<div style={{ width: "600px" }}>
  <Hero
    href="#"
    image="http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg"
    subTitle="Food security and climate change analyses, adaptation planning, and good practices in food security adaptation programming."
    title="The Climate Adaption Mangement and Innovation Initiative"
    kind="landscape"
    metadata="Climate Change, Publication"
  />
</div>;

Example Card type Hero

Expand code

Editable Example

import { Hero } from "@wfp/react";

<Hero
  href="#"
  image="http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg"
  subTitle="Food security and climate change analyses, adaptation planning, and good practices in food security adaptation programming."
  title="The Climate Adaption Mangement and Innovation Initiative"
  kind="simple-card"
  metadata="Card type"
  cardWidth="300px"
  cardHeight="500px"
/>;

Example Landscape Light

Expand code

Editable Example

import { Hero } from "@wfp/react";

<div style={{ width: "600px" }}>
  <Hero
    href="#"
    image="http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg"
    subTitle="Food security and climate change analyses, adaptation planning, and good practices in food security adaptation programming."
    title="The Climate Adaption Mangement and Innovation Initiative"
    kind="landscape-light"
    metadata="Climate Change, Publication"
  />
</div>;

Example Split

Expand code

Editable Example

import { Hero } from "@wfp/react";

<div style={{ width: "600px" }}>
  <Hero
    href="#"
    image="http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg"
    subTitle="Food security and climate change analyses, adaptation planning, and good practices in food security adaptation programming."
    title="The Climate Adaption Mangement and Innovation Initiative"
    metadata="Climate Change, Publication"
    kind="split"
  />
</div>;

Example Splash

Expand code

Editable Example

import { Hero, Button } from "@wfp/react";

<div style={{ width: "600px" }}>
  <Hero
    href="#"
    title="The Climate Adaption Mangement and Innovation Initiative"
    metadata="Climate Change, Publication"
    kind="splash"
    subTitle={
      <>
        <div style={{ marginBottom: "1rem" }}>
          Cras dapibus. Aenean ut eros et nisl sagittis
          vestibulum. Fusce risus nisl, viverra et,
          tempor et, pretium in.
        </div>
        <Button kind="secondary" btnSolid>
          Read more
        </Button>
      </>
    }
  />
</div>;

Example Splash Compact

Expand code

Editable Example

import { Hero, Button } from "@wfp/react";

<div style={{ width: "1000px" }}>
  <Hero
    href="#"
    metadata="Climate Change, Publication"
    kind="splash-compact"
    image="http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg"
    subTitle="Food security and climate change analyses, adaptation planning, and good practices in food security adaptation programming."
    title={
      <>
        <span style={{ marginRight: "1rem" }}>
          Nulla consequat massa quis enim
        </span>
        <Button kind="secondary" btnSolid>
          Read more
        </Button>
      </>
    }
  />
</div>;

Example Related

Expand code

Editable Example

import { Hero } from "@wfp/react";

<div style={{ width: "1000px" }}>
  <Hero
    href="#"
    image="http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg"
    subTitle="Food security and climate change analyses, adaptation planning, and good practices in food security adaptation programming."
    title="The Climate Adaption Mangement and Innovation Initiative"
    metadata="Climate Change, Publication"
    kind="related"
  />
</div>;

Example Emergencies

Expand code

Editable Example

import { Hero } from "@wfp/react";
import { WfpHumReliefGoodsPos } from "@wfp/icons-react";

<div style={{ width: "800px" }}>
  <Hero
    href="#"
    title={
      <>
        <WfpHumReliefGoodsPos
          style={{ marginRight: "1rem" }}
        />
        <span>
          Curabitur ullamcorper ultricies nisi. Proin
          magna.
        </span>
      </>
    }
    kind="emergencies"
  />
</div>;

Example External

Expand code

Editable Example

import { HeroExternal } from "@wfp/react";

<div style={{ width: "800px" }}>
  <HeroExternal
    image="http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg"
    title="A headline that can be used for the value proposition"
    subTitle="A description that can contain
        a bold tex to highlight important content. We have room
        for one or more sentences. Like this."
  >
    <div className={`wfp--hero-ext__actions`}>
      <Button large kind="primary">
        Accent action
      </Button>
      <Button large kind="secondary" btnSolid>
        Secondary action
      </Button>
    </div>
  </HeroExternal>
</div>;

On this page

References