Frequently Asked Questions
Can we build our own component library?
Yes, you can develop your own component library as long as it aligns with our specifications and general design language and ensures full compatibility with our design system.
What is the purpose of pattern samples?
Pattern samples are intended to serve as templates that guide designers. They are not meant to be used directly as components but should be adapted to fit specific project requirements.
Can we adjust the standard breakpoints to better fit our specific project needs?
Breakpoints are flexible recommendations. You can define breakpoints that best suit your project's needs, ensuring compliance with the Web Content Accessibility Guidelines (WCAG). Should you choose to use your own breakpoint you must align the header and sticky bar components behave responsively in alignment with your breakpoints.
What is the required spacing between multiple accordions?
Accordions should be spaced 16px apart. This specification can be found in the design and Gitbook as Accordions as Accordion Groups
What is the behavior of logos on transparent and white backgrounds?
Since logos feature variable colors and are not linked to the token library, they require manual updates to ensure they display correctly on both transparent and white backgrounds.
What is the accessibility standard for disabled variants in components?
All disabled components are designed to be accessible, adhering to the WCAG Contrast Recommendations.
Is the usage of the Mega Menu mandatory, or can it be changed to a standard dropdown menu according to the design guidelines?
A dedicated page for Menus is available that includes all variants, allowing for flexible implementation as per project requirements.
Where should additional icons, such as a survey icon, be placed in the sticky bar?
An extra link button has been added to the sticky bar to accommodate such icons.
How can a logo variant be removed from the footer?
Use the 'Optional Logo' boolean property to disable the logo within the menu group component.
How should the Figma file be updated for mobile views of Tabs Design, Breadcrumbs, List, and Service Header?
Tabs Design for Mobile View
Fixed Tabs: For 3–5 tabs, they should remain visible and be equally spaced across the display.
Scrollable Tabs: For more than 5 tabs, they should become horizontally scrollable, enabling users to swipe through them.
Breadcrumbs in Mobile View
Typically, only the last one or two levels of breadcrumbs are displayed.
Earlier levels can be collapsed into a dropdown menu or represented by an ellipsis (...).
Example:
Desktop: Home > Category > Subcategory > Item
Mobile: ... > Subcategory > Item
List and service header in Mobile View
Available on Figma
How does the design system address various aspects of file attachments, including visibility of file size, handling long file titles, cancel options, browse button consistency, predefined documents, and error/helper messages during the file upload process?
The design system ensures a comprehensive and user-friendly approach to file attachments by incorporating several key features:
File Size Visibility: During the upload, the file size is clearly displayed next to the file name to keep users informed.
Cancel Button: An 'X' button allows users to cancel the upload process or remove a file post-upload, enhancing user control.
Handling Long File Titles: To manage long file titles, the system truncates them with ellipses, such as "Annual_Report_2...iew.pdf", ensuring the file name fits within available space while remaining readable.
Browse Button Consistency: The "Browse" button's font size is matched with the "Drop Your File" text to maintain visual consistency across the interface.
Predefined Documents: The system displays predefined document types within the component's helper text, like 'SVG, PNG, JPG (Max. File Size: 25MB)', and includes validation to prevent uploads of unsupported formats.
Error and Helper Messages: Both error and helper messages are displayed in the same 'helper text' field. For example, if a file exceeds the specified size limit, an error message like 'File exceeds size limit. Please upload a file with a maximum size of 25MB.' is shown.
Last updated