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

Property PropType Required Default Value
heading string true
cards
  • image
    • url
    • alt
  • headline
  • description
  • href
Array
  • Object
    • string
    • string
  • string
  • string
  • string
true
  • true
    • true
    • false
  • true
  • true
  • true
""