We just released Vuestic Admin 3.0 🤗
🔥🔥🔥 Hire us

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.
Open in GitHub

Color and gradient
#

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open in GitHub

Tag
#

Changed tag to <b>

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open in GitHub

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.
Open in GitHub

Disabled
#

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open in GitHub

Card as link
#

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open in GitHub

Stripe
#

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open in GitHub

Image
#

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open in GitHub

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.
Open in GitHub

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
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
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

-

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

-

Events #

NameDescription

click

On click.. The event argument is:

Event

Css Variables #

NameDefault 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

Change log #

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>.