Item

The Item component is used on all activities, rentals, memberships, cart and overview.

Examples

Item Card - Home

<Item card as="a">
  <CoverImage src={imageUrl} overlay />
  <ItemTextCta>
    <H5>Item title</H5>
    <Icon name="arrow-right" size={24} />
  </ItemTextCta>
</Item>

Item Card - Home - slim version

<Item card as="a" variant="slimCard">
  <CoverImage src={imageUrl} overlay />
  <ItemTextCta>
    <H5>Item title</H5> 
  </ItemTextCta>
   <Icon name="card-arrow" size={24} />
</Item>

Item Card - List Schedulables

<Item card as="a">
  <CoverImage src={imageUrl} />
  <ItemText>
    <ItemTextTop>
      <Pin icon="kayak">
        kayak
      </Pin>
      <PriceWrapper>
        <Price pence="1000" currency="gbp" />
        <PriceText> / person</PriceText>
      </PriceWrapper>
    </ItemTextTop>
    <H5>Schedulable Name</H5>
    <Text color="secondary">Description of item. A two day package that includes a day of training prior to undertaking the Pre Entry Assessment</Text>
  </ItemText>
</Item>

Item Simple - Used as wrapper to hold text or other contents

<Item>
  <ItemText>
    <H5>Important Information</H5>
    <Text
      as="div"
      color="secondary"
    >
      <p>Description of item. A two day package that includes a day of training prior to undertaking the Pre Entry Assessment</p>
      <p>Description of item. A two day package that includes a day of training prior to undertaking the Pre Entry Assessment</p>
      <p>Description of item. A two day package that includes a day of training prior to undertaking the Pre Entry Assessment</p>
    </Text>
  </ItemText>
</Item>

ItemText

<ItemText thumbnailSrc={imageUrl}>
  <ItemTextTop pence={100} currency="gbp" Actions={() => (
    <button
        onClick={() => {
          alert('Run some action')
        }}
      >
        Some action
    </button>
  )}>
    <Pin icon="kayak">Category</Pin>
  </ItemTextTop>
  <H5>
    Item title
  </H5>
  <Text color="secondary">
    Description of item. A two day package that includes a day of training prior to undertaking the Pre Entry Assessment
  </Text>
</ItemText>

ItemBreakdownLine

<ItemBreakdownLine icon="box" text="5x Lunch at the park" RightContent={() => (
  <Text as="div" color="secondary">
    <Price pence={5000} currency="gbp" />
  </Text>
)} />