Component Character Limits

Introducing Character Limits for Improved Consistency Across Components

Web Platform Announcement Graphic
By Stefan Popoff
1 min read

This article addresses the following topics:

Overview of the Changes

As our user base has grown so has the way our components are being used, sometimes in unintended ways. Many components feature text fields, but until now, they have not had character limits. This has allowed users to create overly long button and title text, for example, leading to inconsistent user experiences. On certain devices, this can cause text to be cut off, preventing users from reading it in full.

To improve the user experience and ensure we meet the branding and design standards set by UCLA and DGSOM, we are implementing character limits across all of our components. The new character limits are as follows:

  • Components with buttons will have a character limit of 45.
  • Components with title fields will have a maximum of 70 characters.
  • Components with subtitle fields will have a maximum of 80 characters.
  • Components with teaser text will have a character limit of 300.
     

How Does This Affect My Site?

New Components

When creating a new component, you will now see a character limit displayed. If you exceed the limit, the text will not display.


Existing Components

Existing components will not be affected until a user tries to update them. If you edit an existing component that now has a character limit, you will see help text indicating how many characters remain. If you exceed this limit when saving the component, the text will be automatically cut off. It is critical for editors to review and update their components to meet these new requirements when editing a page.

Importance of the Update

This update will help provide a uniform experience for our site visitors, ensuring that all content is accessible regardless of the device being used. It also ensures that all components meet the original design requirements and UCLA and DGSOM branding guidelines.

Implementation Timeline

Starting September 27, 2024, these changes will be implemented.

Additional Resources

Co-working Sessions 
Register for the next Co-working Session for answers to your questions about this update.

Register for Co-working Sessions