Card

Cards contain content and actions about a single subject.

Default

To add a card we have the components vs-card, vs-card-header, vs-card-body, vs-card-media, vs-card-actions each one has its functionality inside of the card but an initial structure would be like this:

Default Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Color

You can change the overall color of the card with property vs-color and vs-background-color for the component vs-card-header. You can make the color fill with vs-fill.

TIP

Vuesax use the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page.

error
A nice title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
warning
Another nice title
A nice subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Image

You can add a cool image to the card, even changing the orders of the components to fit your needs!

check
A nice title
A nice subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
check
A nice title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Actions

A space for action buttons in the card

account_circle
A nice title
A nice subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

API #

NameTypeParametersDescriptiondefault
vs-colorStringRGB, HEX, primary, success, danger, warning, darkComponent colorprimary
vs-titleStringHeader title
vs-subtitleStringHeader subtitle
vs-fillBooleanHeader filled with colorfalse
vs-iconStringHeader material icon
vs-backgroundStringHeader background colorprimary
vs-mediaStringMedia image src