Panel

Panels are useful for housing distinct areas of related content. Unlike cards these are not clickable.

Default

This is the default panel type which comes with padding already applied to get you up and running quickly.

Storybook failed to load.

Without Padding

As above, but without padding, allowing you to have full-bleed content or roll your own padding.

Storybook failed to load.

Full width

This option allows you to make a panel full width, which is especially useful on small viewports.

Storybook failed to load.

bpk-component-panel

Backpack panel component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import BpkPanel from '@skyscanner/backpack-web/bpk-component-panel';
                                                
                                                export default () => (
                                                  <BpkPanel>
                                                    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.
                                                  </BpkPanel>
                                                );

Props

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

Props

Storybook failed to load.