Solid

Top

Bottom

Left

Right

Vignette

With content

                                                
                                                import BpkText from '@skyscanner/backpack-web/bpk-component-text';
                                                import BpkOverlay, { OVERLAY_TYPES } from '@skyscanner/backpack-web/bpk-component-overlay';
                                                
                                                export default () => (
                                                  <div>
                                                    { /* Basic example with tint */}
                                                    <BpkOverlay
                                                      overlayType={OVERLAY_TYPES.solidLow}
                                                    >
                                                      <BpkText>Hotels in Canada</BpkText>
                                                    </BpkOverlay>
                                                
                                                    { /* With the tint invisible */}
                                                    <BpkOverlay>
                                                      <BpkText>Hotels in Canada</BpkText>
                                                    </BpkOverlay>
                                                
                                                    { /* With foreground content */}
                                                    <BpkOverlay foregroundContent={<BpkText>Visit Ottawa</BpkText>}>
                                                      <BpkImage
                                                        altText="altText here"
                                                        aspectRatio={16}
                                                        src="" />
                                                    </BpkOverlay>
                                                  </div>
                                                );

Props