CardBody

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

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

Please note if you decide to use CardBody in conjuction with CardHeader or CardImage, you’ll need to set the padding of Card to none and add padding individually to CardBody.

Basic Usage


import { Card, CardBody } from '@krakentech/coral';
 
<Card>
    <CardBody>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio,
        voluptate sapiente quia molestiae ratione perspiciatis nihil, odit nemo
        illo veritatis possimus sint, corrupti labore harum fugiat tenetur.
        Optio, dolore voluptas! Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Optio, voluptate sapiente quia molestiae ratione
        perspiciatis nihil, odit nemo illo veritatis possimus sint, corrupti
        labore harum fugiat tenetur. Optio, dolore voluptas!
    </CardBody>
</Card>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, voluptate sapiente quia molestiae ratione perspiciatis nihil, odit nemo illo veritatis possimus sint, corrupti labore harum fugiat tenetur. Optio, dolore voluptas! Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, voluptate sapiente quia molestiae ratione perspiciatis nihil, odit nemo illo veritatis possimus sint, corrupti labore harum fugiat tenetur. Optio, dolore voluptas!

Properties

height


<Card>
    <CardBody height={110}>
        <Stack flexDirection="column">
            <Typography>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio,
                voluptate sapiente quia molestiae ratione perspiciatis nihil,
                odit nemo illo veritatis possimus sint, corrupti labore harum
                fugiat tenetur. Optio, dolore voluptas! Lorem ipsum dolor sit
                amet consectetur adipisicing elit. Optio, voluptate sapiente
                quia molestiae ratione perspiciatis nihil, odit nemo illo
                veritatis possimus sint, corrupti labore harum fugiat tenetur.
                Optio, dolore voluptas!
            </Typography>
            <Typography>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio,
                voluptate sapiente quia molestiae ratione perspiciatis nihil,
                odit nemo illo veritatis possimus sint, corrupti labore harum
                fugiat tenetur. Optio, dolore voluptas! Lorem ipsum dolor sit
                amet consectetur adipisicing elit. Optio, voluptate sapiente
                quia molestiae ratione perspiciatis nihil, odit nemo illo
                veritatis possimus sint, corrupti labore harum fugiat tenetur.
                Optio, dolore voluptas!
            </Typography>
            <Typography>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio,
                voluptate sapiente quia molestiae ratione perspiciatis nihil,
                odit nemo illo veritatis possimus sint, corrupti labore harum
                fugiat tenetur. Optio, dolore voluptas! Lorem ipsum dolor sit
                amet consectetur adipisicing elit. Optio, voluptate sapiente
                quia molestiae ratione perspiciatis nihil, odit nemo illo
                veritatis possimus sint, corrupti labore harum fugiat tenetur.
                Optio, dolore voluptas!
            </Typography>
        </Stack>
    </CardBody>
</Card>

padding

Notice that if you want to set your own padding on the CardBody, you can do so by using the padding prop on the CardBody and removing padding from the parent Card.


<Card padding="none">
    <CardBody padding="large">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio,
        voluptate sapiente quia molestiae ratione perspiciatis nihil, odit nemo
        illo veritatis possimus sint, corrupti labore harum fugiat tenetur.
        Optio, dolore voluptas! Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Optio, voluptate sapiente quia molestiae ratione
        perspiciatis nihil, odit nemo illo veritatis possimus sint, corrupti
        labore harum fugiat tenetur. Optio, dolore voluptas!
    </CardBody>
</Card>

Full API

Name	Type	Default
`children`	`React.ReactNode` Children to render.
`padding`	`ResponsiveVariant<"none" \| "xsmall" \| "small" \| "medium" \| "large">` Amount of padding.
`height`	`ResponsiveVariant<number>` The fixed height of the body of the card. Makes the body scrollable if the content is too long. If fullHeight is specified, this will be ignored. Must be used in conjuction with the CardBody sub-component.