Content Hero

Content Hero provides a block of content with a title, content, links, and list of icons. Used to highlight a section of content. Used by the HeroContent Prismic slice

Examples

Content Hero


      <Grid gridGap={2} gridAutoFlow="column" width="100%">
      <ContentHero
      title={<H1>Hero Title</H1>}
      content={<Text>Hero Content</Text>}
      backgroundColor="#f5f5f5"
      />
      </Grid>

Content Hero with Links


      <Grid gridGap={2} gridAutoFlow="column" width="100%">
      <ContentHero
      title={<H1>Hero Title</H1>}
      content={<Text>Hero Content</Text>}
      backgroundColor="#f5f5f5"
      links={[
        { text: 'Primary Button', link: '/link' },
        { text: 'Secondary Button', link: '/link' }
      ]}
      />
      </Grid>

Content Hero with image


      <Grid gridGap={2} gridAutoFlow="column" width="100%">
      <ContentHero
      title={<H1>Hero Title</H1>}
      content={<Text>Hero Content</Text>}
      backgroundColor="#f5f5f5"
      links={[
        { text: 'Primary Button', link: '/link' },
        { text: 'Secondary Button', link: '/link' }
      ]}
      image={<img src="https://images.prismic.io/eola-live/Z0C4uK8jQArT1OBU_AdobeStock_88228188.jpeg?auto=format%2Ccompress&w=500&fit=clip" />}
      />
      </Grid>

Content Hero with icon list


      <Grid gridGap={2} gridAutoFlow="column" width="100%">
      <ContentHero
      title={<H1>Hero Title</H1>}
      content={<Text>Hero Content</Text>}
      backgroundColor="#f5f5f5"
      list={[
        { icon: <Icon name="check" />, text: 'Icon 1' },
        { icon: <Icon name="check" />, text: 'Icon 2' }
      ]}
      image={<img src="https://images.prismic.io/eola-live/Z0C4uK8jQArT1OBU_AdobeStock_88228188.jpeg?auto=format%2Ccompress&w=500&fit=clip" />}
      />
      </Grid>