346 lines
14 KiB
Vue
346 lines
14 KiB
Vue
|
<script>
|
||
|
|
import Layout from "../../layouts/main";
|
||
|
|
import PageHeader from "../../components/page-header";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Cards component
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Layout,
|
||
|
|
PageHeader
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: "Cards",
|
||
|
|
items: [{
|
||
|
|
text: "UI Elements",
|
||
|
|
href: "/"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Cards",
|
||
|
|
active: true
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Layout>
|
||
|
|
<PageHeader :title="title" :items="items" />
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-6 col-xl-3">
|
||
|
|
<!-- Simple card -->
|
||
|
|
<b-card img-src="/images/small/img-1.jpg" img-alt="Card image" img-top>
|
||
|
|
<b-card-title>
|
||
|
|
<h5 class="card-title">Card title</h5>
|
||
|
|
</b-card-title>
|
||
|
|
<b-card-text>
|
||
|
|
Some quick example text to build on the card title and make
|
||
|
|
up the bulk of the card's content.
|
||
|
|
</b-card-text>
|
||
|
|
<b-button href="javascript:void(0);" variant="primary">Button</b-button>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
|
||
|
|
<div class="col-lg-6 col-xl-3">
|
||
|
|
<b-card no-body img-src="/images/small/img-2.jpg" img-alt="Card image" img-top>
|
||
|
|
<b-card-body>
|
||
|
|
<b-card-title>
|
||
|
|
<h5 class="card-title">Card title</h5>
|
||
|
|
</b-card-title>
|
||
|
|
<b-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</b-card-text>
|
||
|
|
</b-card-body>
|
||
|
|
<ul class="list-group list-group-flush">
|
||
|
|
<li class="list-group-item">Cras justo odio</li>
|
||
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||
|
|
</ul>
|
||
|
|
<div class="card-body">
|
||
|
|
<a href="javascript:void(0);" class="card-link text-custom">Card link</a>
|
||
|
|
<a href="javascript:void(0);" class="card-link text-custom">Another link</a>
|
||
|
|
</div>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
|
||
|
|
<div class="col-lg-6 col-xl-3">
|
||
|
|
<b-card img-src="/images/small/img-3.jpg" img-alt="Card image" img-top>
|
||
|
|
<b-card-text>
|
||
|
|
Some quick example text to build on the card title and make
|
||
|
|
up the bulk of the card's content.
|
||
|
|
</b-card-text>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
|
||
|
|
<div class="col-lg-6 col-xl-3">
|
||
|
|
<b-card no-body>
|
||
|
|
<b-card-body>
|
||
|
|
<b-card-title>
|
||
|
|
<h5 class="card-title">Card title</h5>
|
||
|
|
</b-card-title>
|
||
|
|
<b-card-sub-title>
|
||
|
|
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
|
||
|
|
</b-card-sub-title>
|
||
|
|
</b-card-body>
|
||
|
|
<img src="/images/small/img-4.jpg" class="img-fluid" />
|
||
|
|
<b-card-body>
|
||
|
|
<b-card-text>
|
||
|
|
Some quick example text to build on the card title and make
|
||
|
|
up the bulk of the card's content.
|
||
|
|
</b-card-text>
|
||
|
|
<a href="javascript:void(0);" class="card-link text-custom">Card link</a>
|
||
|
|
<a href="javascript:void(0);" class="card-link text-custom">Another link</a>
|
||
|
|
</b-card-body>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<b-card no-body>
|
||
|
|
<b-card-body>
|
||
|
|
<b-card-title>
|
||
|
|
<h4 class="card-title">Special title treatment</h4>
|
||
|
|
</b-card-title>
|
||
|
|
<b-card-text>
|
||
|
|
With supporting text below as a natural lead-in to additional
|
||
|
|
content.
|
||
|
|
</b-card-text>
|
||
|
|
<a href="javascript:void(0);" class="btn btn-primary btn-block">Go somewhere</a>
|
||
|
|
</b-card-body>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<b-card no-body>
|
||
|
|
<b-card-body>
|
||
|
|
<b-card-title>
|
||
|
|
<h4 class="card-title">Special title treatment</h4>
|
||
|
|
</b-card-title>
|
||
|
|
<b-card-text>
|
||
|
|
With supporting text below as a natural lead-in to additional
|
||
|
|
content.
|
||
|
|
</b-card-text>
|
||
|
|
<a href="javascript:void(0);" class="btn btn-primary btn-block">Go somewhere</a>
|
||
|
|
</b-card-body>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<b-card>
|
||
|
|
<b-card-title>
|
||
|
|
<h5 class="card-title">Special title treatment</h5>
|
||
|
|
</b-card-title>
|
||
|
|
<h5 slot="header" class="mb-0">Featured</h5>
|
||
|
|
<b-card-text>With supporting text below as a natural lead-in to additional content.</b-card-text>
|
||
|
|
<b-button href="javascript: void(0);" variant="primary">Go somewhere</b-button>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<b-card header="Quote">
|
||
|
|
<b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</b-card-text>
|
||
|
|
<footer>
|
||
|
|
Someone famous in
|
||
|
|
<cite title="Source Title">Source Title</cite>
|
||
|
|
</footer>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<b-card header="Featured" footer="2 days ago" class="text-center">
|
||
|
|
<b-card-text>
|
||
|
|
<h4 class="card-title">Special title treatment</h4>
|
||
|
|
<p class="card-text">
|
||
|
|
With supporting text below as a natural lead-in to
|
||
|
|
additional content.
|
||
|
|
</p>
|
||
|
|
<a href="javascript: void(0);" class="btn btn-primary">Go somewhere</a>
|
||
|
|
</b-card-text>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<b-card img-src="/images/small/img-5.jpg" img-alt="Card image" img-top>
|
||
|
|
<b-card-title>
|
||
|
|
<h5 class="card-title">Card title</h5>
|
||
|
|
</b-card-title>
|
||
|
|
<b-card-text>
|
||
|
|
<p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
|
|
<p>
|
||
|
|
<small class="text-muted">Last updated 3 mins ago</small>
|
||
|
|
</p>
|
||
|
|
</b-card-text>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<b-card img-src="/images/small/img-7.jpg" img-alt="Card image" img-bottom>
|
||
|
|
<b-card-title>
|
||
|
|
<h5 class="card-title">Card title</h5>
|
||
|
|
</b-card-title>
|
||
|
|
<b-card-text>
|
||
|
|
<p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
|
|
<p>
|
||
|
|
<small class="text-muted">Last updated 3 mins ago</small>
|
||
|
|
</p>
|
||
|
|
</b-card-text>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<b-card overlay img-src="/images/small/img-6.jpg" img-alt="Card Image" text-variant="white">
|
||
|
|
<b-card-title>
|
||
|
|
<h5 class="card-title text-white">Card title</h5>
|
||
|
|
</b-card-title>
|
||
|
|
<b-card-text>
|
||
|
|
<p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
|
|
<p>
|
||
|
|
<small class="text-white">Last updated 3 mins ago</small>
|
||
|
|
</p>
|
||
|
|
</b-card-text>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<b-card no-body>
|
||
|
|
<b-row no-gutters class="align-items-center">
|
||
|
|
<b-col md="4">
|
||
|
|
<b-card-img src="/images/small/img-2.jpg" class="rounded-0"></b-card-img>
|
||
|
|
</b-col>
|
||
|
|
<b-col md="8">
|
||
|
|
<b-card-body title="Card title">
|
||
|
|
<b-card-text>This is a wider card with supporting text below as a natural lead-in to additional content.</b-card-text>
|
||
|
|
<p class="card-text">
|
||
|
|
<small class="text-muted">Last updated 3 mins ago</small>
|
||
|
|
</p>
|
||
|
|
</b-card-body>
|
||
|
|
</b-col>
|
||
|
|
</b-row>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<b-card no-body>
|
||
|
|
<b-row no-gutters class="align-items-center">
|
||
|
|
<b-col md="8">
|
||
|
|
<b-card-body title="Card title">
|
||
|
|
<b-card-text>This is a wider card with supporting text below as a natural lead-in to additional content.</b-card-text>
|
||
|
|
<p class="card-text">
|
||
|
|
<small class="text-muted">Last updated 3 mins ago</small>
|
||
|
|
</p>
|
||
|
|
</b-card-body>
|
||
|
|
</b-col>
|
||
|
|
<b-col md="4">
|
||
|
|
<b-card-img src="/images/small/img-3.jpg" class="rounded-0"></b-card-img>
|
||
|
|
</b-col>
|
||
|
|
</b-row>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<b-card bg-variant="primary" class="text-white-50">
|
||
|
|
<h5 class="mt-0 mb-4 text-white">
|
||
|
|
<i class="mdi mdi-bullseye-arrow me-3"></i> Primary Card
|
||
|
|
</h5>
|
||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<b-card bg-variant="success" class="text-white-50">
|
||
|
|
<h5 class="mt-0 mb-4 text-white">
|
||
|
|
<i class="mdi mdi-check-all me-3"></i> Success Card
|
||
|
|
</h5>
|
||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<b-card bg-variant="info" class="text-white-50">
|
||
|
|
<h5 class="mt-0 mb-4 text-white">
|
||
|
|
<i class="mdi mdi-alert-circle-outline me-3"></i> Info Card
|
||
|
|
</h5>
|
||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<b-card bg-variant="warning" class="text-white-50">
|
||
|
|
<h5 class="mt-0 mb-4 text-white">
|
||
|
|
<i class="mdi mdi-alert-outline me-3"></i> Warning Card
|
||
|
|
</h5>
|
||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<b-card bg-variant="danger" class="text-white-50">
|
||
|
|
<h5 class="mt-0 mb-4 text-white">
|
||
|
|
<i class="mdi mdi-block-helper me-3"></i> Danger Card
|
||
|
|
</h5>
|
||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<b-card bg-variant="dark" class="text-white-50">
|
||
|
|
<h5 class="mt-0 mb-4 text-white">
|
||
|
|
<i class="mdi mdi-alert-circle-outline me-3"></i> Dark Card
|
||
|
|
</h5>
|
||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<b-card header-class="bg-transparent border-primary" class="border border-primary">
|
||
|
|
<template v-slot:header>
|
||
|
|
<h5 class="my-0 text-primary">
|
||
|
|
<i class="mdi mdi-bullseye-arrow me-3"></i>Primary outline Card
|
||
|
|
</h5>
|
||
|
|
</template>
|
||
|
|
<h5 class="card-title mt-0">card title</h5>
|
||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<b-card header-class="bg-transparent border-danger" class="border border-danger">
|
||
|
|
<template v-slot:header>
|
||
|
|
<h5 class="my-0 text-danger">
|
||
|
|
<i class="mdi mdi-block-helper me-3"></i>Danger outline Card
|
||
|
|
</h5>
|
||
|
|
</template>
|
||
|
|
<h5 class="card-title mt-0">card title</h5>
|
||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4">
|
||
|
|
<b-card header-class="bg-transparent border-success" class="border border-success">
|
||
|
|
<template v-slot:header>
|
||
|
|
<h5 class="my-0 text-success">
|
||
|
|
<i class="mdi mdi-block-helper me-3"></i>Success outline Card
|
||
|
|
</h5>
|
||
|
|
</template>
|
||
|
|
<h5 class="card-title mt-0">card title</h5>
|
||
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
|
|
</b-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
</Layout>
|
||
|
|
</template>
|