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
- children
node
- imageAlt
string
['']
- imagePosition
oneOf('top', 'left', 'right')
- imageUrl
string
- imageChild
object
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 inimageUrl
only. - imageSize
oneOf('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.
- imageFit
oneOf('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
- imageFitPosition
string
['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.
- imageClasses
string
Optional class(es) that will be applied to the image. For example the horizontal width of the image can be specified by the consumer.
- containerClasses
string
Optional class(es) that are applied to the top level element, which is the entirety of the card.
- contentClasses
string
Optional class(es). Applies to the non-image portion of the content.
- disableBoxShadow
bool
[false]
Allows card to be rendered without the card shadow.