Tickets combine the look and feel of Cards with an added separation line to divide their content into two distinct areas. They can be configured to display both horizontally and vertically.


The default ticket positions its stub content to the right of the main content.

Storybook failed to load.


The stub can be positioned to the bottom as well.

Storybook failed to load.

Without padding

For full flexibility, you can opt to remove the default padding.

Storybook failed to load.


Backpack ticket component.


Check the main Readme for a complete installation guide.


                                                import BpkTicket from '@skyscanner/backpack-web/bpk-component-ticket';
                                                export default () => (
                                                  <BpkTicket stub="Lorem ipsum dolor sit amet.">
                                                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
                                                    commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                                                    penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Property PropType Required Default Value
children node true -
stub node true -
href string false null
padded bool false true
vertical bool false false
stubProps object false {}
stubClassName string false null