logo

eola Style Guide 2024: Purchasable Card Price

Purchasable Card Price

PurchasableCardPrice styles the Price component appropriately for use on purchasable cards (like in ActivitiesList). It offers the capability to fallback to a single string (for languages that may not support the layout) either through the fallbackLayout prop or globally using a central enum.

Examples

PurchasableCardPrice

<Grid gridGap={2}>
  <PurchasableCardPrice pence={999} currency="gbp" />
  <PurchasableCardPrice fallbackLayout pence={1199} currency="gbp" />
</Grid>