Starbucks React Pattern Library

Card

Notes

Wraps provided children in a styled box which we call a Card.

Card will style an image in one of three imagePositions (top, left, right) if an imageUrl is provided.

Padding (if needed) must be explicitly declared using a padding utility class: containerClasses for Card, contentClasses for any children, and imageClasses.

Props

childrennode
imageAltstring['']
imagePositiononeOf('top', 'left', 'right')
imageUrlstring
imageChildobject
If you require sending down a separate image, rather than a URL, send it down with imageChild. Be warned that while you retain the styling of the image's parent, you lose some of the flex styling already applied to an image when you send in imageUrl only.
imageSizeoneOf('sm', 'default')['default']
If sm is selected, the card's image will be smaller, and will not be reverted to the top of the card on small devices.
imageFitoneOf('contain', 'cover', 'none', 'fill', 'scale-down')['contain']
Overrides the default object-fit of 'contain'. For further information about this CSS property, refer to https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
imageFitPositionstring['center']
Overrides the default object-position of 'center'. For further information about this CSS property, refer to https://developer.mozilla.org/en-US/docs/Web/CSS/object-position Invalid strings will be ignored by the browser.
imageClassesstring
Optional class(es) that will be applied to the image. For example the horizontal width of the image can be specified by the consumer.
containerClassesstring
Optional class(es) that are applied to the top level element, which is the entirety of the card.
contentClassesstring
Optional class(es). Applies to the non-image portion of the content.
disableBoxShadowbool[false]
Allows card to be rendered without the card shadow.

<Card containerClasses='p4 mb4'>
  <Heading tagName='h2' size='md' className='mb2'>This is a card without any images</Heading>
  <p>This type of card can still have images, however it is not utilizing one of the predefined layouts for images (top, left, or right).</p>
</Card>

<Card containerClasses='p4 mb4'>
  <Heading tagName='h2' size='md' className='mb2'>This is a card without any images</Heading>
  <p>This type of card can still have images, however it is not utilizing one of the predefined layouts for images (top, left, or right).</p>
</Card>

<Card
  imagePosition='top'
  imageUrl='http://www.placehold.it/2000x220'
  contentClasses='p3 xl-p4'
  containerClasses='my5'
>
  <Heading tagName='h2' size='md' className='mb2'>This is a card with a top-aligned image</Heading>
  <p>It will have the image on top of the text at all breakpoints.</p>
</Card>

<Card
  imagePosition='top'
  imageUrl='http://www.placehold.it/2000x220'
  contentClasses='p3 xl-p4'
  containerClasses='my5'
>
  <Heading tagName='h2' size='md' className='mb2'>This is a card with a top-aligned image</Heading>
  <p>It will have the image on top of the text at all breakpoints.</p>
</Card>

<Card
  imagePosition='left'
  imageUrl='http://www.placehold.it/800x800'
  contentClasses='p3 xl-p4'
  containerClasses='mb4'
>
  <Heading tagName='h2' size='md' className='mb2'>This is a card with a left-aligned image</Heading>
  <p>It will revert to a top-aligned image in smaller viewports.</p>
</Card>

<Card
  imagePosition='left'
  imageUrl='http://www.placehold.it/800x800'
  contentClasses='p3 xl-p4'
  containerClasses='mb4'
>
  <Heading tagName='h2' size='md' className='mb2'>This is a card with a left-aligned image</Heading>
  <p>It will revert to a top-aligned image in smaller viewports.</p>
</Card>

<Card
  imagePosition='right'
  imageUrl='http://www.placehold.it/800x800'
  contentClasses='p3 xl-p4'
  containerClasses='mb4'
>
  <Heading tagName='h2' size='md' className='mb2'>This is a card with a right-aligned image</Heading>
  <p>It will revert to a top-aligned image in smaller viewports.</p>
</Card>

<Card
  imagePosition='right'
  imageUrl='http://www.placehold.it/800x800'
  contentClasses='p3 xl-p4'
  containerClasses='mb4'
>
  <Heading tagName='h2' size='md' className='mb2'>This is a card with a right-aligned image</Heading>
  <p>It will revert to a top-aligned image in smaller viewports.</p>
</Card>

<Card
  imagePosition='left'
  imageChild={<img style={{ border: '#00a862 3px dotted', minWidth: '100px'}} src='http://www.placehold.it/800x800' />}
  contentClasses='p3 xl-p4'
  containerClasses='my2'
  imageClasses='flex items-center justify-center'
>
  <Heading tagName='h2' size='sm' className='mb2'>This is a card with a component sent through as an image, instead of an imageUrl</Heading>
  <p>You must create your own styling to the image you send in.</p>
</Card>

<Card
  imagePosition='left'
  imageChild={<img style={{ border: '#00a862 3px dotted', minWidth: '100px'}} src='http://www.placehold.it/800x800' />}
  contentClasses='p3 xl-p4'
  containerClasses='my2'
  imageClasses='flex items-center justify-center'
>
  <Heading tagName='h2' size='sm' className='mb2'>This is a card with a component sent through as an image, instead of an imageUrl</Heading>
  <p>You must create your own styling to the image you send in.</p>
</Card>

<Card
  imagePosition='left'
  imageUrl='http://www.placehold.it/800x800'
  contentClasses='p3 xl-p4'
  containerClasses='mb4'
  imageSize='sm'
  imageFit='cover'
>
  <Heading tagName='h2' size='sm' className='mb2'>This is a card with an image that stays smaller, and left or right aligned on all devices</Heading>
</Card>

<Card
  imagePosition='left'
  imageUrl='http://www.placehold.it/800x800'
  contentClasses='p3 xl-p4'
  containerClasses='mb4'
  imageSize='sm'
  imageFit='cover'
>
  <Heading tagName='h2' size='sm' className='mb2'>This is a card with an image that stays smaller, and left or right aligned on all devices</Heading>
</Card>