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.
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# | div | (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# | img | (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# | h6 | (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# | p | (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# | h5 | (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. | ||