HomeStarbucks Pattern Library



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.


  • 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

  • imageFitPositionstring['center']

    Overrides the default object-position of 'center'. For further information about this CSS property, refer to 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.