# Cards

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

import {Card} from 'src/components'
1

# Local usage

components: {
  Card
}
1
2
3

# Global usage

Vue.component(Card)
1

# Example

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<template>
  <card style="width: 20rem;">
    <img slot="image" class="card-img-top" :src="imgSrc" alt="Card image cap">
    <div>
      <h4 class="card-title">Card title</h4>
      <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>
      <n-button type="primary">Go somewhere</n-button>
    </div>
  </card>
</template>

<script>
  export default {
    data () {
       return {
         imgSrc: "..."
       }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Content types

# Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag. Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body (default slot contains a card-body class) item, the card title and subtitle are aligned nicely.

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 link Another link
<template>
  <card style="width: 20rem;">
      <h4 class="card-title">Card title</h4>
      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
      <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>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
  </card>
</template>

<script>
  export default {
    data () {
       return {
         imgSrc: "..."
       }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Images

.card-img-top places an image to the top of the card. With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.

Card image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

<template>
 <card style="width: 20rem;">
    <img slot="image" class="card-img-top" :src="imgSrc" alt="Card image cap">
    <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>
 </card>
</template>

<script>
  export default {
    data () {
       return {
         imgSrc: "..."
       }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# List groups

Create lists of content in a card with a flush list group.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<template>
 <card style="width: 20rem;">
   <ul slot="raw-content" 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>
     <li class="list-group-item">Vestibulum at eros</li>
   </ul>
  </card>
</template>

<script>
 export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

2 days ago 
<template>
 <card class="card-nav-tabs text-center" header-classes="card-header-warning">
   <div slot="header" class="mt-2">
     Featured
   </div>
   <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>
   <n-button type="primary">Go somewhere</n-button>
   <div slot="footer" class="card-footer text-muted mb-2">
     2 days ago
   </div>
  </card>
</template>

<script>
 export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Quote card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<template>
 <card class="card-nav-tabs" header-classes="card-header-success">
  <blockquote class="blockquote blockquote-primary mb-0">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
  </blockquote>
  </card>
</template>

<script>
 export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# Text alignment

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>
  <card>
    <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>
    <n-button type="primary">Go somewhere</n-button>
  </card>

  <card class="text-center">
    <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>
    <n-button type="primary">Go somewhere</n-button>
  </card>

  <card class="text-right">
    <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>
    <n-button type="primary">Go somewhere</n-button>
  </card>
</template>

<script>
 export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Blog cards

Trending

"The supreme art of war is to subdue the enemy without fighting."

... Susan B. Anthony
10.4K · 425 
<template>
  <card color="red">
    <h6 class="category-social">
      <i class="fas fa-fire"></i> Trending
    </h6>
    <p class="card-description">
      "The supreme art of war is to subdue the enemy without fighting."
    </p>
    <div class="card-footer">
      <div class="author">
        <img src="https://demos.creative-tim.com/vue-now-ui-kit-pro/img/julie.jpg" alt="..." class="avatar img-raised">
        <span>Susan B. Anthony</span>
      </div>
      <div class="stats stats-right">
        <i class="now-ui-icons ui-2_favourite-28"></i> 10.4K ·
        <i class="now-ui-icons files_single-copy-04"></i> 425
      </div>
    </div>
  </card>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Focus
Stay Focused: Train Your Brain

Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus... 

<template>
  <card type="blog">
    <img slot="image" class="img rounded" src="https://demos.creative-tim.com/vue-now-ui-kit-pro/img/project13.jpg">
    <h6 class="category text-warning">
      <i class="now-ui-icons business_bulb-63"></i> Focus
    </h6>
    <h5 class="card-title">
      <a href="#nuk">Stay Focused: Train Your Brain</a>
    </h5>
    <p class="card-description">
      Our brains are finely attuned to distraction, so today's digital environment makes
      it especially hard to focus...
    </p>
  </card>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Trending
Here Be Dragons

An immersive production studio focused on virtual reality content, has closed a $10 million Series A round led by Discovery Communications

... Lord Alex
342 · 45 
<template>
  <card>
    <h6 class="category text-danger">
      <i class="fas fa-fire"></i> Trending
    </h6>
    <h5 class="card-title">
      <a href="javascript:;">Here Be Dragons</a>
    </h5>
    <p class="card-description">
      An immersive production studio focused on virtual reality content, has closed a $10
      million Series A round led by Discovery Communications
    </p>
    <div class="card-footer">
      <div class="author">
        <img src="https://demos.creative-tim.com/vue-now-ui-kit-pro/img/olivia.jpg" alt="..." class="avatar img-raised">
        <span>Lord Alex</span>
      </div>
      <div class="stats stats-right">
        <i class="now-ui-icons ui-2_favourite-28"></i> 342 ·
        <i class="now-ui-icons files_single-copy-04"></i> 45
      </div>
    </div>
  </card>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# Profile cards

Julie Andrew
Web Designer 
<template>
  <card type="profile">
    <img slot="image" class="img rounded" src="https://demos.creative-tim.com/vue-now-ui-kit-pro/img/julie.jpg">
    <a href="javascript:;">
      <h4 class="card-title">Julie Andrew</h4>
    </a>
    <h6 class="card-category text-info">
      Web Designer
    </h6>
    <div class="card-footer">
      <a href="javascript:;" class="btn btn-icon btn-neutral btn-lg btn-twitter"><i
        class="fab fa-twitter"></i></a>
      <a href="javascript:;" class="btn btn-icon btn-neutral btn-lg btn-dribbble"><i
        class="fab fa-dribbble"></i></a>
      <a href="javascript:;" class="btn btn-icon btn-neutral btn-lg btn-instagram"><i
        class="fab fa-instagram"></i></a>
    </div>
  </card>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Alec Mike

Designer

One of the co-founders. Alec drives the technical strategy of the platform, customer support and brand. 

<template>
  <card type="profile">
    <img slot="avatar" class="img img-raised" src="https://demos.creative-tim.com/vue-now-ui-kit-pro/img/mike.jpg">
    <div class="card-body">
      <h4 class="card-title">Alec Mike</h4>
      <h6 class="category text-gray">
        Designer
      </h6>
      <p class="card-description">
        One of the co-founders. Alec drives the technical strategy of the platform, customer
        support and brand.
      </p>
      <div class="card-footer">
        <a href="javascript:;" class="btn btn-icon btn-twitter btn-round"><i
          class="fab fa-twitter"></i></a>
        <a href="javascript:;" class="btn btn-icon btn-facebook btn-round"><i
          class="fab fa-facebook-square"></i></a>
        <a href="javascript:;" class="btn btn-icon btn-google btn-round"><i class="fab fa-google"></i></a>
      </div>
    </div>
  </card>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
CEO / Co-Founder

James Thompson

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

Follow
<template>
  <card type="profile" color="black">
    <img slot="avatar" class="img img-raised" src="https://demos.creative-tim.com/vue-now-ui-kit-pro/img/james.jpg">
    <div>
      <h6 class="card-category">CEO / Co-Founder</h6>
      <h4 class="card-title">James Thompson</h4>
      <p class="card-description">
        Don't be scared of the truth because we need to restart the human foundation in truth.
      </p>
      <a href="javascript:;" class="btn btn-primary btn-round">Follow</a>
    </div>
  </card>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Other cards

# Full background card

How wild Animals live in the National Forest

SPACE.com 20min ago
Environment
<template>
  <card type="background" style="background-image: url('https://demos.creative-tim.com/vue-now-ui-kit-pro/img/bg1.jpg')">
    <div class="card-title text-left">
      <h3>How wild Animals live in the National Forest</h3>
    </div>
    <div class="card-footer text-left">
      <div class="stats">
        <span>
        <i class="now-ui-icons media-2_sound-wave"></i>SPACE.com
        </span>
        <span>
        <i class="now-ui-icons tech_watch-time"></i> 20min ago
        </span>
      </div>
      <div class="stats-link pull-right">
        <a href="javascript:;" class="footer-link">Environment</a>
      </div>
    </div>
  </card>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Pricing card

Alpha Pack

$67

This is good if your company size is between 100 and 299 employees.

Add to Cart
<template>
  <card type="pricing">
    <h6 class="category">Alpha Pack</h6>
    <div class="icon icon-primary">
      <i class="now-ui-icons objects_diamond"></i>
    </div>
    <h3 class="card-title">$67</h3>
    <p class="card-description">
      This is good if your company size is between 100 and 299 employees.
    </p>
    <a href="javascript:;" class="btn btn-primary btn-round">Add to Cart</a>
  </card>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Starter

$ 10

  • 1000 MB
  • 3 email
  • 5 Databases
  • No Support
<template>
  <card type="pricing">
    <h6 class="category">Starter</h6>
    <h1 class="card-title">
      <small>$</small>
      10
    </h1>
    <ul>
      <li><i class="now-ui-icons ui-1_check text-success"></i> 1000 MB</li>
      <li><i class="now-ui-icons ui-1_simple-remove text-danger"></i> 3 email</li>
      <li><i class="now-ui-icons ui-1_simple-remove text-danger"></i> 5 Databases</li>
      <li><i class="now-ui-icons ui-1_simple-remove text-danger"></i> No Support</li>
    </ul>
    <n-button type="primary" round>
      Register
    </n-button>
  </card>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Plain card

Focus
Stay Focused: Train Your Brain

Our brains are finely attuned to distraction, so today's digital environment makes it especially hard to focus... 

<template>
  <card type="blog" plain>
    <img slot="image" class="img rounded img-raised" src="https://demos.creative-tim.com/vue-now-ui-kit-pro/img/project13.jpg">
    <div class="card-body">
      <h6 class="category text-warning">
        <i class="now-ui-icons business_bulb-63"></i> Focus
      </h6>
      <h5 class="card-title">
        <a href="#nuk">Stay Focused: Train Your Brain</a>
      </h5>
      <p class="card-description">
        Our brains are finely attuned to distraction, so today's digital environment makes it
        especially hard to focus...
      </p>
    </div>
  </card>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Card Slots

Name Description
default Content for card body
header Content for card header
image Content for card image (displayed above header)
avatar Content for card avatar (displayed above header)
info Content for card info (displayed above header)
raw-content Slot for content (displayed below body)
footer Content for card footer

← Checkboxes →