Card UPDATED

Cards are used to group and display content in a way that is easily readable.

Basic usage

Card includes title, content and operations.

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

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.

<script setup lang='ts'>
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
</script>

<template>
  <o-card title="Title">
    {{ content }}
  </o-card>
</template>

<script setup lang='ts'>
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
</script>

<template>
  <o-card title="Title">
    {{ content }}
  </o-card>
</template>

Simple card

The Card only contains content.

<template>
  <o-card>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique
    maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.
  </o-card>
</template>

<template>
  <o-card>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique
    maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.
  </o-card>
</template>

Only title

The Card only contains title.

Base Title

<template>
  <o-card title="Base Title" extra="More" />
</template>

<template>
  <o-card title="Base Title" extra="More" />
</template>

Divider

The Card can set divider attribute style.

Divider with shadow

Divider without shadow

<script setup lang='ts'>
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
</script>

<template>
  <div f-c-c space-y-5>
    <o-card title="Divider with shadow" divider>
      {{ content }}
    </o-card>
    <o-card title="Divider without shadow" divider shadow="never">
      {{ content }}
    </o-card>
  </div>
</template>

<script setup lang='ts'>
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
</script>

<template>
  <div f-c-c space-y-5>
    <o-card title="Divider with shadow" divider>
      {{ content }}
    </o-card>
    <o-card title="Divider without shadow" divider shadow="never">
      {{ content }}
    </o-card>
  </div>
</template>

Shadow

You can define when to show the card shadows.

The shadow attribute determines when the card shadows are displayed. It can be always, hover or never.

Always

Hover

Never

<script setup lang='ts'>
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
</script>

<template>
  <div f-c-c space-y-5>
    <o-card title="Always" divider shadow="always">
      {{ content }}
    </o-card>
    <o-card title="Hover" divider shadow="hover">
      {{ content }}
    </o-card>
    <o-card title="Never" divider shadow="never">
      {{ content }}
    </o-card>
  </div>
</template>

<script setup lang='ts'>
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
</script>

<template>
  <div f-c-c space-y-5>
    <o-card title="Always" divider shadow="always">
      {{ content }}
    </o-card>
    <o-card title="Hover" divider shadow="hover">
      {{ content }}
    </o-card>
    <o-card title="Never" divider shadow="never">
      {{ content }}
    </o-card>
  </div>
</template>

Descriptions

You can set description attribute to define Card's description.

Has Description

This a description

<script setup lang="ts">
const description = 'This a description'
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
</script>

<template>
  <o-card title="Has Description" :description="description">
    {{ content }}
  </o-card>
</template>

<script setup lang="ts">
const description = 'This a description'
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
</script>

<template>
  <o-card title="Has Description" :description="description">
    {{ content }}
  </o-card>
</template>

Cover and Actions

You can set actions Slot to define Card Action Bar , also you can set cover prop to show Card's cover.

Title & Content

This a description

Title & Content

This a description

Breaking App

<script setup lang='ts'>
const cover1 = 'https://placeimg.com/400/225/arch'
const cover2 = 'https://raw.githubusercontent.com/imageList/imglist/master/img/20221104095918.png'
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
const description = 'This a description'
</script>

<template>
  <div fscw space-x-0 md:space-x-4>
    <o-card :cover="cover1" :description="description" title="Title & Content" :content="content" w-96>
      <template #actions>
        <o-button type="primary">
          TRY NOW!
        </o-button>
      </template>
    </o-card>
    <o-card :cover="cover2" :description="description" title="Title & Content" :content="content" w-96>
      <template #extra>
        <o-button size="xs" text>
          <template #icon>
            <o-icon name="i-carbon-share" />
          </template>
        </o-button>
      </template>
      <template #actions>
        <div fbc un-children="flex items-center gap-2">
          <div>
            <O-Avatar size="xs" :src="cover2" />
            <span class="dark:c-darkText">Breaking App</span>
          </div>
          <div>
            <o-button type="secondary">
              GET APP
            </o-button>
          </div>
        </div>
      </template>
    </o-card>
  </div>
</template>

<script setup lang='ts'>
const cover1 = 'https://placeimg.com/400/225/arch'
const cover2 = 'https://raw.githubusercontent.com/imageList/imglist/master/img/20221104095918.png'
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
const description = 'This a description'
</script>

<template>
  <div fscw space-x-0 md:space-x-4>
    <o-card :cover="cover1" :description="description" title="Title & Content" :content="content" w-96>
      <template #actions>
        <o-button type="primary">
          TRY NOW!
        </o-button>
      </template>
    </o-card>
    <o-card :cover="cover2" :description="description" title="Title & Content" :content="content" w-96>
      <template #extra>
        <o-button size="xs" text>
          <template #icon>
            <o-icon name="i-carbon-share" />
          </template>
        </o-button>
      </template>
      <template #actions>
        <div fbc un-children="flex items-center gap-2">
          <div>
            <O-Avatar size="xs" :src="cover2" />
            <span class="dark:c-darkText">Breaking App</span>
          </div>
          <div>
            <o-button type="secondary">
              GET APP
            </o-button>
          </div>
        </div>
      </template>
    </o-card>
  </div>
</template>

Embed style card

You can set embed attribute to define Card's embed style.

In light mode, sometimes you may need to make background a bit darker to distinguish card from white background.

Embed Style

<script setup lang='ts'>
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
</script>

<template>
  <o-card title="Embed Style" embed>
    {{ content }}
  </o-card>
</template>

<script setup lang='ts'>
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
</script>

<template>
  <o-card title="Embed Style" embed>
    {{ content }}
  </o-card>
</template>

Custome Actions

Custom Actions

User

<script setup lang='ts'>
const cover = 'https://images.unsplash.com/photo-1660554042520-db71c7fea8d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60'
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
</script>

<template>
  <o-card title="Custom Actions" :content="content">
    <template #actions>
      <div fbc un-children="flex items-center gap-2">
        <div>
          <O-Avatar size="xs" :src="cover" />
          <span class="dark:c-darkText">User</span>
        </div>
        <div gap-4>
          <div o-primary>
            <o-icon cursor-pointer name="i-carbon-star" />
          </div>
          <div o-info>
            <o-icon cursor-pointer name="i-carbon-share" />
          </div>
          <div o-warning>
            <o-icon cursor-pointer name="i-carbon-face-wink-filled" />
          </div>
        </div>
      </div>
    </template>
  </o-card>
</template>

<script setup lang='ts'>
const cover = 'https://images.unsplash.com/photo-1660554042520-db71c7fea8d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60'
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
</script>

<template>
  <o-card title="Custom Actions" :content="content">
    <template #actions>
      <div fbc un-children="flex items-center gap-2">
        <div>
          <O-Avatar size="xs" :src="cover" />
          <span class="dark:c-darkText">User</span>
        </div>
        <div gap-4>
          <div o-primary>
            <o-icon cursor-pointer name="i-carbon-star" />
          </div>
          <div o-info>
            <o-icon cursor-pointer name="i-carbon-share" />
          </div>
          <div o-warning>
            <o-icon cursor-pointer name="i-carbon-face-wink-filled" />
          </div>
        </div>
      </div>
    </template>
  </o-card>
</template>

comprehensive

Here is the fully defined form of the card exaples.

Title & Content

This a description

User

<script setup lang='ts'>
const cover = 'https://images.unsplash.com/photo-1660554042520-db71c7fea8d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60'
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
const description = 'This a description'
</script>

<template>
  <o-card
    divider
    hoverable
    :cover="cover"
    extra="More"
    :description="description"
    title="Title & Content"
    :content="content"
    w-100
  >
    <template #actions>
      <div fbc un-children="flex items-center gap-2">
        <div>
          <O-Avatar size="xs" :src="cover" />
          <span class="dark:c-darkText">User</span>
        </div>
        <div gap-4>
          <div o-primary>
            <o-icon cursor-pointer name="i-carbon-star" />
          </div>
          <div o-info>
            <o-icon cursor-pointer name="i-carbon-share" />
          </div>
          <div o-warning>
            <o-icon cursor-pointer name="i-carbon-face-wink-filled" />
          </div>
        </div>
      </div>
    </template>
  </o-card>
</template>

<script setup lang='ts'>
const cover = 'https://images.unsplash.com/photo-1660554042520-db71c7fea8d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60'
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias incidunt iusto, veritatis modi perferendis similique maiores cumque ipsam doloremque natus assumenda, obcaecati id voluptatibus, eum et rerum aut vero suscipit.'
const description = 'This a description'
</script>

<template>
  <o-card
    divider
    hoverable
    :cover="cover"
    extra="More"
    :description="description"
    title="Title & Content"
    :content="content"
    w-100
  >
    <template #actions>
      <div fbc un-children="flex items-center gap-2">
        <div>
          <O-Avatar size="xs" :src="cover" />
          <span class="dark:c-darkText">User</span>
        </div>
        <div gap-4>
          <div o-primary>
            <o-icon cursor-pointer name="i-carbon-star" />
          </div>
          <div o-info>
            <o-icon cursor-pointer name="i-carbon-share" />
          </div>
          <div o-warning>
            <o-icon cursor-pointer name="i-carbon-face-wink-filled" />
          </div>
        </div>
      </div>
    </template>
  </o-card>
</template>

Card Props

Name	Type	Default	Description
title	`string`	`undefined`	Card title.
description	`string`	`undefined`	Card description.
content	`string`	`undefined`	Card content.
cover	`string`	`undefined`	Card header's cover.
size	`'sm' \| 'md'`	`'md'`	Size of the card.
shadow	`'always' \| 'hover'`	`never`	When to show card's shadow
divider	`boolean`	`false`	Whether show embed style card.
embed	`boolean`	`false`	Whether show Card divider.
header	`string` \| `VNode`	`undefined`	Customer card's header.
extra	`string` \| `VNode`	`undefined`	Customer card's header extra.
actions	`string` \| `VNode`	`undefined`	Customer card's actions bar.

Card Slots

Name	Parameters	Description
default	`()`	Customize default content.
header	`()`	Customize content of the Card header.
extra	`()`	Customize content of the Card extra.
actions	`()`	Customize content of the Card actions.

Card UPDATED #

Basic usage #

Title

Simple card #

Only title #

Base Title

Divider #

Divider with shadow

Divider without shadow

Shadow #

Always

Hover

Never

Descriptions #

Has Description

Cover and Actions #

Title & Content

Title & Content

Embed style card #

Embed Style

Custome Actions #

Custom Actions

comprehensive #

Title & Content

Card Props #

Card Slots #

Card UPDATED

Basic usage

Simple card

Only title

Divider

Shadow

Descriptions

Cover and Actions

Embed style card

Custome Actions

comprehensive

Card Props

Card Slots