Card

Integrate information in a card container.

Basic usage

Card includes header, body and footer.

Header

Body

Footer

Header

Body

Footer

---

<template>
  <div class="b-bg-neutral-1 p-6 rd-t-[6px] -m-4">
    <b-row>
      <b-col span="12" md="6">
        <b-card>
          <template #header>
            <h4>Header</h4>
          </template>
          <p>Body</p>
          <template #footer>
            <p>Footer</p>
          </template>
        </b-card>
      </b-col>
      <b-col span="12" md="6">
        <b-card bordered class="mt-4 md:mt-0">
          <template #header>
            <h4>Header</h4>
          </template>
          <p>Body</p>
          <template #footer>
            <p>Footer</p>
          </template>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>

Simple Card

The header and footer part can be omitted.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa corporis perspiciatis in iste veritatis blanditiis quo, quibusdam sed, delectus facere culpa maiores! Ipsum eligendi necessitatibus tempora! Inventore, pariatur harum? Minus.

---

<template>
  <div class="b-bg-neutral-1 p-6 rd-t-[6px] -m-4">
    <b-card>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa corporis
        perspiciatis in iste veritatis blanditiis quo, quibusdam sed, delectus
        facere culpa maiores! Ipsum eligendi necessitatibus tempora! Inventore,
        pariatur harum? Minus.
      </p>
    </b-card>
  </div>
</template>

Custom Content

Display richer content by adding some configs.

Title

Description

---

<template>
  <div class="b-bg-neutral-1 p-6 rd-t-[6px] -m-4">
    <b-card header-class="p-0 flex border-b-0">
      <template #header>
        <img
          class="h-[240px] w-full object-cover"
          src="https://unsplash.com/photos/29kL0bj5Fnc/download?ixid=MnwxMjA3fDB8MXxhbGx8Mnx8fHx8fDJ8fDE2NTc3MTE4MjE&force=true&w=1920"
        />
      </template>

      <div class="flex items-center justify-between">
        <div>
          <h4>Title</h4>
          <p class="text-size-md c-neutral-6">Description</p>
        </div>
        <b-icon :size="20">
          <arrow-right />
        </b-icon>
      </div>
    </b-card>
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from '@bigin/icons-vue'
</script>

Shadow

You can define when to show the card shadows

No shadow

Body content

Shadow when hover

Body content

Level 2 shadow

Body content

Level 3 shadow

Body content

---

<template>
  <div class="b-bg-neutral-1 p-6 rd-t-[6px] -m-4">
    <b-row>
      <b-col :md="6">
        <b-card shadow="never" class="mt-4 md:mt-0">
          <h4>No shadow</h4>
          <p class="c-neutral-6 mt-2">Body content</p>
        </b-card>
      </b-col>
      <b-col :md="6">
        <b-card shadow="hover" class="mt-4 md:mt-0">
          <h4>Shadow when hover</h4>
          <p class="c-neutral-6 mt-2">Body content</p>
        </b-card>
      </b-col>
      <b-col :md="6">
        <b-card shadow="lv2" class="mt-4">
          <h4>Level 2 shadow</h4>
          <p class="c-neutral-6 mt-2">Body content</p>
        </b-card>
      </b-col>
      <b-col :md="6">
        <b-card shadow="lv3" class="mt-4">
          <h4>Level 3 shadow</h4>
          <p class="c-neutral-6 mt-2">Body content</p>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>

Attributes

Attribute	Description	Type	Accepted Values	Default
body-class	CSS class of body	string	—	—
header-class	CSS class of header	string	—	—
footer-class	CSS class of footer	string	—	—
shadow	when to show card shadows	string	lv1 / lv2 / lv3 / hover / never	lv1
bordered	enable border	boolean	—	false

Slots

Name	Description
—	customize default content
header	customize header content
footer	customize footer content