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.
- imageLoaderProps
object
[{}]
Props that are passed to the
ImageLoader
component. Refer to the ImageLoader documentation for more details on these props.
<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>
<CardimagePosition='top'imageUrl='https://via.placeholder.com/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>
<CardimagePosition='left'imageUrl='https://via.placeholder.com/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>
<CardimagePosition='right'imageUrl='https://via.placeholder.com/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>
<CardimagePosition='left'imageChild={<img style={{ border: '#00a862 3px dotted', minWidth: '100px'}} src='https://via.placeholder.com/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>
<CardimagePosition='left'imageUrl='https://via.placeholder.com/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>