Skip to content

Commit f6838db

Browse files
kaedwardmmenestr
andauthored
Added expand/collapse all cards info (#3815)
* Added expand/collapse all cards info * Update card-view.md * Update card-view.md --------- Co-authored-by: Margot <51165119+mmenestr@users.noreply.github.com>
1 parent 8ccceaf commit f6838db

3 files changed

Lines changed: 9 additions & 1 deletion

File tree

packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/card-view/card-view.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ A **card view** is a grid of cards in a gallery to facilitate browsing. Card vie
88

99
<img src="./img/card-view.png" alt="example of card view" width="1500"/>
1010

11+
## Usage
1112
Use a card view to:
1213
- Display items in a data set that are best identified by a graphic or other visual representation.
1314
- 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
5859

5960
<img src="./img/cardview-globalactions.png" alt="example of card view with global action toolbar" width="1500"/>
6061

61-
6262
#### Action card
6363
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.
6464

6565
<img src="./img/cardview-add-emptystate.png" alt="example of card view with addition card and empthy state" width="1500" />
6666

67+
#### Expand all action
68+
In cases where cards are expandable, include an expand all action to the top left of the page, below the divider.
69+
70+
<img src="./img/expand_all.png" alt="card view with expand all cards action below the divider" />
71+
72+
Once expanded, the action text changes from “expand all” to “collapse all”.
73+
74+
<img src="./img/collapse_all.png" alt="card view with collapse all cards action below the divider" />
6775

6876
### Bottom pagination
6977
If your card view has multiple pages, add a footer with [pagination](/components/pagination).
343 KB
Loading
105 KB
Loading

0 commit comments

Comments
 (0)