You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/spfx/viva/design/designing-card.md
+16-80Lines changed: 16 additions & 80 deletions
Original file line number
Diff line number
Diff line change
@@ -48,76 +48,12 @@ The third section is referred to as the **body**.
48
48
- The body can contain elements such as text input, a search box, or a text description.
49
49
50
50
> [!NOTE]
51
-
> Use text when the description can addadds valuable secondary informational value to the heading and can make it easier to understand the purpose of the card. Avoid repeating information already communicated in the heading.
51
+
> Use text when the description can add valuable secondary informational value to the heading and can make it easier to understand the purpose of the card. Avoid repeating information already communicated in the heading.
52
52
53
53
Finally, the last section of the card is the **footer**.
54
54
55
55
- The footer section can contain an action button, text input, or a search footer.
56
56
57
-
### Layouts and sizes
58
-
59
-
There are three types of cards layouts available to choose from.
60
-
61
-
- Heading
62
-
- Heading + Image
63
-
- Heading + Description
64
-
- Heading + Textbox
65
-
66
-
All layouts come in two sizes: medium or large. Card size will determine how the space in the dashboard is utilized. It's useful to start with medium size cards. Use large size card if they are needed to showcase additional info that does not fit in the medium size.
67
-
68
-
#### Heading
69
-
70
-
Use when the heading is sufficient to communicate the key information in the card.
71
-
72
-
:::image type="content" source="../../../images/viva-design/img_card_heading.jpg" alt-text="Diagram of the Time Off task and shows the Heading relationship between the two tasks.":::
73
-
74
-
#### Heading + Description
75
-
76
-
Use when the description can add informational value to the heading and can make it easier to understand the purpose of the card. Avoid repeating information already communicated in the heading.
77
-
78
-
:::image type="content" source="../../../images/viva-design/img_card_description.jpg" alt-text="Diagram of the two Time Off tasks and showing the Heading and Description for Medium and Large tasks.":::
79
-
80
-
### Heading + Image
81
-
82
-
Images draw viewer's eye, so use images carefully either to create recognition of a familiar app or website, or increase overall visual prominence of the card on the dashboard. The image should meaningfully connect to the heading and/or title.
83
-
84
-
:::image type="content" source="../../../images/viva-design/img_card_image.jpg" alt-text="Screenshot of the medium and large icons showing how an image appears for the medium card layout versus how it appears for the large card layout.":::
85
-
86
-
### Heading + Textbox
87
-
88
-
Use when you need to have input textbox capabilities on the card e.g. search or other related scenario.
89
-
90
-
:::image type="content" source="../../../images/viva-design/img-search-box-card.png" alt-text="Screenshot of a text box powered card layout.":::
91
-
92
-
## Custom card layouts
93
-
94
-
In addition to the defined card layout, we provide card components that you can combine to customize the card layout, within the limits of the design language and rules.
95
-
96
-
There are a number of pre-defined combinations of components that you can choose from to create different card layouts.
97
-
98
-
:::image type="content" source="../../../images/viva-design/img-custom-card-layouts.png" alt-text="Screenshot of the medium and large icons showing how an image appears for the medium card layout versus how it appears for the large card layout.":::
99
-
100
-
These are the possible combinations.
101
-
102
-
| image | card bar | header | body | footer | Recommendations |
| no | yes | text | text | actions | Use the “Heading + Description” card layout |
117
-
| no | yes | text | text | empty | Use the “Heading + Description” card layout |
118
-
| no | yes | text | input | actions | Allowed custom card layout permutation |
119
-
| no | yes | text | input | empty | Allowed custom card layout permutation |
120
-
121
57
## Card components and layouts
122
58
123
59
As part of the SPFX 1.18, we introduced card components to enhance Adaptive Card Extension layouts. These components are the building blocks of card layouts, representing individual elements within a card. Here are **card components** available:
@@ -144,30 +80,30 @@ While the generic card layout offers developers significant flexibility in custo
144
80
145
81
**Examples of the generic card with an image (Allowed combinations)**
146
82
147
-
|Permutation| Card bar |headerHeader| Body | Footer | Notes | Sample Card |
83
+
|Combination| Card bar |Header| Body | Footer | Notes | Sample Card |
| 1 |yes|text|empty| Action button | Previously known as the Image template | :::image type="content" source="../../../images/viva-design/img-permutation-01-card-layout.png" alt-text="Permutation 1."::: |
150
-
| 2 |yes|text|empty| Empty | Previously known as the Image template | :::image type="content" source="../../../images/viva-design/img-permutation-02-card-layout.png" alt-text="Permutation 2."::: |
151
-
| 3 |yes|text|empty| Text Input | New layout | :::image type="content" source="../../../images/viva-design/img-permutation-03-card-layout.png" alt-text="Permutation 3."::: |
152
-
| 4 |yes|text| Text input | Action Button | New layout | :::image type="content" source="../../../images/viva-design/img-permutation-04-card-layout.png" alt-text="Permutation 4."::: |
153
-
| 5 |yes|text| Text input | Empty | New layout | :::image type="content" source="../../../images/viva-design/img-permutation-05-card-layout.png" alt-text="Permutation 5."::: |
85
+
| 1 |Yes|Text|Empty| Action button | Previously known as the Image template | :::image type="content" source="../../../images/viva-design/img-permutation-01-card-layout.png" alt-text="Permutation 1."::: |
86
+
| 2 |Yes|Text|Empty| Empty | Previously known as the Image template | :::image type="content" source="../../../images/viva-design/img-permutation-02-card-layout.png" alt-text="Permutation 2."::: |
87
+
| 3 |Yes|Text|Empty| Text Input | New layout | :::image type="content" source="../../../images/viva-design/img-permutation-03-card-layout.png" alt-text="Permutation 3."::: |
88
+
| 4 |Yes|Text| Text input | Action Button | New layout | :::image type="content" source="../../../images/viva-design/img-permutation-04-card-layout.png" alt-text="Permutation 4."::: |
89
+
| 5 |Yes|Text| Text input | Empty | New layout | :::image type="content" source="../../../images/viva-design/img-permutation-05-card-layout.png" alt-text="Permutation 5."::: |
154
90
155
91
> [!NOTE]
156
92
> When using images on a card, note: Images draw viewer's eye, so use images carefully either to create recognition of a familiar app or website, or increase overall visual prominence of the card on the dashboard. The image should meaningfully connect to the heading and/or title.
157
93
158
94
159
95
**Examples of generic cards without images (Allowed combinations)**
160
96
161
-
|Permutation | Card bar |headerHeader| Body | Footer | Notes | Sample Card |
97
+
|Combination| Card bar |Header| Body | Footer | Notes | Sample Card |
| 1 |yes|text|empty| Action button | Previously known as the Basic Text | :::image type="content" source="../../../images/viva-design/img-examples-01-card-withoutimage.png" alt-text="Permutation 1."::: |
164
-
| 2 |yes|text|empty| Empty | Previously known as the Basic Text | :::image type="content" source="../../../images/viva-design/img-examples-02-card-withoutimage.png" alt-text="Permutation 2."::: |
165
-
| 3 |yes|text|empty| Text Input | New layout | :::image type="content" source="../../../images/viva-design/img-examples-03-card-withoutimage.png" alt-text="Permutation 3."::: |
166
-
| 4 |yes|text| Text | Action Button | Previously known as the Primary Text | :::image type="content" source="../../../images/viva-design/img-examples-04-card-withoutimage.png" alt-text="Permutation 4."::: |
167
-
| 5 |yes|text| Text | Empty | Previously known as the Primary Text | :::image type="content" source="../../../images/viva-design/img-examples-05-card-withoutimage.png" alt-text="Permutation 5."::: |
168
-
| 6 |yes|text| Text | Text Input | New layout | :::image type="content" source="../../../images/viva-design/img-examples-06-card-withoutimage.png" alt-text="Permutation 6."::: |
169
-
| 7 |yes|text| Text input | Action Button | New layout | :::image type="content" source="../../../images/viva-design/img-examples-07-card-withoutimage.png" alt-text="Permutation 7."::: |
170
-
| 8 |yes|text| Text input | Empty | New layout | :::image type="content" source="../../../images/viva-design/img-examples-08-card-withoutimage.png" alt-text="Permutation 8."::: |
99
+
| 1 |Yes|Text|Empty| Action button | Previously known as the Basic Text | :::image type="content" source="../../../images/viva-design/img-examples-01-card-withoutimage.png" alt-text="Permutation 1."::: |
100
+
| 2 |Yes|Text|Empty| Empty | Previously known as the Basic Text | :::image type="content" source="../../../images/viva-design/img-examples-02-card-withoutimage.png" alt-text="Permutation 2."::: |
101
+
| 3 |Yes|Text|Empty| Text Input | New layout | :::image type="content" source="../../../images/viva-design/img-examples-03-card-withoutimage.png" alt-text="Permutation 3."::: |
102
+
| 4 |Yes|Text| Text | Action Button | Previously known as the Primary Text | :::image type="content" source="../../../images/viva-design/img-examples-04-card-withoutimage.png" alt-text="Permutation 4."::: |
103
+
| 5 |Yes|Text| Text | Empty | Previously known as the Primary Text | :::image type="content" source="../../../images/viva-design/img-examples-05-card-withoutimage.png" alt-text="Permutation 5."::: |
104
+
| 6 |Yes|Text| Text | Text Input | New layout | :::image type="content" source="../../../images/viva-design/img-examples-06-card-withoutimage.png" alt-text="Permutation 6."::: |
105
+
| 7 |Yes|Text| Text input | Action Button | New layout | :::image type="content" source="../../../images/viva-design/img-examples-07-card-withoutimage.png" alt-text="Permutation 7."::: |
106
+
| 8 |Yes|Text| Text input | Empty | New layout | :::image type="content" source="../../../images/viva-design/img-examples-08-card-withoutimage.png" alt-text="Permutation 8."::: |
171
107
172
108
> [!NOTE]
173
109
> Search box and search footer components can't be used in generic card template layout.
0 commit comments