Cards

Card Title

Card Subtitle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate velit, facere temporibus nostrum alias tenetur reiciendis dolorem vitae veritatis, aspernatur nam consequuntur molestiae voluptatum reprehenderit dolorum neque veniam quidem, voluptas.

Dashboard

The card footer text.

<script>
  import {
    Card
  } from 'vue-luma'

  export default {
    components: {
      Card
    }
  }
</script>

<template>
  <card header-aside
    title="Card Title"
    subtitle="Card Subtitle"
    footer-class="text-50">

    <b-dropdown slot="aside"
      variant="flush"
      right
      no-caret>
      <template slot="button-content">
        <md-icon class="text-muted icon-24pt">more_horiz</md-icon>
      </template>
      <b-dropdown-item href="#">Action</b-dropdown-item>
      <b-dropdown-item href="#">Another action</b-dropdown-item>
      <b-dropdown-item href="#">Something else here</b-dropdown-item>
    </b-dropdown>

    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate velit, facere temporibus nostrum alias tenetur reiciendis dolorem vitae veritatis, aspernatur nam consequuntur molestiae voluptatum reprehenderit dolorum neque veniam quidem, voluptas.</p>

    <b-link to="/"
      exact
      class="btn btn-primary">
      Dashboard
    </b-link>

    <span slot="footer">The card footer text.</span>
  </card>
</template>

<card> Reference

<card> Properties

Property	Type	Default Value
title	String
subtitle	String
no-body	Boolean	false
header-aside	Boolean	false
header-btn	Boolean	false
header-btn-title	String	Button
header-btn-variant	String	outline-secondary
header-btn-size	String	sm
header-btn-route	String or Object
header-class	String or Object or Array
footer-class	String or Object or Array
title-class	String or Object or Array

<card> Slots

Slot	Description
aside	The card header aside content.
header-btn-title	The card header button text.
footer	The card footer content.

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset