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.
bpk-component-card
Backpack card component.
Installation
Check the main Readme for a complete installation guide.
Usage
BpkCard
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>
);
BpkDividedCard
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}
/>
</>
);
BpkCardWrapper
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
Check out the full list of props on Skyscanner's design system documentation website.