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

Check out the full list of props on Skyscanner's design system documentation website.

Props

Storybook failed to load.
Theming
Web
Toast
Android

Made with ❤️ by Skyscanner © 2023

© 2023 Skyscanner Backpack. Page last updated on Oct 2, 2023, 16:05