Components
Structure
Hero

Hero

Hero

Expand code

Editable Example

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

() => {
  return (
    <Hero
      image="http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg"
      kind="split"
      metadata="Climate Change, Publication"
      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"
    />
  );
};
PropDefaultDescriptionValue

href

string
–

The links target

image

string
–

An optimized photograph

isExternal

boolean
–

External link flag

isLink

boolean
–

Render the Hero as link

subTitle

ReactNode
–

A short sentence to explain the content of the node (max 180 characters)

title

ReactNode
–

A search-friendly title (ideally 50 characters, max 100)

metadata

string
–

Additional metadatas

more

ReactNode
–

Additional more content

kind

HeroKind
–

Kind of Hero

url

string
–

The URL where the content uploaded is located.

className

string
–

Additional className which will be added

cardWidth

string
–

override default card width with preferred width

cardHeight

string
–

override default card width with preferred width

On this page

References