# 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

# 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 →