docs: updated component max character / max word counts

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.

docs/patterns/card/index.md

@@ -215,3 +215,14 @@ For more information, please see the [card css custom properties](/elements/card
   }
 </style>
 
+## 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              |

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 

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.

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.

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.

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.

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
 

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 

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 

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
 

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
 

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 

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
 

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
 

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
 

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}
 

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
 

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 <strong>very short</strong>, 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

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
 

elements/rh-tile/docs/20-guidelines.md

@@ -56,14 +56,12 @@ The four content slots within a tile are <strong>title</strong>, <strong>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
 

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.