Small

With trailing text

With leading and trailing text

With previous price

Large

                                                
                                                import BpkPrice, {
                                                  SIZES,
                                                  ALIGNS,
                                                } from '@skyscanner/backpack-web/bpk-component-price';
                                                
                                                export default () => (
                                                  <BpkPrice
                                                    size={SIZES.large}
                                                    align={ALIGNS.left}
                                                    price="£1,209"
                                                    previousPrice="£1,830"
                                                    leadingText="App only deal"
                                                    trailingText="a night"
                                                  />
                                                );

Props