Card

The card component is used to display related content and operations in a unified format.

Basic Usage

The most basic card component includes a title, content, and a bottom operation area.

Onionl-UI

Onionl-UI is a UI library for Vue 3🚀

FAILED

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex justify-center">
    <ol-card class="w-70">
      <ol-card-header>
        <div class="flex flex-col gap-2 dark:text-white">
          <h1 class="text-2xl font-bold m-0">
            Onionl-UI
          </h1>
          <p class="m-0 dark:text-coolGray-3">
            Onionl-UI is a UI library for Vue 3🚀
          </p>
        </div>
      </ol-card-header>
      <ol-card-content>
        <ol-image class="w-full h-auto" src="/logo2x.png" />
      </ol-card-content>
      <ol-card-footer>
        <ol-button size="sm" class="w-full">
          Confirm
        </ol-button>
      </ol-card-footer>
    </ol-card>
  </div>
</template>

Component Structure

The Card component consists of the following parts:

• <ol-card>: The container component of the card
• <ol-card-header>: The header area of the card
• <ol-card-content>: The main content area of the card
• <ol-card-footer>: The bottom area of the card