# Card

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

# Default

Add a card with the vs-card component for the structure of this component we have several slots

title
text
buttons
interactions
img

Trendy clothing

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Code copied

# Type 2

Completely change the style of the letter with the property type and the value2

Change destiny

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Code copied

# Type 3

Completely change the style of the letter with the property type and the value3

Live a life of madness

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Code copied

# Type 4

Completely change the style of the letter with the type property and the value4

Art paintings

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Code copied

# Type 5

Change the style of the letter completely with the type property and the value5

Sand to today's time

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Code copied

# Group

To have a group of scrolling cards you can use the vs-card-group component

Pot with a plant

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Pot with a plant

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Pot with a plant

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Pot with a plant

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Pot with a plant

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Pot with a plant

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Code copied

# API

props

Property Type Values Description default Example More

type String 12345 Change the style of the letter and the position of the internals. Usage Open Close

<vs-card type="2">
  <template #title>
    <h3>Pot with a plant</h3>
  </template>
  <template #img>
    <img src="/foto6.png" alt="">
  </template>
  <template #text>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    </p>
  </template>
  <template #interactions>
    <vs-button danger icon>
      <i class='bx bx-heart'></i>
    </vs-button>
    <vs-button class="btn-chat" shadow primary>
      <i class='bx bx-chat' ></i>
      <span class="span">
        54
      </span>
    </vs-button>
  </template>
</vs-card>

slots

Property	Type	Values	Description	default	Example	More
text	slot		Add text to the card in the section determined by the card type.		Usage Open Close
`<template #text> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> </template>`
title	slot		Add the title to the card in the section determined by the type of card.		Usage Open Close
`<template #title> <h3>Pot with a plant</h3> </template>`
buttons	slot		Add the buttons to the card in the section determined by the type of card.		Usage Open Close
`<template #buttons> <vs-button class="btn-chat" shadow primary> <i class='bx bx-chat' ></i> <span class="span"> 54 </span> </vs-button> </template>`
interactions	slot		Add the interactions to the card in the section determined by the card type.		Usage Open Close
`<template #interactions> <vs-button danger icon> <i class='bx bx-heart'></i> </vs-button> <vs-button class="btn-chat" shadow primary> <i class='bx bx-chat' ></i> <span class="span"> 54 </span> </vs-button> </template>`
img	slot		Add the image or video to the card in the section determined by the type of card.		Usage Open Close
<template #img> <img :src="`/foto5.png`" alt=""> </template>