Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
simmonsjenna opened this issue Jun 20, 2024 · 4 comments
Open
Assignees
Labels
brand design enhancement New feature or request

Comments

@simmonsjenna
Copy link

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

@waynewi
Copy link

waynewi commented Jun 20, 2024

Thanks @simmonsjenna

@simmonsjenna simmonsjenna added the enhancement New feature or request label Jun 20, 2024
@rezrah
Copy link
Collaborator

rezrah commented Jul 22, 2024

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

@nsolerieu
Copy link
Contributor

@rezrah

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

Image

@nsolerieu
Copy link
Contributor

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
brand design enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants