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		`String`	-
append		`Boolean`	-
bordered		`Boolean`	`true`
color		`String`	`"background-secondary"`
disabled		`Boolean`	`false`
exact		`Boolean`	-
exactActiveClass		`String`	-
gradient		`Boolean`	`false`
href		`String`	`""`
outlined		`Boolean`	`false`
preset		`String`	-
replace		`Boolean`	-
square		`Boolean`	`false`
stripe		`Boolean`	`false`
stripeColor		`String`	`""`
tag		`String`	`"div"`
target		`String`	`""`
textColor		`String`	-
to		`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-element)
--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>.