Page Hero

Beta
General purpose hero component that renders a responsive, mobile-first hero with or without an accompanying image.
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.
SourceStorybookFigma

Installation

import {PageHero} from '@fuegokit/react'

Usage

Variants

Available variants are of type WithImage | NoImage | TwoLineTitleLeft | TwoLineTitleCenter.

If no image URL is passed, a left-aligned hero with no image is be rendered.

Centered variants can be rendered with or without a hero image.

Action types

Every Page Hero variant should display a primary and secondary action

Each button in the hero accepts an action, objects that have the following shape:

const primaryAction = {
  label: 'Go to workflows',
  tracking: {
    destination: 'support:suggestion',
    type: 'link'
  },
  type: 'EXTERNAL',
  url: 'https://www.appfire.com'
}

Typescript support

Fuegokit React ships with Typescript support and to access Page Hero's types, import them with the component:

import {PageHero, PageHeroProps} from '@fuegokit/react'


const MyHeroSection = ({
  title,
  caption,
  imgUrl,
  primaryAction,
  secondaryAction,
  variant,

See also