[epic][docs] Consider adding max character limits for all components

[jknilans]

Description

There is little guidance for how many characters are acceptable to use in each web component; it would be helpful to provide UX guidance for each component on what the max acceptable character count should be.

For example, since we don't provide suggested character limits, it's not uncommon to see some websites that have upwards of 10 lines of body content in a card, whereas other websites have 4 lines of content per card. By providing content guidance, teams could learn that maybe there is a better component to use to get across the same point, or be more concise in their content writing.

Also, by providing an upward limit on character counts, users may have an easier easier time finding what they're looking for as they scan content for what they're interested in.

Suggested solution

Provide suggested max character limits in the documentation for the following web components:

• Accordion
• Alert
• Announcement
• Blockquote
• Button
• Call to action
• Card
• Dialog
• Disclosure
• Jump links
• Link(s)
• Popover
• Progress steps
• Promo
• Statistic
• Sticky banner
• Sticky card
• Tabs
• Tooltip

Example API

No response

Additional context

Our team occasionally uses the web components, and after recently working with a content writer, we were asked about max character limits for the components we're using. We checked with other teams and with the content team found that there doesn't seem to be a consensus on what the max limits should be for the marketing components. For example, in the documentation for cards, the closest suggestion is "A card features header, body, and footer sections. Those sections should include a limited amount of content to ensure that the card doesn’t become too tall." Leaving the user to determine what is "limited" or "too tall" could result in cards that are actually not limited and too tall.

[bennypowers]

for reference, the card docs guidelines state:

A card features header, body, and footer sections. Those sections should include a limited amount of content to ensure that the card doesn’t become too tall.
...
Don’t use too much content in one card, distribute extra content to other cards or somewhere else on the page.

[jknilans]

Hey @bennypowers! Thanks for your response. :) I referenced that guideline in the "Additional context" section of my issue, however my content writers want a firm max limit as constraints are helpful to work with and force clarity in writing.

I gave them what I consider to be reasonable max limits, however I'm not sure if my suggestions are more or less restrictive than what the original intention was for each component.

[hellogreg]

Just bumping this to make note that this has been placed in the next milestone. Next steps:

1. Decide upon timing/prioritization.
2. Discovery around which (if any) components require max character counts, and what those counts should be.

[jknilans]

Thanks for the update!

[markcaron]

Making a checklist here to go through:

• Accordion
• Alert
• Announcement
• Blockquote
• Button
• Call to action
• Card
• Dialog
• Disclosure
• Jump links
• Link(s)
• Popover
• Progress steps
• Promo
• Statistic
• Sticky banner
• Sticky card
• Tabs
• Tile
• Tooltip

For each we need to

1. Determine whether the element/component needs a character limit suggestion
2. If so, have we documented it?
   • If we haven't documented it, make an issue to track and fix that element's docs
   • If we have already, awesome!

[marionnegp]

Added tile to the list and checked it off because character counts will be there once docs are published.

[marionnegp]

@nikkimk, these character counts include spaces. Let me know if you need additional copy or info.

Announcement (pulled from the Personalization patterns page)

• Headline or body text should be 60 characters or fewer.
• Call to action text should be 20 characters or fewer.

Card
I think this will need a character count because it was given as an example in this issue.

• Title: 20
• Headline: 50
• Body text: 165

Disclosure

• Title: 45 characters (This uses the same max character count as accordion's title.)

Jump links

• Label: 18 characters
• Section links: 30 characters

Link
I don't think an inline link would need a max character count.

Progress steps
Step indicator labels: 20 characters (maximum of two words)

Promo

• I'm working on the design of inline promo for the Caterpie milestone, and I'll add a character count as part of the docs.

Sticky card

• Title: 20
• Headline: 50
• Body text: 120

Video player pattern

• Caption below player: 150

[nikkimk]

@marionnegp I have a few questions:

• For card are the character counts for both the element and the pattern? Do we have character counts for the card footer?
• For sticky card, do we have character counts for the footer?

[marionnegp]

Since CTA can be added to the footer for both cards and sticky cards, let's use the default CTA's character count.

Card's footer: 55 characters

Sticky card's footer: 55 characters

Yes, the element and pattern versions of card can use the same character count. I'll keep that in mind for other components that are elements and patterns.