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.

This is a card without any images

This type of card can still have images, however it is not utilizing one of the predefined layouts for images (top, left, or right).

This is a card with a top-aligned image

It will have the image on top of the text at all breakpoints.

This is a card with a left-aligned image

It will revert to a top-aligned image in smaller viewports.

This is a card with a right-aligned image

It will revert to a top-aligned image in smaller viewports.

This is a card with a component sent through as an image, instead of an imageUrl

You must create your own styling to the image you send in.

This is a card with an image that stays smaller, and left or right aligned on all devices