brand icon indicating copy to clipboard operation
brand copied to clipboard

[Feature request] Extend the max-width of the Hero Component's H1

Open simmonsjenna opened this issue 1 year ago • 4 comments

This came up in a Slack thread.

Problem

The current max-width set on the Hero Component's H1 (for Large - Desktop) sometimes causes multiple line breaks and does not accommodate long titles well. Since we tend to have very long headlines with some longer words thrown in the mix, @samoshin suggested extending the max-width.

Image

Suggested solution

Extend the max-width of the F2 Hero Headline to 9 col of 12. @nsolerieu suggested this, and I also tested multiple widths and landed on the same conclusion.

Image

Urgency

Not too urgent — by mid-July or the end of July would be ideal.

/cc @nsolerieu

simmonsjenna avatar Jun 20 '24 16:06 simmonsjenna

Thanks @simmonsjenna

waynewi avatar Jun 20 '24 16:06 waynewi

Update: Waiting on Site Design FR (@natalie-iv) to investigate character count based sizing.

rezrah avatar Jul 22 '24 16:07 rezrah

@rezrah

60 characters max seems to be the most common recommendation (See here NN Group, Here Conductor )

Image

nsolerieu avatar Jul 22 '24 22:07 nsolerieu

@rezrah here is a consolidated suggestion

  • Extend the length of the large hero component to 9 columns: 924px
  • Set the length of description text to 6 columns: 600px

Currently this Large hero is set at 639px which is not tied to the grid and is too narrow for long titles. This new suggestion will allow most titles to fit on 2 lines and accommodate the longer technical terms found on some of our feature pages.

Image

nsolerieu avatar Jul 29 '24 22:07 nsolerieu