fix(docs):avt-1-guidelines-pictograms-usage-img (carbon-design-system…

…#2149) Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
natashadecoste · May 19, 2021 · 3ffb5b2 · 3ffb5b2
1 parent 891d644
commit 3ffb5b2
Showing 1 changed file with 15 additions and 12 deletions.
diff --git a/src/pages/guidelines/pictograms/usage.mdx b/src/pages/guidelines/pictograms/usage.mdx
@@ -102,7 +102,7 @@ Pictograms are optically aligned to the center of the icon grid within the
 boundary box. Centering ensures all pictograms will be aligned correctly when
 exported and used side by side.
 
-![](images/15_Alignment_1.svg)
+![Alignment](images/15_Alignment_1.svg)
 
 ### Containers
 
@@ -126,36 +126,36 @@ based on the padding size.
 <DoDontRow>
 <DoDont caption="Do follow the clearance rule to allow for legibility and touch.">
 
-![](images/16_Containers_3_do.svg)
+![Containers](images/16_Containers_3_do.svg)
 
 </DoDont>
 <DoDont type="dont" caption="Don't collapse the pictogram clearance area.">
 
-![](images/16_Containers_4_dont.svg)
+![Containers don't](images/16_Containers_4_dont.svg)
 
 </DoDont>
 </DoDontRow>
 <DoDontRow>
 <DoDont caption="Do use accepted shapes: circle or square for containers.">
 
-![](images/16_Containers_5_do.svg)
+![Containers do](images/16_Containers_5_do.svg)
 
 </DoDont>
 <DoDont type="dont" caption="Don’t create new shapes for containers.">
 
-![](images/16_Containers_6_dont.svg)
+![Containers don't](images/16_Containers_6_dont.svg)
 
 </DoDont>
 </DoDontRow>
 <DoDontRow>
 <DoDont caption="Do always optically center align pictograms in their containers.">
 
-![](images/16_Containers_7_do.svg)
+![Containers do](images/16_Containers_7_do.svg)
 
 </DoDont>
 <DoDont type="dont" caption="Don’t crop pictograms in container.">
 
-![](images/16_Containers_8_dont.svg)
+![Containers don't](images/16_Containers_8_dont.svg)
 
 </DoDont>
 </DoDontRow>
@@ -168,23 +168,26 @@ on 1/4 of the scaled grid size. The padding can be increased by increments of
 
 <ArtDirection>
 
-![](images/17_Clearance_1-mobile.svg) ![](images/17_Clearance_1.svg)
+![Clearance 1 mobile](images/17_Clearance_1-mobile.svg)
+![Clearance 1 mobile](images/17_Clearance_1.svg)
 
 </ArtDirection>
 
 <Caption>Padding starts at the edge of the container shape.</Caption>
 
 <ArtDirection>
 
-![](images/17_Clearance_2-mobile.svg) ![](images/17_Clearance_2.svg)
+![Clearance 2 mobile](images/17_Clearance_2-mobile.svg)
+![Clearance 2 mobile](images/17_Clearance_2.svg)
 
 </ArtDirection>
 
 <Caption>Padding is the same for both circle and square containers.</Caption>
 
 <ArtDirection>
 
-![](images/17_Clearance_3-mobile.svg) ![](images/17_Clearance_3.svg)
+![Clearance 3 mobile](images/17_Clearance_3-mobile.svg)
+![Clearance 3 mobile](images/17_Clearance_3.svg)
 
 </ArtDirection>
 
@@ -195,12 +198,12 @@ on 1/4 of the scaled grid size. The padding can be increased by increments of
 <DoDontRow>
 <DoDont caption="Do keep pictograms at scale and optically center in container when necessary.">
 
-![](images/17_Clearance_4_do.svg)
+![Clearance 4 mobile](images/17_Clearance_4_do.svg)
 
 </DoDont>
 <DoDont type="dont" caption="Don’t resize pictograms outside of accepted proportions.">
 
-![](images/17_Clearance_5_dont.svg)
+![Clearance 5 mobile](images/17_Clearance_5_dont.svg)
 
 </DoDont>
 </DoDontRow>