React Card Component API
Card API
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
Explore the API reference for the React Card component and discover how to effectively utilize its props for customization.
CCard#
import { CCard } from '@coreui/react'// orimport CCard from '@coreui/react/src/components/card/CCard'| Property | Default | Type |
|---|---|---|
| className# | - | string |
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. | ||
| textBgColor#5.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. | ||
CCardBody#
import { CCardBody } from '@coreui/react'// orimport CCardBody from '@coreui/react/src/components/card/CCardBody'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
CCardFooter#
import { CCardFooter } from '@coreui/react'// orimport CCardFooter from '@coreui/react/src/components/card/CCardFooter'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
CCardGroup#
import { CCardGroup } from '@coreui/react'// orimport CCardGroup from '@coreui/react/src/components/card/CCardGroup'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
CCardHeader#
import { CCardHeader } from '@coreui/react'// orimport CCardHeader from '@coreui/react/src/components/card/CCardHeader'| Property | Default | Type |
|---|---|---|
| as# | - | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'div'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent<...>) |
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. | ||
CCardImage#
import { CCardImage } from '@coreui/react'// orimport CCardImage from '@coreui/react/src/components/card/CCardImage'| Property | Default | Type |
|---|---|---|
| as# | - | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'img'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent<...>) |
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' |
Optionally orientate the image to the top, bottom, or make it overlaid across the card. | ||
CCardImageOverlay#
import { CCardImageOverlay } from '@coreui/react'// orimport CCardImageOverlay from '@coreui/react/src/components/card/CCardImageOverlay'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
CCardLink#
import { CCardLink } from '@coreui/react'// orimport CCardLink from '@coreui/react/src/components/card/CCardLink'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
| href# | - | string |
The href attribute specifies the URL of the page the link goes to. | ||
CCardSubtitle#
import { CCardSubtitle } from '@coreui/react'// orimport CCardSubtitle from '@coreui/react/src/components/card/CCardSubtitle'| Property | Default | Type |
|---|---|---|
| as# | - | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'h6'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent<...>) |
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. | ||
CCardText#
import { CCardText } from '@coreui/react'// orimport CCardText from '@coreui/react/src/components/card/CCardText'| Property | Default | Type |
|---|---|---|
| as# | - | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'p'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent<...>) |
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. | ||
CCardTitle#
import { CCardTitle } from '@coreui/react'// orimport CCardTitle from '@coreui/react/src/components/card/CCardTitle'| Property | Default | Type |
|---|---|---|
| as# | - | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'h5'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent<...>) |
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. | ||