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
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -39,7 +39,7 @@ Each dashboard card has the following elements:
39
39
40
40
When adding the title and heading, ensure the text does not truncate and can fit in the card width on both desktop and mobile in both card sizes (more information about sizes is given below) and all languages used. Truncated text can hide key information that might be necessary for the end user to complete the task. For the title, in most cases, a length of 10-12 characters should fit the card width well.
41
41
42
-
:::image type="content" source="../../../images/viva-design/img_card_truncation.jpg" alt-text="Diagram that shows the submit time of... and Time off options, with the Time off option being the recommended option.":::
42
+
:::image type="content" source="../../../images/viva-design/img_card_truncation.jpg" alt-text="Diagram that shows the submit time of and Time off options, with the Time off option being the recommended option.":::
43
43
44
44
### Layouts and sizes
45
45
@@ -67,7 +67,7 @@ Use when the description can add informational value to the heading and can make
67
67
68
68
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.
69
69
70
-
:::image type="content" source="../../../images/viva-design/img_card_image.jpg" alt-text="Showing the medium and large icons showing how an image appears for the medium card layout versus how it appears for the large card layout.":::
70
+
:::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.":::
71
71
72
72
## Interaction
73
73
@@ -99,7 +99,7 @@ Here are the best practices for designing card interactions:
99
99
100
100
Here are some example cards for how these layouts can be used
101
101
102
-
:::image type="content" source="../../../images/viva-design/img_card_collections.jpg" alt-text="Screenshot showing various example cards, including cards for Shifts, Tasks, COVID-19, and Tutorials.":::
102
+
:::image type="content" source="../../../images/viva-design/img_card_collections.jpg" alt-text="Screenshot showing various example cards, including cards for Shifts, Tasks, COVID19, and Tutorials.":::
Copy file name to clipboardExpand all lines: docs/spfx/viva/design/quick-view-samples.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -51,7 +51,7 @@ Design for presenting inventory details from warehouse.
51
51
52
52
* Sample at [GitHub](https://github.com/pnp/AdaptiveCards-Templates/tree/main/samples/inventory)
53
53
54
-
:::image type="content" source="../../../images/viva-design/samples/inventory.png" alt-text="Screenshot of a sample inventory details card from a warehouse, showing Distribution center # 73's top selling items.":::
54
+
:::image type="content" source="../../../images/viva-design/samples/inventory.png" alt-text="Screenshot of a sample inventory details card from a warehouse, showing Distribution center number 73's top selling items.":::
0 commit comments