USWDS-Vue

# Card

This is the title
Sub title

This is a card with some content.

<us-card title="This is the title" sub-title="Sub title">
    This is a card with some content.
</us-card>
1
2
3

Add custom html content using the title, and footer slots. See the VueJS docs on slots here (opens new window)

This is a card with a custom footer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A custom html title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

<us-card>
    <template #title>
        <h2>A <i>custom</i> <i class="fas fa-rocket"></i> html title</h2>
    </template>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <template #footer>
        <us-button variant="primary" block>Visit Florida Keys</us-button>
    </template>
</us-card>
1
2
3
4
5
6
7
8
9
10
11
12

# Images

# Vertical Image Placement

Set the img-pos prop to either top or bottom for vertical image placement.

Card with media
Image Top

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

Card with media
Image Bottom

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

# Horizontal Image Placement

Likewise, set the img-pos prop to either left or right for vertical image placement.

Card with media
Image Left

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

Card with media
Image Right

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

# Card Groups and Grids

As uswds-vue is built on bootstrap now, you can directly use bootstrap to easily group your cards. For example, creating a grid or group is easy and you can see how in the following examples. For more information, see Bootstrap docs on Cards here (opens new window)

# Card Group

Card with media

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

Simple card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

Another Simple card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

# Card Grid

Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.

Card in a grid

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

Card in a grid

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

Card in a grid

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.

Card in a grid

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos. 

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <us-card 
        title="Card in a grid" 
        img-src="https://www.fillmurray.com/640/360"
    >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.
    </us-card> 
  </div>
  <div class="col">
    <us-card 
        title="Card in a grid" 
        img-src="https://www.fillmurray.com/640/360"
    >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.
    </us-card> 
  </div>
  <div class="col">
    <us-card 
        title="Card in a grid" 
        img-src="https://www.fillmurray.com/640/360"
    >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.
    </us-card> 
  </div>
  <div class="col">
    <us-card 
        title="Card in a grid" 
        img-src="https://www.fillmurray.com/640/360"
    >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.
    </us-card> 
  </div>
</div>
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
29
30
31
32
33
34

# Contextual variants

A basic card

Default Card with no variant

A info card

Card with info variant

A primary card

Card with primary variant

A secondary card

Card with secondary variant

A success card

Card with success variant

A warning card

Card with warning variant

A danger card

Card with danger variant

A light card

Card with light variant

A dark card

Card with dark variant

# Component Reference

# <us-card>

# Properties

Property Type Default Description
title string null The card title, or omit for none
variant string info Applies one of the contextual color variants
img-src string null Specify a image source
img-alt string null Image alt text
img-pos string 'top' Specify the image position, can be one of; top, left, right, bottom

# Slots

Slot Name Arguments Description
title none Content for the header slot
footer none Content for the footer slot

# Further Reading

See Card documentation at USWDS (opens new window) See Card documentation at Bootstrap (opens new window)

Last Updated: 2/11/2022, 5:10:06 PM

← Image →