diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/card-view/card-view.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/card-view/card-view.md index 2e408fffcb..31f32121fc 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/card-view/card-view.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/card-view/card-view.md @@ -8,6 +8,7 @@ A **card view** is a grid of cards in a gallery to facilitate browsing. Card vie example of card view +## Usage Use a card view to: - Display items in a data set that are best identified by a graphic or other visual representation. - Make information easier to visualize and compare. @@ -58,12 +59,19 @@ If an action can be performed globally on multiple cards, or if it leads to mult example of card view with global action toolbar - #### Action card You may use an extra-small empty state inside a card to present users with another way to add more cards to the existing card view. We recommend using this feature **in addition to** a primary button in the toolbar, to ensure that the user is still able to perform the action from any page of the card view. Place the action card where a new card will be added, most likely as the very first or last card in the card view. example of card view with addition card and empthy state +#### Expand all action +In cases where cards are expandable, include an expand all action to the top left of the page, below the divider. + +card view with expand all cards action below the divider + +Once expanded, the action text changes from “expand all” to “collapse all”. + +card view with collapse all cards action below the divider ### Bottom pagination If your card view has multiple pages, add a footer with [pagination](/components/pagination). diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/card-view/img/collapse_all.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/card-view/img/collapse_all.png new file mode 100644 index 0000000000..bd35526b88 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/card-view/img/collapse_all.png differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/card-view/img/expand_all.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/card-view/img/expand_all.png new file mode 100644 index 0000000000..dde2b53cb3 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/card-view/img/expand_all.png differ