# 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>
2
3
# Custom Title & Footer using slots
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>
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="/built-to-grow--alt.jpg"
>
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="/built-to-grow--alt.jpg"
>
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="/built-to-grow--alt.jpg"
>
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="/built-to-grow--alt.jpg"
>
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>
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)