diff --git a/packages/docs/src/examples/v-card/misc-card-reveal.vue b/packages/docs/src/examples/v-card/misc-card-reveal.vue index debcb294267..d9de9d4e594 100644 --- a/packages/docs/src/examples/v-card/misc-card-reveal.vue +++ b/packages/docs/src/examples/v-card/misc-card-reveal.vue @@ -10,7 +10,7 @@

adjective

- relating to or dependent on charity; charitable.
+ relating to or dependent on charity; charitable; charitable donations. Pertaining to alms.
"an eleemosynary educational institution."
diff --git a/packages/docs/src/examples/v-card/prop-disabled.vue b/packages/docs/src/examples/v-card/prop-disabled.vue new file mode 100644 index 00000000000..67eaa4ee154 --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-disabled.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/v-card/prop-elevation.vue b/packages/docs/src/examples/v-card/prop-elevation.vue new file mode 100644 index 00000000000..1fa8f6c12b9 --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-elevation.vue @@ -0,0 +1,20 @@ + diff --git a/packages/docs/src/examples/v-card/prop-hover.vue b/packages/docs/src/examples/v-card/prop-hover.vue new file mode 100644 index 00000000000..a0dde483ea3 --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-hover.vue @@ -0,0 +1,20 @@ + diff --git a/packages/docs/src/examples/v-card/prop-href.vue b/packages/docs/src/examples/v-card/prop-href.vue new file mode 100644 index 00000000000..2d9bc84429d --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-href.vue @@ -0,0 +1,12 @@ + diff --git a/packages/docs/src/examples/v-card/prop-image.vue b/packages/docs/src/examples/v-card/prop-image.vue new file mode 100644 index 00000000000..c4117027a79 --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-image.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/v-card/prop-link.vue b/packages/docs/src/examples/v-card/prop-link.vue new file mode 100644 index 00000000000..02457923e6c --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-link.vue @@ -0,0 +1,9 @@ + diff --git a/packages/docs/src/examples/v-card/slot-prepend-append.vue b/packages/docs/src/examples/v-card/slot-prepend-append.vue new file mode 100644 index 00000000000..3824cdedad0 --- /dev/null +++ b/packages/docs/src/examples/v-card/slot-prepend-append.vue @@ -0,0 +1,70 @@ + diff --git a/packages/docs/src/pages/en/components/cards.md b/packages/docs/src/pages/en/components/cards.md index da0b73d5e67..3c30fc7c0b1 100644 --- a/packages/docs/src/pages/en/components/cards.md +++ b/packages/docs/src/pages/en/components/cards.md @@ -110,6 +110,54 @@ Cards can be colored by using any of the builtin colors and contextual names usi +#### Elevation + +The **elevation** property provides up to 24 levels of shadow depth. By default, cards rest at 2dp. + + + +#### Hover + +When using the **hover** prop, the cards will increase its elevation when the mouse is hovered over them. + + + +#### Href + +The card becomes an anchor with the **href** prop. + + + +#### Link + +Add the **link** prop for the same style without adding an anchor. + + + +#### Disabled + +The **disabled** prop can be added in order to prevent a user from interacting with the card. + + + +#### Image + +Apply a specific background image to the Card. + + + +### Slots + +The `v-card` component provides slots that enable you to customize content created by its props or to add additional content. + +Slots give you greater control to customize the content of the `v-card` component while still taking advantage of the easy-to-use props. + +#### Avatar and icon + +You can use the **prepend-avatar**, **append-avatar**, **prepend-icon** and **append-icon** props or the **prepend** and **append** slots to place a [v-icon](/components/icons/) that automatically injects the designated icon. + + + ### Misc #### Card Reveal @@ -132,13 +180,13 @@ With a simple conditional, you can easily add supplementary text that is hidden #### Grids -Using grids, you can create beautiful layouts. +Using [grids](/components/grids/), you can create beautiful layouts. #### Horizontal cards -TODO: better description +You can also play with the card layout using [layout flex](/styles/flex/).