Ticket

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.

Default

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

Storybook failed to load.

Vertical

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.

bpk-component-ticket

Backpack ticket component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                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.
                                                  </BpkTicket>
                                                );

Props

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