Card
BootstrapVueNext's cards is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Card basic
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.
Card Title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<template>
<BCard
title="Card Title"
subtitle="Card subtitle"
:img-src="placeholderImg"
img-alt="Card image cap"
img-top
>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
<BButton href="#" variant="primary">Go somewhere</BButton>
</BCard>
</template>
<script setup>
import placeholderImg from '@/img_src/placeholder_card.jpg'
</script>
Card types
Use .card-border for Card Border,.card-shadow for Card Shadow and .card-flush for Flushed Card.
Card Title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard Title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard Title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<template>
<BCol xl="4" sm="6">
<BCard
title="Card Title"
subtitle="Card subtitle"
:img-src="placeholderImg"
img-alt="Card image cap"
img-top
class="card-border"
>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
<BButton href="#" variant="primary">Go somewhere</BButton>
</BCard>
</BCol>
<BCol xl="4" sm="6">
<BCard
title="Card Title"
subtitle="Card subtitle"
:img-src="placeholderImg"
img-alt="Card image cap"
img-top
class="card-shadow"
>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
<BButton href="#" variant="primary">Go somewhere</BButton>
</BCard>
</BCol>
<BCol xl="4" sm="6">
<BCard
title="Card Title"
subtitle="Card subtitle"
:img-src="placeholderImg"
img-alt="Card image cap"
img-top
class="card-flush"
>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
<BButton href="#" variant="primary">Go somewhere</BButton>
</BCard>
</BCol>
</template>
<script setup>
import placeholderImg from '@/img_src/placeholder_card.jpg'
</script>
Header and Footer
Add an optional header and/or footer within a card via the header/footer props or named slots. You can control the wrapper element tags used by setting the header-tag and footer-tag props (both default is div).
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<template>
<BCard
header="Card Header"
header-tag="header"
footer="Card Footer"
footer-tag="footer"
title="Special title treatment"
>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
<BButton href="#" variant="primary">Go somewhere</BButton>
</BCard>
</template>
| Props | Value | Default |
|---|---|---|
header |
string | undefined |
header-tag |
string | 'div' |
footer |
string | undefined |
footer-tag |
string | 'div' |
Titles, text, and links
Card titles are adding via the title prop, and subtitle are added via the subtitle prop. The title is rendered using the sub-component BCardTitle while the Sub Title is rendered using the sub-component BCardSubtitle. Links can be added and placed next to each other by adding the .card-link class to a <a> tag (or BLink component).
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card linkAnother link
<template>
<BCard title="Card title" subtitle="Card subtitle">
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
<a href="#" class="card-link">Card link</a>
<BLink href="#" class="card-link">Another link</BLink>
</BCard>
</template>
Kitchen sink
Mix and match multiple content types to create the card you need, or throw everything in there.Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
<template>
<BCard no-body :img-src="placeholderImg" img-alt="Card image cap" img-top>
<BCardBody>
<BCardTitle>Card Title</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</BCardText>
</BCardBody>
<BListGroup flush>
<BListGroupItem>Cras justo odio</BListGroupItem>
<BListGroupItem>Dapibus ac facilisis in</BListGroupItem>
<BListGroupItem>Vestibulum at eros</BListGroupItem>
</BListGroup>
<BCardBody>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</BCardBody>
</BCard>
</template>
<script setup>
import placeholderImg from '@/img_src/placeholder_card.jpg'
</script>
Image overlays
Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.
<template>
<BCard noBody :img-src="placeholderImg" img-alt="Card Image">
<BCardBody
text-variant="white"
variant="dark"
class="bg-opacity-75"
overlay
>
<BCardTitle class="text-white">Card Title</BCardTitle>
<BCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</BCardText>
<BCardText>Last updated 3 mins ago</BCardText>
</BCardBody>
</BCard>
</template>
<script setup>
import placeholderImg from '@/img_src/placeholder_card.jpg'
</script>
Horizontal
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
Horizontal Card
This is a wider card with supporting text.
<template>
<BCard no-body>
<BRow class="g-0">
<BCol md="4">
<img
class="img-fluid rounded-start"
:src="placeholderImg"
alt="Card image"
/>
</BCol>
<BCol md="8">
<BCardBody title="Horizontal Card">
<BCardText> This is a wider card with supporting text. </BCardText>
</BCardBody>
</BCol>
</BRow>
</BCard>
</template>
<script setup>
import placeholderImg from '@/img_src/placeholder_card.jpg'
</script>
Card sizes
Use classes .card-lg, card-sm for sizes.
Card lg
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card sm
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
<template>
<BRow>
<BCol xl="4" sm="6">
<BCard class="card-lg">
<BCardTitle>Card lg</BCardTitle>
<BCardSubtitle>Card subtitle</BCardSubtitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol xl="4" sm="6">
<BCard class="card-sm">
<BCardTitle>Card sm</BCardTitle>
<BCardSubtitle>Card subtitle</BCardSubtitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
</BRow>
</template>
Navigation
Integrate BNav into card headers easily.
Card Title
With supporting text below as a natural lead-in to additional content.
<template>
<BCard
title="Card Title"
class="card-sm card-wth-tabs"
body-class="text-center"
header-tag="nav"
>
<template #header>
<BNav card-header tabs>
<BNavItem active>Active</BNavItem>
<BNavItem>Inactive</BNavItem>
<BNavItem disabled>Disabled</BNavItem>
</BNav>
</template>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
<BButton variant="primary">Go somewhere</BButton>
</BCard>
</template>
Card Groups
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.
Card One
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card Two
This card has supporting text below as a natural lead-in to additional content.
Card Three
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
<template>
<BCardGroup>
<BCard
title="Card One"
:img-src="placeholderImg"
img-alt="Card image cap"
img-top
>
<BCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</BCardText>
<template #footer>
<small class="text-muted">Last updated 3 mins ago</small>
</template>
</BCard>
<BCard
title="Card Two"
:img-src="placeholderImg"
img-alt="Card image cap"
img-top
>
<BCardText>
This card has supporting text below as a natural lead-in to additional
content.
</BCardText>
<template #footer>
<small class="text-muted">Last updated 3 mins ago</small>
</template>
</BCard>
<BCard
title="Card Three"
:img-src="placeholderImg"
img-alt="Card image cap"
img-top
>
<BCardText>
This is a wider card with supporting text below as a natural lead-in to
additional content. This card has even longer content than the first to
show that equal height action.
</BCardText>
<template #footer>
<small class="text-muted">Last updated 3 mins ago</small>
</template>
</BCard>
</BCardGroup>
</template>
<script setup>
import placeholderImg from '@/img_src/placeholder_card.jpg'
</script>
Background and color
Cards include their own variant style for quickly changing the background-color and of a card via the bg-variant and border-variant props.
Primary Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Success Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Info Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Light Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark Card
Some quick example text to build on the card title and make up the bulk of the card's content.
<template>
<BRow>
<BCol lg="3" md="4" sm="6">
<BCard bg-variant="primary" text-variant="white" header="Header">
<BCardTitle class="text-white"> Primary Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard bg-variant="secondary" text-variant="white" header="Header">
<BCardTitle class="text-white"> Secondary Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard bg-variant="success" text-variant="white" header="Header">
<BCardTitle class="text-white"> Success Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard bg-variant="danger" text-variant="white" header="Header">
<BCardTitle class="text-white"> Danger Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard bg-variant="warning" text-variant="white" header="Header">
<BCardTitle class="text-white"> Warning Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard bg-variant="info" text-variant="white" header="Header">
<BCardTitle class="text-white"> Info Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard bg-variant="charcoal-light-5" header="Header">
<BCardTitle> Light Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard bg-variant="dark" text-variant="white" header="Header">
<BCardTitle class="text-white"> Dark Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
</BRow>
</template>
Border
Cards include their own variant style for quickly changing the background-color and of a card via the bg-variant and border-variant props.
Primary Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Success Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Info Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Light Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark Card
Some quick example text to build on the card title and make up the bulk of the card's content.
<template>
<BRow>
<BCol lg="3" md="4" sm="6">
<BCard
border-variant="primary"
text-variant="primary"
header="Header"
header-text-variant="secondary"
>
<BCardTitle class="text-primary"> Primary Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard
border-variant="secondary"
text-variant="secondary"
header="Header"
header-text-variant="secondary"
>
<BCardTitle class="text-secondary"> Secondary Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard
border-variant="success"
text-variant="success"
header="Header"
header-text-variant="secondary"
>
<BCardTitle class="text-success"> Success Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard
border-variant="danger"
text-variant="danger"
header="Header"
header-text-variant="secondary"
>
<BCardTitle class="text-danger"> Danger Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard
border-variant="warning"
text-variant="warning"
header="Header"
header-text-variant="secondary"
>
<BCardTitle class="text-warning"> Warning Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard
border-variant="info"
text-variant="info"
header="Header"
header-text-variant="secondary"
>
<BCardTitle class="text-info"> Info Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard
border-variant="charcoal-light-5"
header="Header"
header-text-variant="secondary"
>
<BCardTitle> Light Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
<BCol lg="3" md="4" sm="6">
<BCard
border-variant="dark"
text-variant="dark"
header="Header"
header-text-variant="secondary"
>
<BCardTitle class="text-dark"> Dark Card</BCardTitle>
<BCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</BCardText>
</BCard>
</BCol>
</BRow>
</template>
Card with action
Add as many actions in a card header. Add .card-header-action in .card-header. Given actions are for fullscreen, refresh, close, collapse and dropdown.
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard Header
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<template>
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="card card-refresh">
<div class="refresh-container">
<div class="loader-pendulums"></div>
</div>
<div class="card-header card-header-action">
<h6>Card Header</h6>
<div class="card-action-wrap">
<a class="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="collapse" href="#collapse_1" aria-expanded="true"><span class="icon"><span class="feather-icon"><i data-feather="chevron-down"></i></span></span></a>
<div class="d-flex dropdown">
<a class="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover dropdown dropdown-toggle no-caret" data-bs-toggle="dropdown" href="#" aria-expanded="false"><span class="icon"><span class="feather-icon"><i data-feather="more-horizontal"></i></span></span></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<a class="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover refresh" href="#"><span class="icon"><span class="feather-icon"><i data-feather="disc"></i></span></span></a>
<a class="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover full-screen" href="#"><span class="icon"><span class="feather-icon"><i data-feather="maximize"></i></span><span class="feather-icon d-none"><i data-feather="minimize"></i></span></span></a>
<a class="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover card-close"><span class="icon"><span class="feather-icon"><i data-feather="x"></i></span></span></a>
</div>
</div>
<div id="collapse_1" class="collapse show">
<div class="card-body">
<h5 class="card-title">Special Title Treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="card">
<div class="card-header card-header-action">
<h6>Card Header</h6>
<div class="card-action-wrap">
<div class="dropdown">
<button aria-expanded="false" data-bs-toggle="dropdown" class="btn btn-success btn-sm dropdown-toggle d-flex align-items-center" type="button">Dropdown <span class="caret"></span></button>
<div role="menu" class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Special Title Treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</template>
Action in Card Body
Instead of card header you can also add close action inside card-body.
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<template>
<BRow>
<BCol lg="4" sm="12">
<BCard v-if="showCard1" title="Special Title Treatment">
<button type="button" class="card-close btn-close" @click="closeCard1">
<span aria-hidden="true">×</span>
</button>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
<BButton href="#" variant="primary">Go somewhere</BButton>
</BCard>
</BCol>
<BCol lg="4" sm="12">
<BCard v-if="showCard2" title="Special Title Treatment" class="close-over">
<button type="button" class="card-close btn-close" @click="closeCard2">
<span aria-hidden="true">×</span>
</button>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
<BButton href="#" variant="primary">Go somewhere</BButton>
</BCard>
</BCol>
</BRow>
</template>
Card with Indicators
Use badges and badge indicators with cards.
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<template>
<BRow>
<BCol lg="4" sm="12">
<BCard header="Card Header" title="Special Title Treatment" class="position-relative" >
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
<BButton href="#" variant="primary">Go somewhere</BButton>
<HkBadge
class="position-top-end-overflow"
variant="success"
indicatorSize="xl"
indicator
/>
</BCard>
</BCol>
<BCol lg="4" sm="12">
<BCard header="Card Header" title="Special Title Treatment" class="position-relative" >
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
<BButton href="#" variant="primary">Go somewhere</BButton>
<HkBadge
class="position-top-end-overflow"
variant="success"
pill
>
10
</HkBadge>
</BCard>
</BCol>
<BCol lg="4" sm="12">
<BCard header="Card Header" title="Special Title Treatment" class="card-selected" >
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
<BButton href="#" variant="primary">Go somewhere</BButton>
</BCard>
</BCol>
</BRow>
</template>
Card with table
Use tables inside cards
| # | Username | Role |
|---|---|---|
| 1 | Brincker123 | |
| 2 | Hay123 |
<template>
<BCard header="Card Header" body-class="p-0">
<BTableSimple table-class="mb-0" responsive>
<BThead>
<BTr>
<BTh>#</BTh>
<BTh>Username</BTh>
<BTh>Role</BTh>
</BTr>
</BThead>
<BTbody>
<BTr>
<BTh scope="row">1</BTh>
<BTd>Brincker123</BTd>
<BTd><HkBadge variant="danger">admin</HkBadge></BTd>
</BTr>
<BTr>
<BTh scope="row">2</BTh>
<BTd>Hay123</BTd>
<BTd><HkBadge variant="info">Member</HkBadge></BTd>
</BTr>
</BTbody>
</BTableSimple>
</BCard>
</template>
Card with icons
Use icons with card header.
Jampack heading
Some quick example text to build on the card title and make up the bulk of the card's content.
<template>
<BCard no-body>
<BCardHeader>
<h6 class="heading-wth-icon">
<span class="head-icon">
<i class="ri-funds-box-line"></i>
</span>
Jampack heading
</h6>
</BCardHeader>
<BCardBody>
<BCardText>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</BCardText>
</BCardBody>
</BCard>
</template>
Card with badge
Use badges in card header.
Card with badge
Some quick example text to build on the card title and make up the bulk of the card's content.
<template>
<BCard no-body>
<BCardHeader>
<h6>Card with badge</h6>
<div class="d-flex">
<!-- HkBadge is a our custom badge component -->
<HkBadge variant="info">badge</HkBadge>
</div>
</BCardHeader>
<BCardBody>
<BCardText>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</BCardText>
</BCardBody>
</BCard>
</template>
Card with headings
Mix and match headings in cards.
Card Header
With supporting text below as a natural
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard with icon sub heading
Some quick example text to build on the card title and make up the bulk of the card's content.
<template>
<BRow>
<BCol lg="6" sm="12">
<BCard v-if="showCard" :class="[maxiMize ? 'fullscreen' : '']" no-body>
<BCardHeader class="card-header-wth-text card-header-action">
<div>
<h6>Card Header</h6>
<p>With supporting text below as a natural</p>
</div>
<div class="card-action-wrap">
<BButton
size="xs"
class="btn-icon btn-rounded btn-flush-dark flush-soft-hover full-screen"
@click="toggleMaximize"
>
<span class="icon" v-if="maxiMize">
<feather-icon name="minimize" />
</span>
<span class="icon" v-else>
<feather-icon name="maximize" />
</span>
</BButton>
<BButton
size="xs"
class="btn-icon btn-rounded btn-flush-dark flush-soft-hover card-close"
@click="closeCard"
>
<span class="icon">
<span class="feather-icon">
<feather-icon name="x" />
</span>
</span>
</BButton>
</div>
</BCardHeader>
<BCardBody>
<BCardTitle>Special Title Treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
<BButton href="#" variant="primary">Go somewhere</BButton>
</BCardBody>
</BCard>
</BCol>
<BCol lg="4" sm="12">
<BCard no-body>
<BCardHeader>
<h6>Card with icon <small class="text-muted ms-2">sub heading</small></h6>
</BCardHeader>
<BCardBody>
<BCardText>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</BCardText>
</BCardBody>
</BCard>
</BCol>
</BRow>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const maxiMize = ref(false);
const showCard = ref(true);
const toggleMaximize = () => {
maxiMize.value = !maxiMize.value;
};
const closeCard = () => {
showCard.value = !showCard.value;
};
return {
maxiMize,
showCard,
toggleMaximize,
closeCard
};
}
}
</script>
Card with progress bar
Use progress bars with cards.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<template>
<BRow>
<BCol sm="4">
<BCard class="card-wth-progress" no-body>
<BProgress variant="primary" :value="25" class="progress-bar-xs" />
<BCardBody>
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter>Card Footer</BCardFooter>
</BCard>
</BCol>
<BCol sm="4">
<BCard class="card-wth-progress" no-body>
<BProgress variant="warning" :value="75" class="progress-bar-xs" />
<BCardBody>
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter>Card Footer</BCardFooter>
</BCard>
</BCol>
<BCol sm="4">
<BCard class="card-wth-progress" no-body>
<BProgress variant="success" :value="75" class="progress-bar-xs" />
<BCardBody>
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter>Card Footer</BCardFooter>
</BCard>
</BCol>
</BRow>
</template>
Card with line
Check the cards with line stylization.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<template>
<BRow>
<BCol sm="4">
<BCard class="card-wth-progress" no-body>
<div class="card-line bg-primary"></div>
<BCardBody>
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter>Card Footer</BCardFooter>
</BCard>
</BCol>
<BCol sm="4">
<BCard class="card-wth-progress" no-body>
<div class="card-line bg-warning"></div>
<BCardBody>
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter>Card Footer</BCardFooter>
</BCard>
</BCol>
<BCol sm="4">
<BCard class="card-wth-progress" no-body>
<div class="card-line bg-success"></div>
<BCardBody>
<BCardTitle>Special title treatment</BCardTitle>
<BCardText>
With supporting text below as a natural lead-in to additional content.
</BCardText>
</BCardBody>
<BCardFooter>Card Footer</BCardFooter>
</BCard>
</BCol>
</BRow>
</template>
Card with Image Carousel
A card can have carousel within image parent.
Some quick example text to build on the card title and make up the bulk of the card's content.
<template>
<BCard no-body>
<BCarousel :interval="2500" indicators ride="carousel">
<BCarouselSlide>
<template #img>
<BCardImg :src="slide1" alt="Card image cap" />
</template>
</BCarouselSlide>
<BCarouselSlide>
<template #img>
<BCardImg :src="slide1" alt="Card image cap" />
</template>
</BCarouselSlide>
</BCarousel>
<BCardBody>
<BCardText>
Some quick example text to build on the card title and make up the bulk
of the card's content.
</BCardText>
</BCardBody>
</BCard>
</template>
<script setup>
import slide1 from '@/img_src/slide1.jpg'
import slide2 from '@/img_src/slide2.jpg'
</script>