CardHeader

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

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

Note: Ensure padding is removed when using the CardHeader component.


import { Card, CardHeader } from '@krakentech/coral';
 
<Card padding="none" borderless>
    <CardHeader>Lorem ipsum dolor.</CardHeader>
</Card>

Lorem ipsum dolor.


<Card padding="none" borderless>
    <CardHeader title="Title" />
</Card>

Title


<Card padding="none" borderless>
    <CardHeader extra="Extra" />
</Card>

Extra


<Card padding="none" borderless>
    <CardHeader title="Title" extra="Extra" />
</Card>

Title

Extra

Full API

Name	Type	Default
`title`	`React.ReactNode` Content to output as the card title. This will appear on the left of the card header.
`extra`	`React.ReactNode` Content to output as the card extra information. This will appear on the right of the card header.
`children`	`React.ReactNode` Children to render.