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
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -24,11 +24,11 @@ The Connections dashboard is made up of cards that each serve a specific purpose
24
24
25
25
**Medium card Layout:**
26
26
27
-
:::image type="content" source="../../../images/viva-design/img-medium-card-layout.png" alt-text="Diagram showing the card container and card elements, showing the Time off and paid time off available options.":::
27
+
:::image type="content" source="../../../images/viva-design/img-medium-card-layout.png" alt-text="Diagram showing the medium card container and card elements, showing the Time off and paid time off available options.":::
28
28
29
29
**Large card layout:**
30
30
31
-
:::image type="content" source="../../../images/viva-design/img-large-card-layout.png" alt-text="Diagram showing the card container and card elements, showing the Time off and paid time off available options.":::
31
+
:::image type="content" source="../../../images/viva-design/img-large-card-layout.png" alt-text="Diagram showing the large card container and card elements, showing the Time off and paid time off available options.":::
32
32
33
33
The first section is the **card bar**, which includes the card’s icon and title.
34
34
@@ -86,7 +86,7 @@ While the generic card layout offers developers significant flexibility in custo
86
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="Generic card with image permutation 2."::: |
87
87
| 3 | Yes | Text | Empty | Text Input | New layout | :::image type="content" source="../../../images/viva-design/img-permutation-03-card-layout.png" alt-text="Generic card with image permutation 3."::: |
88
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="Generic card with image 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="Generic card with image p
89
+
| 5 | Yes | Text | Text input | Empty | New layout | :::image type="content" source="../../../images/viva-design/img-permutation-05-card-layout.png" alt-text="Generic card with image permutation 5."::: |
90
90
91
91
> [!NOTE]
92
92
> When using images on a card, note: Images draw the viewer's eye, so use images carefully either to create recognition of a familiar app or website or increase the overall visual prominence of the card on the dashboard. The image should meaningfully connect to the heading and/or title.
@@ -127,7 +127,7 @@ While the generic card layout offers developers significant flexibility in custo
127
127
128
128
This scenario-focused card template allows developers to quickly create a search experience for the users. Examples include people, messages or chats, files etc.
129
129
130
-
:::image type="content" source="../../../images/viva-design/img-search-template.png" alt-text="Screenshot of the card, primary button, and secondary button interactions.":::
130
+
:::image type="content" source="../../../images/viva-design/img-search-template.png" alt-text="Screenshot of the search card, primary button, and secondary button interactions.":::
131
131
132
132
## Interaction
133
133
@@ -137,7 +137,7 @@ There are three possible ways to interact with a card:
137
137
- Primary button
138
138
- Secondary button
139
139
140
-
:::image type="content" source="../../../images/viva-design/img_card_interactions.jpg" alt-text="Screenshot of the card, primary button, and secondary button interactions.":::
140
+
:::image type="content" source="../../../images/viva-design/img_card_interactions.jpg" alt-text="Screenshot of the image card, primary button, and secondary button interactions.":::
141
141
142
142
Each of these interactions can be customized. Use these to perform an instant action, send a request to the server, open a quick view (add link), link to a Teams app, open an external website and so on.
0 commit comments