Card
#

The va-card is a multipurpose representative component that can be used for anything from links to articles. It has some helper components to make markup easier.

Examples
#

Default
#

This is default va-card implementation using va-card-title, va-card-content and va-card-actions helper components.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Color and gradient
#

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tag
#

Changed tag to <b>

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Border, shadow and shape
#

square and outlined

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bordered false

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Disabled
#

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card as link
#

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Stripe
#

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image
#

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Horizontal
#

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Actions
#

The VaCardActions component is designed to apply margins and alignment to content (VaButtons expected).

Two properties can be passed: align (string, specify how to align actions) and vertical (boolean, display actions one below the other).

Valid values for align: left, center, right, between, around, stretch.

Between horizontal alignment

Stretch vertical alignment

API
#

Name	Description	Types	Default
activeClass	Applied when the link is active. More info here.	`String`	-
append	When set, always appends the relative path to the current path. More info here.	`Boolean`	-
bordered	Toggles borders of a card component.	`Boolean`	`true`
color	Color of the component (theme string or `HEX` string).	`String`	`"background-secondary"`
disabled	Applies `disabled` style and removes all user interaction effects.	`Boolean`	`false`
exact	Exactly match the link. Without this, '/' will match every route. More info here.	`Boolean`	-
exactActiveClass	Applied when the link is active with exact match. More info here.	`String`	-
gradient	Adds color gradient to `va-card` body.	`Boolean`	`false`
href	Designates the component as anchor and applies the href attribute. More info here.	`String`	`""`
outlined	Toggles shadow of `va-card`	`Boolean`	`false`
preset	Named preset combination of component props.	`String \| Array`	-
replace	When set, calls `router.replace()` instead of `router.push()` when navigated, so it will not leave a history record. More info here.	`Boolean`	-
square	Removes rounded corners.	`Boolean`	`false`
stripe	Displays a stripe above a card title.	`Boolean`	`false`
stripeColor	Customize stripe color (theme string or HEX string).	`String`	`""`
tag	Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases (`ul > li` and `tr > td` etc.).	`String`	`"div"`
target	Navigation target, More info here.	`String`	`""`
textColor	Text color (theme string or HEX string).	`String`	-
to	The target route of the link. More info here.	`String \| Object`	-

Name	Description
click	On click.. The event argument is: `Event`

Name	Default Value
--va-card-display	block
--va-card-position	relative
--va-card-overflow	visible
--va-card-box-shadow	var(--va-box-shadow)
--va-card-border-radius	0.375rem
--va-card-color	#34495e
--va-card-background-color	var(--va-background-secondary)
--va-card-padding	1.25rem
--va-card-outlined-border	3px solid var(--va-background-border)
--va-card-outlined-box-shadow	none
--va-card-stripe-border-size	var(--va-stripe-border-size)
--va-card-dark-color	#ffffff
--va-card-dark-background-color	#34495e
--va-card-actions-btn-margin	4px

FAQ
#

Can I use `va-card` without helper components?
#

Yes, if you don't like our styling preset, you are free to use your own.

Should I manually set tag if I use link attributes?
#

No, we will do it for you. If tag is not set, but href is, component tag will be <a>, if any of router-link prop is set, it will be <router-link>.