logo

eola Style Guide 2024: Hero Section

Hero Section

Mainly used for a schedulable page.

Examples

Default

<StyledLayout>
  <HeroSection>
    <CoverImage
      src={imageUrl}
      height={190}
      round={false}
      mb={2}
    />
    <HeroSectionContainer>
      <HeroSectionContainerRow>
        <H3>Activity Name</H3>
      </HeroSectionContainerRow>

      <HeroSectionContainerRow>
        <TagsList tags={["kayak", "1 day", "Up to 6 people"]} />
      </HeroSectionContainerRow>
      
      <DetailsList>
        <DetailsListItem>
          <Icon name="pin" size={24} mr={3} />
          <Text font="heading">
            London, UK
          </Text>
        </DetailsListItem>
        <DetailsListItem>
          <Icon name="ticket-price" size={24} mr={3} />
          <Text font="heading">
            From £50 / person
          </Text>
        </DetailsListItem>
      </DetailsList>
    </HeroSectionContainer>
  </HeroSection>
</StyledLayout>