Vue Card Component API

Card API

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

On this page

jsx

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

Property	Default	Type
color	-	`Color`
Sets the color context of the component to one of CoreUI’s themed colors.
textBgColor5.0.0+	-	`Color`
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	-	`TextColor`
Sets the text color context of the component to one of CoreUI’s themed colors.

jsx

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

Property	Default	Type
as	`'div'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.

jsx

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

Property	Default	Type
as	`'img'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.
orientation	-	`string`
Optionally orientate the image to the top, bottom.

jsx

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

Property	Default	Type
as	`'h6'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.

jsx

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

Property	Default	Type
as	`'p'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.

jsx

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

Property	Default	Type
as	`'h5'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.