Card

BootstrapVue Cards Reference (opens new window)

Demo

Card Title

Card content

Infos here

Card Title

Card content

Infos here

Card Title

Card content

Infos here

Card Title

Card content

Infos here

Card Title

Card content

Infos here

Card Title

Card content

Infos here

Code

<template>
  <div>
    <b-row class="bui-card-container">
      <b-col
        v-for="i in 6"
        :key="i"
        sm="12"
        md="6"
        lg="6"
      >
        <b-card
          no-body
          class="bui-card-item"
        >
          <template #header>
            <b-card-title>Card Title</b-card-title>
          </template>

          <b-card-body> Card content</b-card-body>

          <b-card-footer>
            <b-button variant="secondary">
              Admin
            </b-button>
            <div class="card-footer-right">
              <span>Infos here</span>
              <b-dropdown
                no-caret
                left
                dropleft
                lazy
                variant="link"
                :popper-opts="{ positionFixed: true, eventsEnabled: true }"
                toggle-class="text-decoration-none p-0"
              >
                <template #button-content>
                  <bui-icon
                    name="three-dots-vertical"
                    :size="13"
                  />
                </template>

                <b-dropdown-item>
                  <bui-icon
                    name="gear"
                    :size="20"
                  />
                  <span> Manage </span>
                </b-dropdown-item>
                <b-dropdown-item>
                  <bui-icon
                    name="pencil"
                    :size="20"
                  />
                  <span> Rename </span>
                </b-dropdown-item>
                <b-dropdown-divider />
                <b-dropdown-item>
                  <bui-icon
                    name="trash"
                    :size="20"
                  />
                  <span> Delete </span>
                </b-dropdown-item>
              </b-dropdown>
            </div>
          </b-card-footer>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>

Accordion Style

Demo

Site Manage

Hello!

Code

<template>
  <b-card
    no-body
    class="bui-card-collapse site-details-content"
  >
    <b-card-header
      v-b-toggle.collapse-1
      class="justify-content-between"
    >
      Site Manage
      <div class="d-flex align-items-center">
        <b-button
          variant="success"
          @click.stop
        >
          <bui-icon
            name="save"
            variant="white"
            size="18"
          />
          Save
        </b-button>
        <bui-icon
          name="arrow-right"
          :rotate="270"
          size="12"
          class="ml-ltr-3 mr-rtl-3"
        />
      </div>
    </b-card-header>
    <b-collapse
      id="collapse-1"
      class="mt-2"
      visible
    >
      <b-card-body>
        <b-card-text>
          Hello!
        </b-card-text>
      </b-card-body>
      <b-card-footer class="justify-content-end">
        <b-button variant="success">
          <bui-icon
            name="save"
            variant="white"
            size="18"
          />
          Save
        </b-button>
      </b-card-footer>
    </b-collapse>
  </b-card>
</template>