Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(docs):avt-1-guidelines-pictograms-usage-img #2149

Merged
merged 3 commits into from
Feb 23, 2021
Merged

fix(docs):avt-1-guidelines-pictograms-usage-img #2149

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c7f7db5
fix(docs):avt-1-guidelines-pictograms-usage-img
andreancardona Feb 19, 2021
0ed853a
Merge branch 'master' into avt-1-guidelines-pictograms-usage-img-alt
alisonjoseph Feb 23, 2021
0f04fd8
Merge branch 'master' into avt-1-guidelines-pictograms-usage-img-alt
kodiakhq[bot] Feb 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions src/pages/guidelines/pictograms/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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>
Expand All @@ -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>

Expand All @@ -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>
Expand Down