# 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

Agrega una carta con el componente vs-card para la estructura de este componente tenemos varios slots

title
text
buttons
interactions
img

Descripción

Trendy clothing

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Code copied

# type 2

Cambia por completo el estilo de la carta con la propiedad type y el valor 2

Change destiny

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Code copied

# type 3

Cambia por completo el estilo de la carta con la propiedad type y el valor 3

Live a life of madness

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Code copied

# type 4

Cambia por completo el estilo de la carta con la propiedad type y el valor 4

Art paintings

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Code copied

# type 5

Cambia por completo el estilo de la carta con la propiedad type y el valor 5

Sand to today's time

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Code copied

# group

Para tener un grupo de cartas con scroll puedes usar el componente vs-card-group

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 Cambia el estilo de la carta y la posision de los elementos internos. 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		agrega texto a la card en la sección determinada por el tipo de card.		Usage Open Close
`<template #text> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p> </template>`
title	slot		agrega el titulo a la card en la sección determinada por el tipo de card.		Usage Open Close
`<template #title> <h3>Pot with a plant</h3> </template>`
buttons	slot		agrega los botones a la card en la sección determinada por el tipo de 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		agrega las interacciones a la card en la sección determinada por el tipo de card.		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		agrega la imagen o video a la card en la sección determinada por el tipo de card.		Usage Open Close
<template #img> <img :src="`/foto5.png`" alt=""> </template>