CardImage

CardImage is a sub-component that is used to define the placement of a child element within the Card component.

All docs for CardImage will use the Card component as a parent. This is to ensure that the CardImage is rendered correctly.

Basic Usage

CardImage can be used with either a ReactNode child, or you can use props to pass a background image to the element instead. Props are for background images only and will not affect the contained ReactNode.

Image element


import { Card, CardImage } from '@krakentech/coral';
 
<Card>
    <CardImage>
        <img
            src="https://octoenergy-production-media.s3.amazonaws.com/images/octopus-number-one-fan.width-1200.jpg"
            alt="Test"
        />
    </CardImage>
</Card>

Background image


import { Card, CardImage } from '@krakentech/coral';
 
<Card>
    <CardImage src="https://octoenergy-production-media.s3.amazonaws.com/images/octopus-number-one-fan.width-1200.jpg" />
</Card>

Responsiveness


<Card>
    <CardImage
        src="https://octoenergy-production-media.s3.amazonaws.com/images/octopus-number-one-fan.width-1200.jpg"
        backgroundPosition={{ base: 'center', sm: 'top', md: 'bottom' }}
    />
</Card>

Full API

Name	Type	Default
`src`	`string` String representing the URL of the image.
`height`	`ResponsiveVariant<number>` The height of the image.	`300px`
`backgroundPosition`	`ResponsiveVariant<"top" \| "bottom" \| "left" \| "right" \| "center">` The position of the image.	`center`
`children`	`React.ReactNode` Children to render.