Default

By default, cards have built-in padding.

Without padding

The padding can be removed if needed.

Divided Card

You can add your own padding to the card, by default it comes with no padding.

Card Wrapper

With link

Add a href prop to your card to turn it into a hyperlink.

Non-atomic

By default cards are atomic. That means that assistive technology will see the card as a single item, whose value is the content.

If the copy inside your card is lengthy, you should consider making it non-atomic and providing a CTA inside. The entire card will still be clickable/tappable, but will appear to AT as a dumb container.

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

                                                
                                                import {
                                                  BpkDividedCard,
                                                  ORIENTATION,
                                                } from '@skyscanner/backpack-web/bpk-component-card';
                                                
                                                export default () => (
                                                  <>
                                                    <BpkDividedCard
                                                      primaryContent={<span>foo</span>}
                                                      secondaryContent={<span>bar</span>}
                                                      orientation={ORIENTATION.vertical}
                                                    />
                                                    // Toggle shadow shadow with isElevated
                                                    <BpkDividedCard
                                                      primaryContent={<span>foo</span>}
                                                      secondaryContent={<span>bar</span>}
                                                      orientation={ORIENTATION.horizontal}
                                                      isElevated={false}
                                                    />
                                                  </>
                                                );

                                                
                                                import { BpkCardWrapper } from '@skyscanner/backpack-web/bpk-component-card';
                                                import { coreAccentDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
                                                import BpkCard from '@skyscanner/backpack-web/bpk-component-card';
                                                
                                                export default () => (
                                                  <BpkCardWrapper
                                                    header={<span>Hoc header</span>}
                                                    card={
                                                      <BpkCard>
                                                        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.
                                                      </BpkCard>
                                                    }
                                                    backgroundColor={coreAccentDay}
                                                  />
                                                );

Props