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'

Property	Default	Type
color	-	`Color`
Sets the color context of the component to one of CoreUI’s themed colors.
layout6.0.0+	-	`string`
Specify a layout type.
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.
theme6.0.0+	-	`Color`
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+	-	`string`
Set the card variant. The default is solid.

jsx

import { CCardBody } from '@coreui/vue'

jsx

import { CCardFooter } from '@coreui/vue'

jsx

import { CCardGroup } from '@coreui/vue'

jsx

import { CCardHeader } from '@coreui/vue'

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'

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, or — in a `layout="row"` card — to the start or end.

jsx

import { CCardImageOverlay } from '@coreui/vue'

jsx

import { CCardSubtitle } from '@coreui/vue'

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'

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'

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