You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Suggestion to establish sitewide padding specifications for breadcrumb component on Desktop and mobile
Purpose
Today, padding is not consistent across the site around this component, which makes it challenging for users to rely on the placement and spacing of it as a navigational component. The consistency needs to be established for two distances:
Padding above the breadcrumb (between the header and the breadcrumb)
Padding below the breadcrumb (between the breadcrumb and the page title/H1)
Usage
This is a sitewide component used globally on a vast majority of pages.
Behavior
Mobile likely shouldn't have as much padding as desktop given the smaller real-estate, but will defer to design system team.
Examples
The forms team seems to have 56px established as a lower breadcrumb padding distance on Desktop (between breadcrumb and page title/H1) and documented in Figma; but this is not a given across the site and is not listed in VADS guidance on the design system website. In the MyHealtheVet space, I noticed that health tool pages are inconsistent, using anywhere between 8px - 47 px for this same measurement. Slack thread here. It would be super helpful to us to have sitewide guidance to lean on!
Accessibility
Have consistent spacing and reliable placement for navigational components would make the breadcrumb component more accessible.
Guidance
Decision around padding for this component should be passed on to CAIA/Drupal pages in the CMS as well if possible.
Research (optional)
N/A
Code (optional)
N/A
Next steps
You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.
Submit requests to join an upcoming Design System Council meeting in #platform-design-system.
During the meeting, the Design System Council Working Group will evaluate the request and make a decision.
If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.
The text was updated successfully, but these errors were encountered:
What
Suggestion to establish sitewide padding specifications for breadcrumb component on Desktop and mobile
Purpose
Today, padding is not consistent across the site around this component, which makes it challenging for users to rely on the placement and spacing of it as a navigational component. The consistency needs to be established for two distances:
Usage
This is a sitewide component used globally on a vast majority of pages.
Behavior
Mobile likely shouldn't have as much padding as desktop given the smaller real-estate, but will defer to design system team.
Examples
The forms team seems to have 56px established as a lower breadcrumb padding distance on Desktop (between breadcrumb and page title/H1) and documented in Figma; but this is not a given across the site and is not listed in VADS guidance on the design system website. In the MyHealtheVet space, I noticed that health tool pages are inconsistent, using anywhere between 8px - 47 px for this same measurement. Slack thread here. It would be super helpful to us to have sitewide guidance to lean on!
Accessibility
Have consistent spacing and reliable placement for navigational components would make the breadcrumb component more accessible.
Guidance
Decision around padding for this component should be passed on to CAIA/Drupal pages in the CMS as well if possible.
Research (optional)
N/A
Code (optional)
N/A
Next steps
You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.
Submit requests to join an upcoming Design System Council meeting in #platform-design-system.
During the meeting, the Design System Council Working Group will evaluate the request and make a decision.
If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.
The text was updated successfully, but these errors were encountered: