Summary

The Summary component is for presenting a view's most pertinent information. It enforces a H2 headline alongside small text underneath.

The component itself accepts a string or a React component for the `topText` and `bottomText` prop. This is to allow for flexibility when plugging in our existing components or when combining existing components for each row of text.

Use case

Used in menus or for pricing elements.

Examples

<Grid gridGap={2} gridAutoFlow="column" width="100%">
  <Summary topText='Up to 10 people' bottomText='in this voucher'/>
  <Summary 
    topText={() => (
      <Price pence="1020" currency="gbp" />
    )} 
    bottomText='for 3 people'
  />
  <Summary 
    topText={() => (
        <Price pence="2500" currency="gbp" />
    )} 
    bottomText={() => (
      <a>Show Prices</a>
    )}
  />    
</Grid>