Content cards

Images and text arranged in a beautiful responsive layout, with options to show 1, 2, or 3 items at once.

With one card

Storybook failed to load.

With two cards

Storybook failed to load.

With three cards

Storybook failed to load.

bpk-component-content-cards

Backpack example component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import BpkContentCards from '@skyscanner/backpack-web/bpk-component-content-cards';
                                                
                                                <BpkContentCards
                                                    heading='Heading'
                                                    cards=[
                                                        {
                                                            image: {
                                                                url: 'http://skyscanner.net/card-1-image-link.jpg',
                                                                alt: 'People surfing in the ocean',
                                                            },
                                                            headline: 'Card headline',
                                                            description: 'Card description',
                                                            href: 'http://skyscanner.net/card-1-cta-link.html',
                                                        },
                                                    ]
                                                />
                                                
                                                export default () => <BpkContentCards />;

Props

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

Props

Storybook failed to load.