diff --git a/elements/rh-tile/docs/20-guidelines.md b/elements/rh-tile/docs/20-guidelines.md index d0415973a3..450337dbb5 100644 --- a/elements/rh-tile/docs/20-guidelines.md +++ b/elements/rh-tile/docs/20-guidelines.md @@ -157,65 +157,146 @@ The vertical height of a tile will increase as more content is added. The vertic ## Best practices -### Link tile actions - -Do not use a link tile if it needs to link to more than one destination. - - - Example of an incorrectly used link tile with a call to action in the body - +### One action per tile + +
+ + + Link tile with one link and selectable tile with radio button + +

Each tile should go to only one destination or have one action.

+ + + + + Link tile with a CTA and a selectable tile with a 'Learn more' link + +

Do not use a tile if you need to include more than one link or action.

+ +
+### Link tile actions -A link tile should not be used as a button. A link tile is akin to a call to action and should navigate a user somewhere else. +
+ + + Link tile with a link to the 'Talk to a Red Hatter' form and description + +

Link tiles should navigate users to another page or section.

+ + + + + Link tile that uses 'Submit' as the heading text + +

A link tile should not be used as a button.

+ +
+ +### Tile variants in groups + + + + Two selectable tiles in a group + + +

Use the same variants for a tile group.

+ + + + + A default link tile and a compact link tile in a group + - - Example of an incorrectly used link tile with “submit” as a heading and no other text - +

Avoid using different variants or sub-variants in one tile group.

+ +### Tile content -### Tile groups + + + Two link tiles with headings and body copy + -Do not use different variants of a tile in one tile group. +

When grouped, use the same number of content slots to make them easy to scan.

+ - - Example of an incorrectly styled tile group with a default link tile and a compact link tile + + One link tile with a heading and body copy and one link tile with an image, title, heading, and body copy - + height="392"> + -When grouped, use the same number of content slots to make them easy to scan. +

Do not use a different number of content slots in grouped tiles.

+ - - Example of an incorrectly styled tile group with one tile that has only text and a second tile that includes a logo and a title + + Two link tiles with images that have the same height - + height="320"> + -If tiles have images, the images should have the same height. This will help the headings of each tile align vertically which also helps users scan more easily. +

If grouped tiles have images, the images should have the same height. This will keep the headings of each tile aligned, which helps users scan more easily.

+ - - Example of an incorrectly styled tile group with two tiles using different image heights + + Two link tiles, one with a large image and one with a small image - + +

Images for tiles in a group should not be different heights.

+ ### Footer content -The footer of a link tile or selectable tile should not include calls to action, links, or buttons, but it can include non-interactive elements, like tags or badges. Ideally, footer content should be able to fit on one line, but it can wrap to two when necessary. - - - Example of incorrectly adding a link in the footer of a link tile - +
+ + + Link tile with a tag in the footer + +

The footer of a tile can include non-interactive elements, like unlinked tags or badges. Ideally, footer content should be able to fit on one line, but it can wrap to two when necessary.

+ + + + + Link tile with a link in the footer + +

Do not use a tile if you need to include more than one link or action.

+ +
\ No newline at end of file diff --git a/elements/rh-tile/docs/best-practices-link-tile-actions-1.png b/elements/rh-tile/docs/best-practices-link-tile-actions-1.png deleted file mode 100644 index 64c6698b6d..0000000000 Binary files a/elements/rh-tile/docs/best-practices-link-tile-actions-1.png and /dev/null differ diff --git a/elements/rh-tile/docs/best-practices-link-tile-actions-2.png b/elements/rh-tile/docs/best-practices-link-tile-actions-2.png deleted file mode 100644 index 03dc025005..0000000000 Binary files a/elements/rh-tile/docs/best-practices-link-tile-actions-2.png and /dev/null differ diff --git a/elements/rh-tile/docs/best-practices-tile-footer-content.png b/elements/rh-tile/docs/best-practices-tile-footer-content.png deleted file mode 100755 index bc5f19b5f7..0000000000 Binary files a/elements/rh-tile/docs/best-practices-tile-footer-content.png and /dev/null differ diff --git a/elements/rh-tile/docs/best-practices-tile-groups-1.png b/elements/rh-tile/docs/best-practices-tile-groups-1.png deleted file mode 100755 index 9250ba332a..0000000000 Binary files a/elements/rh-tile/docs/best-practices-tile-groups-1.png and /dev/null differ diff --git a/elements/rh-tile/docs/best-practices-tile-groups-2.png b/elements/rh-tile/docs/best-practices-tile-groups-2.png deleted file mode 100755 index 235f11485b..0000000000 Binary files a/elements/rh-tile/docs/best-practices-tile-groups-2.png and /dev/null differ diff --git a/elements/rh-tile/docs/best-practices-tile-groups-3.png b/elements/rh-tile/docs/best-practices-tile-groups-3.png deleted file mode 100755 index 0fcfcef89d..0000000000 Binary files a/elements/rh-tile/docs/best-practices-tile-groups-3.png and /dev/null differ diff --git a/elements/rh-tile/docs/tile-best-practices-actions-1-do.svg b/elements/rh-tile/docs/tile-best-practices-actions-1-do.svg new file mode 100644 index 0000000000..fd7a558c46 --- /dev/null +++ b/elements/rh-tile/docs/tile-best-practices-actions-1-do.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tile/docs/tile-best-practices-actions-1-dont.svg b/elements/rh-tile/docs/tile-best-practices-actions-1-dont.svg new file mode 100644 index 0000000000..b8665376a8 --- /dev/null +++ b/elements/rh-tile/docs/tile-best-practices-actions-1-dont.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tile/docs/tile-best-practices-actions-2-do.svg b/elements/rh-tile/docs/tile-best-practices-actions-2-do.svg new file mode 100644 index 0000000000..e41df133ec --- /dev/null +++ b/elements/rh-tile/docs/tile-best-practices-actions-2-do.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/elements/rh-tile/docs/tile-best-practices-actions-2-dont.svg b/elements/rh-tile/docs/tile-best-practices-actions-2-dont.svg new file mode 100644 index 0000000000..2063df8cb4 --- /dev/null +++ b/elements/rh-tile/docs/tile-best-practices-actions-2-dont.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/elements/rh-tile/docs/tile-best-practices-footer-content-do.svg b/elements/rh-tile/docs/tile-best-practices-footer-content-do.svg new file mode 100644 index 0000000000..15e49b3b6c --- /dev/null +++ b/elements/rh-tile/docs/tile-best-practices-footer-content-do.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tile/docs/tile-best-practices-footer-content-dont.svg b/elements/rh-tile/docs/tile-best-practices-footer-content-dont.svg new file mode 100644 index 0000000000..ee230c2e9d --- /dev/null +++ b/elements/rh-tile/docs/tile-best-practices-footer-content-dont.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/elements/rh-tile/docs/tile-best-practices-image-sizes-do.png b/elements/rh-tile/docs/tile-best-practices-image-sizes-do.png new file mode 100644 index 0000000000..3d578a10ab Binary files /dev/null and b/elements/rh-tile/docs/tile-best-practices-image-sizes-do.png differ diff --git a/elements/rh-tile/docs/tile-best-practices-image-sizes-dont.png b/elements/rh-tile/docs/tile-best-practices-image-sizes-dont.png new file mode 100644 index 0000000000..e6be8a0847 Binary files /dev/null and b/elements/rh-tile/docs/tile-best-practices-image-sizes-dont.png differ diff --git a/elements/rh-tile/docs/tile-best-practices-tile-content-do.svg b/elements/rh-tile/docs/tile-best-practices-tile-content-do.svg new file mode 100644 index 0000000000..2fe8f5fb20 --- /dev/null +++ b/elements/rh-tile/docs/tile-best-practices-tile-content-do.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tile/docs/tile-best-practices-tile-content-dont.svg b/elements/rh-tile/docs/tile-best-practices-tile-content-dont.svg new file mode 100644 index 0000000000..2839f49bf0 --- /dev/null +++ b/elements/rh-tile/docs/tile-best-practices-tile-content-dont.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tile/docs/tile-best-practices-variants-in-groups-do.svg b/elements/rh-tile/docs/tile-best-practices-variants-in-groups-do.svg new file mode 100644 index 0000000000..b9797ff109 --- /dev/null +++ b/elements/rh-tile/docs/tile-best-practices-variants-in-groups-do.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-tile/docs/tile-best-practices-variants-in-groups-dont.svg b/elements/rh-tile/docs/tile-best-practices-variants-in-groups-dont.svg new file mode 100644 index 0000000000..bd4f8d40d1 --- /dev/null +++ b/elements/rh-tile/docs/tile-best-practices-variants-in-groups-dont.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +