Card

Integrate information in a card container.

Basic usage

Card includes title, content and operations. Card is made up of header and body. header is optional, and its content distribution depends on a named slot.

Card content 1

Card content 2

Card content 3

Card content 4

Simple card

The header part can be omitted.

Card content 1

Card content 2

Card content 3

Card content 4

Effects

Card provide five different themes: outset、inset、bordered、outlined and flat. Using effect to change, default is outset.

Card content 1

Card content 2

Card content 3

Card content 4

Card content 1

Card content 2

Card content 3

Card content 4

Card content 1

Card content 2

Card content 3

Card content 4

Card content 1

Card content 2

Card content 3

Card content 4

<template>
  <tu-row :gutter="20">
    <tu-col :span="6">
      <tu-card title="Card name" effect="inset">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
    <tu-col :span="6">
      <tu-card title="Card name" effect="bordered">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
    <tu-col :span="6">
      <tu-card title="Card name" effect="outlined">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
    <tu-col :span="6">
      <tu-card title="Card name" effect="flat">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { Close } from '@tu-view-plus/icons-vue';
</script>

<template>
  <tu-row :gutter="20">
    <tu-col :span="6">
      <tu-card title="Card name" effect="inset">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
    <tu-col :span="6">
      <tu-card title="Card name" effect="bordered">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
    <tu-col :span="6">
      <tu-card title="Card name" effect="outlined">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
    <tu-col :span="6">
      <tu-card title="Card name" effect="flat">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { Close } from '@tu-view-plus/icons-vue';
</script>

With images

Display richer content by adding some configs.The body-style attribute defines CSS style of custom body. This example also uses tu-col for layout.

European Style Street

Sizes

Besides default size, tu-card component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.

Card content 1

Card content 2

Card content 3

Card content 4

Card content 1

Card content 2

Card content 3

Card content 4

Card content 1

Card content 2

Card content 3

Card content 4

Card content 1

Card content 2

Card content 3

Card content 4

<template>
  <tu-row :gutter="20">
    <tu-col :span="6">
      <tu-card title="Mini card" size="mini">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
    <tu-col :span="6">
      <tu-card title="Small card" size="small">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
    <tu-col :span="6">
      <tu-card title="Medium Card">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
    <tu-col :span="6">
      <tu-card title="Large Card" size="large">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { Close } from '@tu-view-plus/icons-vue';
</script>

<template>
  <tu-row :gutter="20">
    <tu-col :span="6">
      <tu-card title="Mini card" size="mini">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
    <tu-col :span="6">
      <tu-card title="Small card" size="small">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
    <tu-col :span="6">
      <tu-card title="Medium Card">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
    <tu-col :span="6">
      <tu-card title="Large Card" size="large">
        <template #extra>
          <tu-icon><Close /></tu-icon>
        </template>
        <div v-for="i in 4" :key="i">
          {{ 'Card content ' + i }}
        </div>
      </tu-card>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { Close } from '@tu-view-plus/icons-vue';
</script>

Card API

Card Attributes

Name	Description	Type	Default
title	Title of Card	`String`	-
extra	Content to render in the top-right corner of the card	`String`	-
body-style	The style of the Card body	`Object`	-
effect	Effect of Card	`String`	outset
size	Size of Card	`String`	medium

Card Slots

Name	Description
title	Title of Card
extra	Content to render in the top-right corner of the card
default	Customize default content

Card ​

Basic usage ​

Simple card ​

Effects ​

With images ​

Sizes ​

Card API ​

Card Attributes ​

Card Slots ​

Card

Basic usage

Simple card

Effects

With images

Sizes

Card API

Card Attributes

Card Slots