# Cards

We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product.

import {LoginCard} from '@/components'

# Local Usage

components: {
  LoginCard
}

# Global Usage

Vue.component(LoginCard)

# Example card

<template>
  <div class="md-layout">
    <div class="md-layout-item md-size-50 md-small-size-100 mr-auto">
      <login-card header-color="green">
        <h4 slot="title" class="card-title">Login</h4>
        <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
          <i class="fab fa-facebook-square"></i>
        </md-button>
        <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
          <i class="fab fa-twitter"></i>
        </md-button>
        <md-button slot="buttons" href="javascript:void(0)" class="md-just-icon md-simple md-white">
          <i class="fab fa-google-plus-g"></i>
        </md-button>
        <p slot="description" class="description">Or Be Classical</p>
        <md-field class="md-form-group" slot="inputs">
          <md-icon>face</md-icon>
          <label>First Name...</label>
          <md-input v-model="firstname"></md-input>
        </md-field>
        <md-field class="md-form-group" slot="inputs">
          <md-icon>email</md-icon>
          <label>Email...</label>
          <md-input v-model="email" type="email"></md-input>
        </md-field>
        <md-field class="md-form-group" slot="inputs">
          <md-icon>lock_outline</md-icon>
          <label>Password...</label>
          <md-input v-model="password"></md-input>
        </md-field>
        <md-button slot="footer" class="md-simple md-success md-lg">
          Get Started
        </md-button>
      </login-card>
    </div>
  </div>

  <script>
    export default {
      data () {
        return {
          password: null,
          firstname: null,
          email: null
        }
      }
    }
  </script>

  <props-table component-name="login-card"></props-table>
</template>

# LoginCard Slots

Name	Description
title	Default card title
description	Default card description
buttons	card buttons
footer	Content for card footer

# Blog Card

import {BlogCard} from '@/components'

# Local Usage

components: {
  BlogCard
}

# Global Usage

Vue.component(BlogCard)

# Example card

ENTERPRISE

Autodesk looks to future of 3D printing with Project Escher

Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company selling licenses. Read More

<template>
  <div class="md-layout">
    <div class="md-layout-item md-size-50 md-small-size-100 mr-auto">
      <blog-card
        :shadow-normal= "false"
        :no-colored-shadow= "false"
        :card-image="cardBlog.cardBlog1">
        <template slot="cardContent">
          <h6 class="card-category text-info">ENTERPRISE</h6>
          <h4 class="card-title">
            <a href="javasript:void(0)">Autodesk looks to future of 3D printing with Project Escher</a>
          </h4>
          <p class="card-description">
          Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company selling licenses.
          <a href="javascript:void(0)">Read More</a>
          </p>
        </template>
      </blog-card>
    </div>
  </div>

  <script>
    export default {
      data () {
        return {
          password: null,
          firstname: null,
          email: null
        }
      }
    }
  </script>

  <props-table component-name="blog-card"></props-table>
</template>

# BlogCard Slots

Name	Description
cardTitleHeader	Default card title
cardContent	Default card content
cardAction	Default card footer

# Full Background Card

import {FullBgCard} from '@/components'

# Local Usage

components: {
  FullBgCard
}

# Global Usage

Vue.component(FullBgCard)

# Example card

Productivy Apps

The Best Productivity Apps on Market

Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...

Read Article

Watch Later

<template>
  <div class="md-layout">
    <div class="md-layout-item md-size-50 md-small-size-100 mr-auto">
      <full-bg-card :card-image="cardFullBg.fullBg1">
        <template slot="cardContent">
          <h6 class="card-category text-info">Productivy Apps</h6>
          <a href="javascript:void(0)">
            <h3 class="card-title">The Best Productivity Apps on Market</h3>
          </a>
          <p class="card-description">
            Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
          </p>
          <md-button href="javascript:void(0)" class="md-white md-simple">
            <md-icon>subject</md-icon> Read Article
          </md-button>
          <md-button href="javascript:void(0)" class="md-white md-simple">
            <md-icon>watch_later</md-icon> Watch Later
          </md-button>
        </template>
      </full-bg-card>
    </div>
  </div>

  <script>
    export default {
      data () {
        return {
          password: null,
          firstname: null,
          email: null
        }
      }
    }
  </script>

  <props-table component-name="full-bg-card"></props-table>
</template>

# Full Background Card Slots

Name	Description
cardContent	Default card content

# Pricing Card

import {PricingCard} from '@/components'

# Local Usage

components: {
  PricingCard
}

# Global Usage

Vue.component(PricingCard)

# Example card

Premium

$89 /mo

500 Project
50 Team Members
125 Personal Contacts
15.000 Messages

Get Started

<template>
  <div class="md-layout">
    <div class="md-layout-item md-size-50 md-small-size-100 mr-auto">
      <pricing-card card-bg="rose">
        <template slot="cardContent">
          <h6 class="card-category">Premium</h6>
          <h1 class="card-title">
            <small>$</small>89
            <small>/mo</small>
          </h1>
          <ul>
            <li>
              <b>500</b> Project</li>
            <li>
              <b>50</b> Team Members</li>
            <li>
              <b>125</b> Personal Contacts</li>
            <li>
              <b>15.000</b> Messages</li>
          </ul>

          <md-button href="javascript:void(0)" class="md-white md-round">
            Get Started
          </md-button>
        </template>
      </pricing-card>
    </div>
  </div>

  <script>
    export default {
      data () {
        return {
          password: null,
          firstname: null,
          email: null
        }
      }
    }
  </script>

  <props-table component-name="pricing-card"></props-table>
</template>

# Pricing Card Slots

Name	Description
cardCategory	Default card category subtitle
cardContent	Default card content
cardAction	Default card footer

# Product Card

import {ProductCard} from '@/components'

# Local Usage

components: {
  ProductCard
}

# Global Usage

Vue.component(ProductCard)

# Example card

Gucci

The structured shoulders and sleek detailing ensure a sharp silhouette. Team it with a silk pocket square and leather loafers.

€1,430 €743

<template>
  <div class="md-layout">
    <div class="md-layout-item md-size-50 md-small-size-100 mr-auto">
      <product-card
        text-center
        class="mt-3"
        card-plain
        :card-image="productCard.productCard1"
        :shadow-normal="false"
        :no-colored-shadow="false">
        <template slot="cardContent">
          <h4 class="card-title">Gucci</h4>
          <p class="card-description">The structured shoulders and sleek detailing ensure a sharp silhouette. Team it with a silk pocket square and leather loafers.</p>
        </template>
        <template slot="cardAction">
          <div class="price-container">
            <span class="price price-old"> €1,430</span>
            <span class="price price-new"> €743</span>
          </div>
          <div class="stats ml-auto">
            <md-button class="md-just-icon md-rose md-round md-simple">
              <md-icon>favorite</md-icon>
              <md-tooltip md-direction="top">Save to Wishlist</md-tooltip>
            </md-button>
          </div>
        </template>
      </product-card>
    </div>
  </div>

  <script>
    export default {
      data () {
        return {
          password: null,
          firstname: null,
          email: null
        }
      }
    }
  </script>

  <props-table component-name="product-card"></props-table>
</template>

# Product Card Slots

Name	Description
cardContent	Default card content
cardAction	Default card footer

import {ProfileCard} from '@/components'

# Local Usage

components: {
  ProfileCard
}

# Global Usage

Vue.component(ProfileCard)

# Example card

Tania Andrew

Web Designer

Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...

Alec Thompson

Founder

Don't be scared of the truth because we need to restart the human foundation in truth...

<template>
  <div class="md-layout">
    <div class="md-layout-item md-size-50 md-small-size-100 mr-auto">
      <profile-card
        :shadow-normal="false"
        :no-colored-shadow="false"
        :card-image="cardProfile.cardProfile1">
        <template slot="cardTitleHeader">Tania Andrew</template>
        <template slot="cardContent">
          <h6 class="card-category text-info">Web Designer</h6>
          <p class="card-description">
            Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
          </p>
        </template>
        <template slot="cardAction">
          <md-button href="javascript:void(0)" class="md-twitter md-just-icon md-simple"><i class="fab fa-twitter"></i></md-button>
          <md-button href="javascript:void(0)" class="md-dribbble md-just-icon md-simple"><i class="fab fa-dribbble"></i></md-button>
          <md-button href="javascript:void(0)" class="md-instagram md-just-icon md-simple"><i class="fab fa-instagram"></i></md-button>
        </template>
      </profile-card>
    </div>
    <div class="md-layout-item md-size-50 md-small-size-100 mr-auto">
      <profile-card
        card-plain
        type="horizontal"
        :shadow-normal="false"
        :no-colored-shadow="false"
        :card-image="cardProfile3.cardProfile1">
        <template slot="cardContent">
          <h4 class="card-title">Alec Thompson</h4>
          <h6 class="card-category text-muted">Founder</h6>
          <p class="card-description">Don't be scared of the truth because we need to restart the human foundation in truth...</p>
        </template>
        <template slot="cardAction">
          <md-button href="javascript:void(0)" class="md-twitter md-just-icon md-simple"><i class="fab fa-twitter"></i></md-button>
          <md-button href="javascript:void(0)" class="md-facebook md-just-icon md-simple"><i class="fab fa-facebook"></i></md-button>
          <md-button href="javascript:void(0)" class="md-google md-just-icon md-simple"><i class="fab fa-google"></i></md-button>
        </template>
      </profile-card>
    </div>
  </div>

  <script>
    export default {
      data () {
        return {
          password: null,
          firstname: null,
          email: null
        }
      }
    }
  </script>

  <props-table component-name="profile-card"></props-table>
</template>

Name	Description
cardTitleHeader	Default card title header
cardContent	Default card content
cardAction	Default card footer

# Rotating Card

import {RotatingCard} from '@/components'

# Local Usage

components: {
  RotatingCard
}

# Global Usage

Vue.component(RotatingCard)

# Example card

Full Background Card

This Background Card Will Rotate on Hover

Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...

Manage Post

As an Admin, you have shortcuts to edit, view or delete the posts.

Full Background Card

This card is doing a full rotation, click on the rotate button

Don't be scared of the truth because we need to restart the human...

Rotate...

Manage Post

As an Admin, you have shortcuts to edit, view or delete the posts.

Back...

<template>
  <div class="md-layout">
    <div class="md-layout-item md-size-50 md-small-size-100 mr-auto">
      <rotating-card
        card-class="md-card-background"
        layer-background
        :front-card-image="cardRotating.cardRotatingBg1"
        :back-card-image="cardRotating.cardRotatingBg1">
        <template slot="frontRotateCardContent">
          <h6 class="card-category">Full Background Card</h6>
          <a href="javascript:void(0)">
            <h3 class="card-title">This Background Card Will Rotate on Hover</h3>
          </a>
          <p class="card-description">
            Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
          </p>
        </template>
        <template slot="backRotateCardContent">
          <h5 class="card-title">
            Manage Post
          </h5>
          <p class="card-description">As an Admin, you have shortcuts to edit, view or delete the posts.</p>

          <md-button href="javascript:void(0)" class="md-info md-just-icon md-round">
            <md-icon>subject</md-icon>
          </md-button>
          <md-button href="javascript:void(0)" class="md-success md-just-icon md-round">
            <md-icon>mode_edit</md-icon>
          </md-button>
          <md-button href="javascript:void(0)" class="md-danger md-just-icon md-round">
            <md-icon>delete</md-icon>
          </md-button>
        </template>
      </rotating-card>
    </div>
    <div class="md-layout-item md-size-50 md-small-size-100 mr-auto">
      <rotating-card
        card-class="md-card-background"
        layer-background
        :front-card-image="cardRotating.cardRotatingBg2"
        :back-card-image="cardRotating.cardRotatingBg2"
        :manual-rotate-state="manualRotateState2"
        manual-rotate>
        <template slot="frontRotateCardContent">
          <h6 class="card-category">Full Background Card</h6>
          <a href="javascript:void(0)">
            <h3 class="card-title">This card is doing a full rotation, click on the rotate button</h3>
          </a>
          <p class="card-description">
            Don't be scared of the truth because we need to restart the human...
          </p>

          <div class="stats text-center">
            <md-button href="javascript:void(0)" class="md-danger md-round" @click="manualRotateState2 = true">
              <md-icon>refresh</md-icon> Rotate...
            </md-button>
          </div>
        </template>
        <template slot="backRotateCardContent">
          <h5 class="card-title">
              Manage Post
          </h5>
          <p class="card-description">As an Admin, you have shortcuts to edit, view or delete the posts.</p>
          <div class="stats text-center">
            <md-button href="javascript:void(0)" class="md-info md-just-icon md-round">
              <md-icon>subject</md-icon>
            </md-button>
            <md-button href="javascript:void(0)" class="md-success md-just-icon md-round">
              <md-icon>mode_edit</md-icon>
            </md-button>
            <md-button href="javascript:void(0)" class="md-danger md-just-icon md-round">
              <md-icon>delete</md-icon>
            </md-button>

            <br>
            <br>

            <md-button href="javascript:void(0)" class="md-simple md-round" @click="manualRotateState2 = false">
              <md-icon>refresh</md-icon> Back...
            </md-button>
          </div>
        </template>
      </rotating-card>
    </div>
  </div>

  <script>
    export default {
      data () {
        return {
          password: null,
          firstname: null,
          email: null
        }
      }
    }
  </script>

  <props-table component-name="rotating-card"></props-table>
</template>

# Rotating Card Slots

Name	Description
frontRotateCardContent	Default card front content
frontCardAction	Default card front footer
backCardAction	Default card back footer
backRotateCardContent	Default card back content

# Testimonial Card

import {TestimonialCard} from '@/components'

# Local Usage

components: {
  TestimonialCard
}

# Global Usage

Vue.component(TestimonialCard)

# Example card

"Your products, all the kits that I have downloaded from your site and worked with are sooo cool! I love the color mixtures, cards... everything. Keep up the great work!"

Alec Thompson

@alecthompson

Gina West

CFO @ Apple Inc.

"I've been trying to figure out the bed design for the master bedroom at our Hidden Hills compound..."

<template>
  <div class="md-layout">
    <div class="md-layout-item md-size-50 md-small-size-100 mr-auto">
      <testimonial-card>
        <md-icon slot="icon">format_quote</md-icon>
        <template slot="cardContent">
          <h5 class="card-description">
            "Your products, all the kits that I have downloaded from your site and worked with are sooo cool! I love the color mixtures, cards... everything. Keep up the great work!"
          </h5>
        </template>
        <template slot="cardAction">
          <h4 class="card-title">Alec Thompson</h4>
          <h6 class="card-category">@alecthompson</h6>
          <div class="md-card-avatar">
            <a href="javascript:void(0)">
              <img class="img" :src="sectionTestimonials1.testimonials1">
            </a>
          </div>
        </template>
      </testimonial-card>
    </div>
    <div class="md-layout-item md-size-50 md-small-size-100 mr-auto">
      <testimonial-card>
        <div slot="cardAvatarTop" class="md-card-avatar mt-0">
          <a href="javascript:void(0)">
            <img class="img" :src="sectionTestimonials1.testimonials1">
          </a>
        </div>
        <template slot="cardContent">
          <h4 class="card-title">Gina West</h4>
          <h6 class="card-category text-muted">CFO @ Apple Inc.</h6>
          <h5 class="card-description">"I've been trying to figure out the bed design for the master bedroom at our Hidden Hills compound..."
          </h5>
        </template>
      </testimonial-card>
    </div>
  </div>

  <script>
    export default {
      data () {
        return {
          password: null,
          firstname: null,
          email: null
        }
      }
    }
  </script>

  <props-table component-name="testimonial-card"></props-table>
</template>

# Testimonial Card Slots

Name	Description
icon	Default card header icon
cardAvatarTop	Default card avatar image on top
cardContent	Default card content
cardAction	Default card footer

Vue Material Kit PRO

# Cards

# Login card

# Local Usage

# Global Usage

# Example card

Login

# LoginCard Slots

# Blog Card

# Local Usage

# Global Usage

# Example card

ENTERPRISE

Autodesk looks to future of 3D printing with Project Escher

# BlogCard Slots

# Full Background Card

# Local Usage

# Global Usage

# Example card

Productivy Apps

The Best Productivity Apps on Market

# Full Background Card Slots

# Pricing Card

# Local Usage

# Global Usage

# Example card

Premium

$89 /mo

# Pricing Card Slots

# Product Card

# Local Usage

# Global Usage

# Example card

Gucci

# Product Card Slots

# Profile Card

# Local Usage

# Global Usage

# Example card

Web Designer

Alec Thompson

Founder

# Profile Card Slots

# Rotating Card

# Local Usage

# Global Usage

# Example card

Full Background Card

This Background Card Will Rotate on Hover

Manage Post

Full Background Card

This card is doing a full rotation, click on the rotate button

Manage Post

# Rotating Card Slots

# Testimonial Card

# Local Usage

# Global Usage

# Example card

"Your products, all the kits that I have downloaded from your site and worked with are sooo cool! I love the color mixtures, cards... everything. Keep up the great work!"

Alec Thompson

@alecthompson

Gina West

CFO @ Apple Inc.

"I've been trying to figure out the bed design for the master bedroom at our Hidden Hills compound..."

# Testimonial Card Slots