Card

Default

Pass title and text for common text content. Use the named slots when custom markup is needed; slots take precedence over the matching props.

• title
• text
• buttons
• interactions
• img

Code copied

<template>
  <div class="center">
    <s-card
      title="Trendy clothing"
      text="Lorem ipsum dolor sit amet consectetur, adipisicing elit."
    >
      <template #img>
        <img :src="`/foto5.png`" alt="" />
      </template>
      <template #interactions>
        <s-button color="danger" icon>
          <s-icon  name="bx:heart" />
        </s-button>
        <s-button class="btn-chat" type="shadow">
          <s-icon  name="bx:chat" />
          <span class="span"> 54 </span>
        </s-button>
      </template>
    </s-card>
  </div>
</template>

<script lang="ts" setup></script>
<style lang="scss" scoped>

Type 2

Completely change the style of the letter with the property type and the value 2

Code copied

<template>
  <div class="center">
    <s-card type="2">
      <template #title>
        <h3>Change destiny</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>
        <s-button color="danger" icon>
          <s-icon  name="bx:heart" />
        </s-button>
        <s-button class="btn-chat" type="shadow">
          <s-icon  name="bx:chat" />
          <span class="span"> 54 </span>
        </s-button>
      </template>
    </s-card>
  </div>
</template>

Type 3

Completely change the style of the letter with the property type and the value 3

Code copied

<template>
  <div class="center">
    <s-card type="3">
      <template #title>
        <h3>Live a life of madness</h3>
      </template>
      <template #img>
        <img src="/foto1.png" alt="" />
      </template>
      <template #text>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
      </template>
      <template #interactions>
        <s-button color="danger" icon>
          <s-icon  name="bx:heart" />
        </s-button>
        <s-button class="btn-chat" type="shadow">
          <s-icon  name="bx:chat" />
          <span class="span"> 54 </span>
        </s-button>
      </template>
    </s-card>
  </div>
</template>

Type 4

Completely change the style of the letter with the type property and the value 4

Code copied

<template>
  <div class="center">
    <s-card type="4">
      <template #title>
        <h3>Art paintings</h3>
      </template>
      <template #img>
        <img src="/foto2.jpg" alt="" />
      </template>
      <template #text>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
      </template>
      <template #interactions>
        <s-button color="danger" icon>
          <s-icon  name="bx:heart" />
        </s-button>
        <s-button class="btn-chat" type="shadow">
          <s-icon  name="bx:chat" />
          <span class="span"> 54 </span>
        </s-button>
      </template>
    </s-card>
  </div>
</template>

Type 5

Change the style of the letter completely with the type property and the value 5

Code copied

<template>
  <div class="center">
    <s-card type="5">
      <template #title>
        <h3>Sand to today's time</h3>
      </template>
      <template #img>
        <img src="/foto13.png" alt="" />
      </template>
      <template #text>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
      </template>
      <template #interactions>
        <s-button color="danger" icon>
          <s-icon  name="bx:heart" />
        </s-button>
        <s-button class="btn-chat" type="shadow">
          <s-icon  name="bx:chat" />
          <span class="span"> 54 </span>
        </s-button>
      </template>
    </s-card>
  </div>
</template>

Group

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

Code copied

<template>
  <div class="center">
    <s-card-group>
      <s-card v-for="card in 6" :key="card" @click="handleClick">
        <template #title>
          <h3>Pot with a plant</h3>
        </template>
        <template #img>
          <img :src="`/foto${card}.png`" alt="" />
        </template>
        <template #text>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
        </template>
        <template #interactions>
          <s-button color="danger" icon>
            <s-icon  name="bx:heart" />
          </s-button>
          <s-button class="btn-chat" type="shadow">
            <s-icon  name="bx:chat" />
            <span class="span"> 54 </span>
          </s-button>
        </template>
      </s-card>
    </s-card-group>
  </div>
</template>

<script lang="ts" setup>
const handleClick = () => {
  // eslint-disable-next-line no-console
  console.log('click')
}

API