React Card Component API

Card API

Explore the API reference for the React Card component and discover how to effectively utilize its props for customization.

On this page

jsx

import { CCard } from '@coreui/react-pro'

Property	Default	Type
className	-	`string`
A string of all className you want applied to the base component.
color	-	`'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'inverse'`, `string`
Sets the color context of the component to one of CoreUI’s themed colors.
layout6.0.0+	-	`'row'`
Specify a layout type.
textBgColor5.0.0+	-	`'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'inverse'`, `string`
Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
theme6.0.0+	-	`'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'inverse'`, `string`
Paints the card's frame and caps with one of CoreUI’s themed colors. The body keeps the card background — put the class on a single section to theme only that section.
translucent6.0.0+	-	`boolean`
Let the background through the card and blur it.
variant6.0.0+	-	`'subtle'`
Set the card variant. The default is solid.

jsx

import { CCardBody } from '@coreui/react-pro'

Property	Default	Type
className	-	`string`
A string of all className you want applied to the base component.

jsx

import { CCardFooter } from '@coreui/react-pro'

Property	Default	Type
className	-	`string`
A string of all className you want applied to the base component.

jsx

import { CCardGroup } from '@coreui/react-pro'

Property	Default	Type
className	-	`string`
A string of all className you want applied to the base component.

jsx

import { CCardHeader } from '@coreui/react-pro'

Property	Default	Type
as	`div`	`(ElementType & 'symbol') \| (ElementType & 'object') \| (ElementType & 'div') \| (ElementType & 'slot') \| (ElementType & 'style') \| ... 175 more ...`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`
A string of all className you want applied to the base component.

jsx

import { CCardImage } from '@coreui/react-pro'

Property	Default	Type
as	`img`	`(ElementType & 'symbol') \| (ElementType & 'object') \| (ElementType & 'img') \| (ElementType & 'slot') \| (ElementType & 'style') \| ... 175 more ...`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`
A string of all className you want applied to the base component.
orientation	-	`'top'`, `'bottom'`, `'start'`, `'end'`
Optionally orientate the image to the top, bottom, or — in a `layout="row"` card — to the start or end.

jsx

import { CCardImageOverlay } from '@coreui/react-pro'

Property	Default	Type
className	-	`string`
A string of all className you want applied to the base component.

jsx

import { CCardSubtitle } from '@coreui/react-pro'

Property	Default	Type
as	`h6`	`(ElementType & 'symbol') \| (ElementType & 'object') \| (ElementType & 'h6') \| (ElementType & 'slot') \| (ElementType & 'style') \| ... 175 more ...`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`
A string of all className you want applied to the component.

jsx

import { CCardText } from '@coreui/react-pro'

Property	Default	Type
as	`p`	`(ElementType & 'symbol') \| (ElementType & 'object') \| (ElementType & 'p') \| (ElementType & 'slot') \| (ElementType & 'style') \| ... 175 more ...`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`
A string of all className you want applied to the component.

jsx

import { CCardTitle } from '@coreui/react-pro'

Property	Default	Type
as	`h5`	`(ElementType & 'symbol') \| (ElementType & 'object') \| (ElementType & 'h5') \| (ElementType & 'slot') \| (ElementType & 'style') \| ... 175 more ...`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`
A string of all className you want applied to the component.