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


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.


Backpack panel component.


Check the main Readme for a complete installation guide.


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


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


Storybook failed to load.