VCard API

Props

name	type	default
`append-avatar`	string	undefined
Appends a v-avatar component after default content in the append slot.
`append-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Creates a v-icon component after default content in the append slot.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Removes the ability to click or target the component.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`exact`	boolean	false
Exactly match the link. Without this, ‘/’ will match every route. You can find more information about the exact prop on the vue-router documentation.
`flat`	boolean	false
Removes the card’s elevation.
`height`	string \| number	undefined
Sets the height for the component.
`hover`	boolean	false
Applies 3dp (level 2) of elevation when hovered (default 1dp). You can find more information on the elevation page.
`href`	string	undefined
Designates the component as anchor and applies the href attribute.
`image`	string	undefined
Apply a specific background image to the component.
`link`	boolean	undefined
Designates that the component is a link. This is automatic when using the href or to prop.
`loading`	string \| boolean	false
Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color.
`location`	Anchor	undefined
Specifies the component’s location. Can combine by using a space separated string.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`position`	'fixed' \| 'static' \| 'relative' \| 'absolute' \| 'sticky'	undefined
Sets the position for the component.
`prepend-avatar`	string	undefined
Prepends a v-avatar component in the prepend slot before default content.
`prepend-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Prepends a v-icon component to the header.
`replace`	boolean	false
Setting replace prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the replace prop on the vue-router documentation.
`ripple`	boolean \| { class: string; keys: string[] }	true
Applies the v-ripple directive.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`subtitle`	string \| number \| boolean	undefined
Specify a subtitle text for the component.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`text`	string \| number \| boolean	undefined
Specify content text for the component.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`title`	string \| number \| boolean	undefined
Specify a title text for the component.
`to`	string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric	undefined
Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.
`variant`	'text' \| 'flat' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'elevated'
Applies a distinct style to the component.
`width`	string \| number	undefined
Sets the width for the component.

Slots

never

never

never

never

never

{ color: string; isActive: boolean }

never

never

never

never

`actions`
The slot used for the card actions; located at the bottom of the card.
`append`
Adds an item inside the input and after input content.
`default`
The default Vue slot.
`image`
The slot used for the card image. This is used with the image prop.
`item`
Define a custom item appearance.
`loader`
Slot for custom loader (displayed when loading prop is equal to true).
`prepend`
Adds an item outside the input and before input content.
`subtitle`
Slot for the component’s subtitle content.
`text`
Slot for the component’s text content.
`title`
Slot for the component’s title content.

SASS Variables

name	default
`$button-card-actions-margin`	.5rem
`$card-actions-flex`	none
`$card-actions-min-height`	52px
`$card-actions-padding`	.5rem
`$card-append-padding-inline-start`	.5rem
`$card-avatar-align-self`	flex-start
`$card-avatar-header-padding`	0
`$card-avatar-padding`	.5rem 1rem
`$card-background`	rgb(var(--v-theme-surface))
`$card-border`	( $card-border-color, $card-border-style, $card-border-width, $card-border-thin-width )
`$card-border-color`	settings.$border-color-root
`$card-border-radius`	settings.$border-radius-root
`$card-border-style`	settings.$border-style-root
`$card-border-thin-width`	thin
`$card-border-width`	0
`$card-color`	tools.theme-color('on-surface', var(--v-high-emphasis-opacity))
`$card-disabled-opacity`	0.6
`$card-elevation`	1
`$card-header-flex`	none
`$card-hover-elevation`	3
`$card-img-flex`	1 1 auto
`$card-item-align-items`	center
`$card-item-padding`	.625rem 1rem
`$card-loader-bottom`	auto
`$card-loader-top`	0
`$card-overflow-wrap`	break-word
`$card-padding`	0
`$card-plain-opacity`	.62
`$card-positions`	absolute fixed
`$card-prepend-padding-inline-end`	.5rem
`$card-subtitle-color`	tools.theme-color('on-surface', var(--v-medium-emphasis-opacity))
`$card-subtitle-comfortable-line-height`	1.125rem
`$card-subtitle-compact-line-height`	1rem
`$card-subtitle-density-line-height`	map.merge(( null: $card-subtitle-line-height, 'comfortable': $card-subtitle-comfortable-line-height, 'compact': $card-subtitle-compact-line-height ), $card-subtitle-density-line-height)
`$card-subtitle-flex`	none
`$card-subtitle-font-size`	tools.map-deep-get(settings.$typography, 'body-medium', 'size')
`$card-subtitle-font-weight`	tools.map-deep-get(settings.$typography, 'body-medium', 'weight')
`$card-subtitle-header-padding`	0 0 .25rem
`$card-subtitle-letter-spacing`	tools.map-deep-get(settings.$typography, 'body-medium', 'letter-spacing')
`$card-subtitle-line-height`	tools.map-deep-get(settings.$typography, 'body-medium', 'line-height')
`$card-subtitle-opacity`	var(--v-card-subtitle-opacity, var(--v-medium-emphasis-opacity))
`$card-subtitle-overflow`	hidden
`$card-subtitle-padding`	0 1rem
`$card-subtitle-text-overflow`	ellipsis
`$card-subtitle-text-transform`	none
`$card-subtitle-white-space`	nowrap
`$card-text-comfortable-line-height`	1.2rem
`$card-text-compact-line-height`	1.15rem
`$card-text-density-line-height`	map.merge(( null: $card-text-line-height, 'comfortable': $card-text-comfortable-line-height, 'compact': $card-text-compact-line-height ), $card-text-density-line-height)
`$card-text-flex`	1 1 auto
`$card-text-font-size`	tools.map-deep-get(settings.$typography, 'body-medium', 'size')
`$card-text-font-weight`	tools.map-deep-get(settings.$typography, 'body-medium', 'weight')
`$card-text-letter-spacing`	tools.map-deep-get(settings.$typography, 'body-medium', 'letter-spacing')
`$card-text-line-height`	tools.map-deep-get(settings.$typography, 'body-medium', 'line-height')
`$card-text-opacity`	var(--v-card-text-opacity, 1)
`$card-text-padding`	1rem
`$card-text-padding-bottom`	1rem
`$card-text-text-transform`	none
`$card-title-comfortable-line-height`	1.75rem
`$card-title-compact-line-height`	1.55rem
`$card-title-densities`	map.merge(( null: $card-title-line-height, 'comfortable': $card-title-comfortable-line-height, 'compact': $card-title-compact-line-height ), $card-title-densities)
`$card-title-flex`	none
`$card-title-font-size`	tools.map-deep-get(settings.$typography, 'title-large', 'size')
`$card-title-font-weight`	tools.map-deep-get(settings.$typography, 'title-large', 'weight')
`$card-title-header-padding`	0
`$card-title-hyphens`	auto
`$card-title-letter-spacing`	tools.map-deep-get(settings.$typography, 'title-large', 'letter-spacing')
`$card-title-line-height`	tools.map-deep-get(settings.$typography, 'title-large', 'line-height')
`$card-title-overflow`	hidden
`$card-title-overflow-wrap`	normal
`$card-title-padding`	.5rem 1rem
`$card-title-padding-top`	1rem
`$card-title-text-overflow`	ellipsis
`$card-title-text-transform`	none
`$card-title-white-space`	nowrap
`$card-title-word-break`	normal
`$card-title-word-wrap`	break-word
`$card-transition-duration`	0.28s
`$card-transition-property`	box-shadow, opacity, background, --v-elevation-overlay
`$card-transition-timing-function`	settings.$standard-easing
`$card-variants`	( $card-background, $card-color, $card-elevation, $card-plain-opacity, 'v-card' )

#VCard API

VCard API