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`, `undefined`
A string of all className you want applied to the base component.
color	-	`{'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| 'primary-gradient' \| 'secondary-gradient' \| 'success-gradient' \| 'danger-gradient' \| 'warning-gradient' \| 'info-gradient' \| 'dark-gradient' \| 'light-gradient' \| string }`
Sets the color context of the component to one of CoreUI’s themed colors.
textBgColor5.0.0+	-	`'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `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.
textColor	-	`'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `'primary-emphasis'`, `'secondary-emphasis'`, `'success-emphasis'`, `'danger-emphasis'`, `'warning-emphasis'`, `'info-emphasis'`, `'light-emphasis'`, `'body'`, `'body-emphasis'`, `'body-secondary'`, `'body-tertiary'`, `'black'`, `'black-50'`, `'white'`, `'white-50'`, `string`
Sets the text color context of the component to one of CoreUI’s themed colors.

jsx

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

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

jsx

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

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

jsx

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

Property	Default	Type
className	-	`string`, `undefined`
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 ...`, `undefined`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`, `undefined`
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 ...`, `undefined`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`, `undefined`
A string of all className you want applied to the base component.
orientation	-	`'top'`, `'bottom'`, `undefined`
Optionally orientate the image to the top, bottom, or make it overlaid across the card.

jsx

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

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

jsx

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

Property	Default	Type
className	-	`string`, `undefined`
A string of all className you want applied to the base component.
href	-	`string`, `undefined`
The href attribute specifies the URL of the page the link goes to.

jsx

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

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