It is a multi usage component which creates boxes that are usually teasing some kind of content.
import { Hero, HeroExternal } from "@wfp/react"
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.
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>;
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" />;
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>;
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>;
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>;
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>;
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>;
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>;
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>;