diff --git a/docs/patterns/announcement/index.md b/docs/patterns/announcement/index.md
index 429fa9bb03..3c334be33b 100644
--- a/docs/patterns/announcement/index.md
+++ b/docs/patterns/announcement/index.md
@@ -72,6 +72,14 @@ its objective is.
alt="One announcement banner showing center-aligned content and one showing left and right-aligned content",
src="./announcement-usage-content.svg" %}
+### Character count
+The recommended maximum character count for the elements of an announcement are listed below and include spaces.
+
+| Element {style="width: 50%" } | Character count |
+|-------------------------------|-----------------|
+| Text | 60 |
+| Call to action | 20 |
+
## Best practices
Do not position the announcement banner below the navigation.
diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md
index 27cfd359a6..7c872b8c20 100644
--- a/docs/patterns/card/index.md
+++ b/docs/patterns/card/index.md
@@ -215,3 +215,14 @@ For more information, please see the [card css custom properties](/elements/card
}
+## Usage
+
+### Character count
+ The recommended maximum character count for the elements of a card are listed below and include spaces.
+
+ | Element {style="width: 50%" } | Character count |
+ |-------------------------------|-----------------|
+ | Title | 20 |
+ | Headline | 50 |
+ | Body text | 165 |
+ | Footer | 55 |
\ No newline at end of file
diff --git a/docs/patterns/disclosure/index.md b/docs/patterns/disclosure/index.md
index 94d1f98669..0c493c05fc 100644
--- a/docs/patterns/disclosure/index.md
+++ b/docs/patterns/disclosure/index.md
@@ -109,6 +109,13 @@ section text label. It may contain the same elements that can also be used in
other sections of a page, like text, cards, images, etc. To maintain optimal
readability, text shouldn’t exceed eight grid columns.
+### Character count
+The label should have fewer characters to help users make sense of what the content will be when they expand a content area.
+
+| Element {style="width: 50%" } | Character count |
+| ----------------------------- | --------------- |
+| Label | 65 |
+
### Jump links
On small screens, vertical [Jump links](/elements/jump-links/) can be wrapped in
diff --git a/docs/patterns/link/index.md b/docs/patterns/link/index.md
index d9552d4078..4929227616 100644
--- a/docs/patterns/link/index.md
+++ b/docs/patterns/link/index.md
@@ -105,6 +105,10 @@ Link content needs to be written clearly in order to be understood, therefore wr
alt="Link component usage, content",
src="./usage-content.svg" %}
+### Character count
+
+There is no maximum character count for a link. The link text should be long enough to be descriptive and no longer.
+
### Images
Photos or images can be links as long as there is supporting content nearby explaining that a selection can be made, like a headline, content, or Call to action link. Do not hide links in photos or images otherwise a user will miss the opportunity to make a selection if they cannot see the link.
diff --git a/docs/patterns/sticky-card/index.md b/docs/patterns/sticky-card/index.md
index 7e6621ed1f..f3792c1f46 100644
--- a/docs/patterns/sticky-card/index.md
+++ b/docs/patterns/sticky-card/index.md
@@ -79,6 +79,18 @@ A sticky card has limited vertical height, so keep content short and only includ
alt="Sticky card content sections",
src="./sticky-card-content.png" %}
+
+### Character count
+ The recommended maximum character count for the elements of a sticky card are listed below and include spaces.
+
+ | Element {style="width: 50%" } | Character count |
+ |-------------------------------|-----------------|
+ | Title | 20 |
+ | Headline | 50 |
+ | Body text | 120 |
+ | Footer | 55 |
+
+
### Alignment
Text and other content in a sticky card is always left-aligned, even if the sticky card is anchored to the right edge of a page.
diff --git a/docs/patterns/video-thumbnail/index.md b/docs/patterns/video-thumbnail/index.md
index 48e12a4430..858d5c1b4d 100644
--- a/docs/patterns/video-thumbnail/index.md
+++ b/docs/patterns/video-thumbnail/index.md
@@ -62,6 +62,11 @@ A video thumbnail can be used in most layouts that have enough space to accommod
An optional descriptor caption can be placed underneath the video thumbnail, it can be left- or center-aligned, depending on how the video is oriented.
+### Character counts
+
+A caption should be limited to 150 characters.
+
+
## Best practices
Don't reposition the play button.
diff --git a/elements/rh-accordion/docs/20-guidelines.md b/elements/rh-accordion/docs/20-guidelines.md
index 29dc9d528d..03cbcd3adc 100644
--- a/elements/rh-accordion/docs/20-guidelines.md
+++ b/elements/rh-accordion/docs/20-guidelines.md
@@ -34,7 +34,7 @@ Title text should have fewer characters to help users make sense of what the con
| Element {style="width: 50%" } | Character count |
| ----------------------------- | --------------- |
-| Title text | 45 |
+| Title text | 65 |
### Panel content
When a panel is expanded, some content must appear below the title text and chevron icon. Content can include text, cards, images, etc. Text blocks should not exceed `750px` to maintain optimal readability.
diff --git a/elements/rh-alert/docs/20-guidelines.md b/elements/rh-alert/docs/20-guidelines.md
index efebe3d4b1..3a28aed2b7 100644
--- a/elements/rh-alert/docs/20-guidelines.md
+++ b/elements/rh-alert/docs/20-guidelines.md
@@ -55,15 +55,17 @@ If an issue cannot be resolved on the current page or if a user needs to correct
The title should fit on one line at any screen size and would typically be only one to three words, if the alert includes body text. If the alert does not contain body text, however, the title can be a concise, full sentence. The title can also communicate the severity of the alert, e.g. **Warning** or **Success**.
+### Body
+The body would ideally be one brief sentence. This is especially important for toast alerts because users may receive more than one at a time. Not all alerts will require body text if the title is enough to convey the message.
+
### Character count
+The recommended maximum character count for the elements of an alert are listed below and include spaces.
+
| Element {style="width: 50%" } | Character count |
| ----------------------------- | --------------- |
| Title text | 60 |
-### Body
-The body would ideally be one brief sentence. This is especially important for toast alerts because users may receive more than one at a time. Not all alerts will require body text if the title is enough to convey the message.
-
## Layout
diff --git a/elements/rh-audio-player/docs/30-guidelines.md b/elements/rh-audio-player/docs/30-guidelines.md
index ab078ae418..258e3e4db7 100644
--- a/elements/rh-audio-player/docs/30-guidelines.md
+++ b/elements/rh-audio-player/docs/30-guidelines.md
@@ -54,12 +54,12 @@ The description and title are not included in the Mini size players.
### Character count
-There is no hardened character count, but writing too many characters will cause the description and title to get cut off. Use the following character count values to avoid text scrolling.
+Using too many characters will cause the description and title to scroll outside of the visible area. The recommended maximum character count for the elements of an audio player are listed below and include spaces.
-| Tab count {style="width: 25%" } | Character count |
-| ------------------------------- | --------------- |
-| Description | 80 |
-| Title | 40 |
+| Element {style="width: 50%" } | Character count |
+| ----------------------------- | --------------- |
+| Description | 80 |
+| Title | 40 |
## Layout
diff --git a/elements/rh-card/docs/20-guidelines.md b/elements/rh-card/docs/20-guidelines.md
index e5662247a3..e5cb778e79 100644
--- a/elements/rh-card/docs/20-guidelines.md
+++ b/elements/rh-card/docs/20-guidelines.md
@@ -68,6 +68,16 @@ There are several card variants that can be used for a variety of use cases.
contain similar content, but it sticks to the side of a page and it’s always
present until a user dismisses it.
+### Character count
+ The recommended maximum character count for the elements of a card are listed below and include spaces.
+
+ | Element {style="width: 50%" } | Character count |
+ |-------------------------------|-----------------|
+ | Title | 20 |
+ | Headline | 50 |
+ | Body text | 165 |
+ | Footer | 55 |
+
### Grouping
Different card styles can sometimes be grouped together. They can be arranged
in a grid horizontally or vertically, depending on available space or screen
diff --git a/elements/rh-cta/docs/20-guidelines.md b/elements/rh-cta/docs/20-guidelines.md
index 027f41efd9..987a43a634 100644
--- a/elements/rh-cta/docs/20-guidelines.md
+++ b/elements/rh-cta/docs/20-guidelines.md
@@ -99,15 +99,14 @@ Call to action text labels are written to entice users to select a link whereas
src="../cta-call-to-action-vs-button-text-labels.png" %}
### Character count
-
-| Variant | Character count |
-| ------------| ----------------|
-| Primary | 30 |
-| Secondary | 40 |
-| Brick | 25 |
-| Default | 55 |
-
-{.full-width .col-11}
+The recommended maximum character count for the variants of a call to action are listed below and include spaces.
+
+| Variants {style="width: 50%" } | Character count |
+|--------------------------------|-----------------|
+| Primary | 30 |
+| Secondary | 40 |
+| Brick | 25 |
+| Default | 55 |
## Layout
diff --git a/elements/rh-dialog/docs/20-guidelines.md b/elements/rh-dialog/docs/20-guidelines.md
index b178c2f869..9e3c00c0df 100644
--- a/elements/rh-dialog/docs/20-guidelines.md
+++ b/elements/rh-dialog/docs/20-guidelines.md
@@ -140,11 +140,13 @@ from the headline for better scannability.
### Character and line counts
-| Element | Character count | Line count |
-| ----------- | --------------- | ---------- |
-| Title text | 40 | 1 |
-| Body text | 175 | 2 |
-| Button text | 20 | 1 |
+The recommended maximum character and line counts for the elements of a dialog are listed below and include spaces.
+
+| Element {style="width: 50%" } | Character count | Line count |
+| ----------------------------- | --------------- | ---------- |
+| Title text | 40 | 1 |
+| Body text | 175 | 2 |
+| Button text | 30 | 1 |
### Overflow content
diff --git a/elements/rh-jump-links/docs/20-guidelines.md b/elements/rh-jump-links/docs/20-guidelines.md
index d8430edc80..2c191b05fc 100644
--- a/elements/rh-jump-links/docs/20-guidelines.md
+++ b/elements/rh-jump-links/docs/20-guidelines.md
@@ -10,6 +10,14 @@
displayed when a user scrolls past them or if they select the specific parent
section link.
+### Character count
+The label and section links should have fewer characters. The recommended maximum character count for the elements of jump links are listed below and include spaces.
+
+ | Element {style="width: 50%" } | Character count |
+ |-------------------------------|-----------------|
+ | Label | 18 |
+ | Section links | 30 |
+
### Positioning
Jump links are placed on the left edge of the grid on large screens so content
diff --git a/elements/rh-popover/docs/20-guidelines.md b/elements/rh-popover/docs/20-guidelines.md
index 3c86662e2e..2a4e5913e7 100644
--- a/elements/rh-popover/docs/20-guidelines.md
+++ b/elements/rh-popover/docs/20-guidelines.md
@@ -42,12 +42,12 @@
understand what to do next if the content is too brief.
{% endalert %}
- | Element | Maximum characters |
- |-------------|--------------------|
- | Heading | 25 |
- | Body text | 100 |
- | Single link | 35 |
- | Two links | 15 (each) |
+ | Element {style="width: 50%" } | Character count |
+ |-------------------------------|-----------------|
+ | Heading | 25 |
+ | Body text | 100 |
+ | Single link | 35 |
+ | Two links | 15 (each) |
### Orientation
diff --git a/elements/rh-progress-steps/docs/20-guidelines.md b/elements/rh-progress-steps/docs/20-guidelines.md
index 4c159e9584..af892e5604 100644
--- a/elements/rh-progress-steps/docs/20-guidelines.md
+++ b/elements/rh-progress-steps/docs/20-guidelines.md
@@ -71,6 +71,14 @@
alt="Progress steps component completion",
src="../progress-steps-completion.svg" %}
+### Character and word counts
+
+ Each step indicator text label should be written clearly and use ideally one word to avoid crowding. The recommended maximum character and word counts count for the elements of progress steps are listed below and include spaces.
+
+ | Element {style="width: 50%" } | Character count | Word count |
+ |-------------------------------|-----------------|------------|
+ | Label | 20 | 2 |
+
## Behavior
diff --git a/elements/rh-spinner/docs/20-guidelines.md b/elements/rh-spinner/docs/20-guidelines.md
index 953a2d06af..cc560b7c88 100644
--- a/elements/rh-spinner/docs/20-guidelines.md
+++ b/elements/rh-spinner/docs/20-guidelines.md
@@ -12,6 +12,19 @@ a few seconds, a spinner should be used. For experiences that need longer than a
few seconds to load, use a Progress bar instead. Lastly, when the result of an
experience has no data or the screen is empty, use an Empty state instead.
+### Character count
+
+The text label should be as brief and general as possible in order to give users
+enough time to read it.
+
+{% example palette="light",
+ alt=" Two spinners; one with a short text label, which is acceptable, and one with a very long text label which is not acceptable",
+ src="../spinner-text-label.png" %}
+
+| Element {style="width: 50%" } | Character count |
+| ----------------------------- | --------------- |
+| Text label | 30 |
+
## Sizes
Depending on what data is being retrieved and loaded and how much space it
@@ -35,14 +48,6 @@ A spinner is always oriented above the optional text label, if visible.
alt=" Two spinners; one showing the correct orientation and the other showing an incorrect orientation",
src="../spinner-orientation.png" %}
-## Text label
-
-The text label should be as brief and general as possible in order to give users
-enough time to read it.
-
-{% example palette="light",
- alt=" Two spinners; one with a short text label, which is acceptable, and one with a very long text label which is not acceptable",
- src="../spinner-text-label.png" %}
## Animation
diff --git a/elements/rh-stat/docs/20-guidelines.md b/elements/rh-stat/docs/20-guidelines.md
index 2a34446e4f..4b85fc87b8 100644
--- a/elements/rh-stat/docs/20-guidelines.md
+++ b/elements/rh-stat/docs/20-guidelines.md
@@ -52,12 +52,12 @@ possible for text styles.
### Character and line counts
-| Element | Character count | Line count |
-| ------------------- | --------------- | ---------- |
-| Title text | 20 | 1 |
-| Data text | 7 | 1 |
-| Body text | 100 | 2 |
-| Call to action text | 30 | 1 |
+| Element {style="width: 50%" } | Character count | Line count |
+| ----------------------------- | --------------- | ---------- |
+| Title text | 20 | 1 |
+| Data text | 7 | 1 |
+| Body text | 100 | 2 |
+| Call to action text | 30 | 1 |
{.full-width}
diff --git a/elements/rh-subnav/docs/20-guidelines.md b/elements/rh-subnav/docs/20-guidelines.md
index 3f75975d92..8955589c7c 100644
--- a/elements/rh-subnav/docs/20-guidelines.md
+++ b/elements/rh-subnav/docs/20-guidelines.md
@@ -62,16 +62,11 @@ strategist to shorten them.
### Character count
-A subnavigation should have four or five links maximum. However, if text labels
-are very short, more can be added.
+A subnavigation should have four or five links maximum. Text labels should be short but descriptive. The recommended maximum character count for the elements of a subnavigation are listed below and include spaces.
-| Link count | Character count |
-| ---------- | --------------- |
-| 6 | < 13 |
-| 5 | 14 - 17 |
-| 4 | 18 - 23 |
-
-{.full-width}
+| Element {style="width: 50%" } | Character count | Word count |
+|-------------------------------|-----------------|------------|
+| Link | 20 | 2 to 3 |
## Layout
diff --git a/elements/rh-tabs/docs/20-guidelines.md b/elements/rh-tabs/docs/20-guidelines.md
index e5e1aa960c..c9ca37682e 100644
--- a/elements/rh-tabs/docs/20-guidelines.md
+++ b/elements/rh-tabs/docs/20-guidelines.md
@@ -65,13 +65,13 @@ Text labels should be concise, scannable, and descriptive of content in the pane
{% example palette="light", alt="Image of open tabs with examples of adequate and long text labels", src="../tabs-text-labels.png" %}
### Character count
-In general, tabs should have three or four text labels maximum. However, if text labels are very short, more can be added.
+In general, tabs should have three or four text labels maximum. Text labels should be short but descriptive.
-| Tab count {style="width: 50%;"} | Character count |
-| ------------------------------- | --------------- |
-| 6 | < 13 |
-| 5 | 14 - 17 |
-| 4 | 18 - 23 |
+Text labels should be short but descriptive.
+
+| Character count | Word count |
+| --------------- | ---------- |
+| 20 | 2 to 3 |
## Layout
### Horizontal tabs width
diff --git a/elements/rh-tag/docs/20-guidelines.md b/elements/rh-tag/docs/20-guidelines.md
index 277342ba24..dd47dcfc02 100644
--- a/elements/rh-tag/docs/20-guidelines.md
+++ b/elements/rh-tag/docs/20-guidelines.md
@@ -91,11 +91,12 @@ instead.
alt="Two groups of two tags with examples of correct and incorrect text labels",
src="../tag-text-labels.png" %}
-| Element | Character count |
-| ---------- | --------------- |
-| Text label | 20 |
-{style="width:100%"}
+The recommended maximum character count for the elements of a tag are listed below and include spaces.
+
+| Element {style="width: 50%" } | Character count |
+| ----------------------------- | --------------- |
+| Text label | 20 |
## Grouping
diff --git a/elements/rh-tile/docs/20-guidelines.md b/elements/rh-tile/docs/20-guidelines.md
index d1e0ce5f72..1fbba35d8b 100644
--- a/elements/rh-tile/docs/20-guidelines.md
+++ b/elements/rh-tile/docs/20-guidelines.md
@@ -56,14 +56,12 @@ The four content slots within a tile are title, heading
The recommended character counts below include spaces. Line counts are based on a default link tile at minimum width.
-| Element | Character count | Line count |
-| -------------------------| ---------------- | ---------- |
-| Title text | 20 | 1 |
-| Heading text | 64 | 3 |
-| Body text | 160 | 7 |
-| Footer text | 25 | 1 |
-
-{.full-width .col-111}
+| Element {style="width: 50%" } | Character count | Line count |
+| ------------------------------| ---------------- | ---------- |
+| Title text | 20 | 1 |
+| Heading text | 64 | 3 |
+| Body text | 160 | 7 |
+| Footer text | 25 | 1 |
## Layouts
diff --git a/elements/rh-tooltip/docs/20-guidelines.md b/elements/rh-tooltip/docs/20-guidelines.md
index 15743be552..f102ae6330 100644
--- a/elements/rh-tooltip/docs/20-guidelines.md
+++ b/elements/rh-tooltip/docs/20-guidelines.md
@@ -13,6 +13,14 @@ Content in a tooltip is limited to text only. Consider the following when writin
alt="Various text examples; from left to right, the text length starts very short, but gets longer and longer",
src="../tooltip-content.png" %}
+### Character count
+
+A tooltip's body text should be short and descriptive.
+
+| Element {style="width: 50%" } | Character count |
+| ----------------------------- | --------------- |
+| Body | 60 |
+
## Orientation
The correct orientation of a tooltip depends on the amount of content and browser window. If a tooltip covers up important information or gets cut off, choose a different orientation.