Ensure a clear and logical organization of content within the accordion sections. Use descriptive and concise labels for accordion sections to guide users effectively. Maintain a uniform visual style for the accordion component across different platforms and devices.
\r\n \r\n\r\n \r\nProvide clear and descriptive text for the accordion labels. Let users know what information they might be able to find within each accordion.
\r\n \r\n\r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\n \r\n\r\n \r\nEnsure the banner component adheres to consistent styling guidelines, including color, typography, and layout, to maintain a cohesive visual language. Provide users with clear options for dismissing the banner, especially for non-critical messages, allowing them to focus on the main content without obstruction. Use the appropriate type for your use case: informational, success, warning, error.
\r\n \r\n\r\n \r\nProvide clear and concise messages for banners. There should be no more than two lines of text used inside a banner component.
\r\n \r\n\r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\n \r\n \r\n\r\n \r\nButtons are both the signposts and pathways through our digital experiences that communicate actions that users can take. The button's label or text description indicates the purpose of the action to the user. Establish a hierarchy for different types of buttons. Use primary buttons for the most important or prominent actions, and secondary buttons for less significant actions. Use tertiary buttons for actions with lower priority.
\r\n \r\n\r\n \r\nThe button component has three states, static, hover, and disabled. The main action occurs when the button is clicked.
\r\n \r\n \r\n \r\nProvide clear and concise labels for buttons. Use language that accurately describes the action or function associated with the button. There should be no more than two words used inside a button component.
\r\n \r\n\r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\nWhen Button text does not provide sufficient context about the Button's behavior, supply a short, descriptive label for screen-readers using accessibilityLabel.
\r\n \r\n\r\n \r\nThe card component is a generic container component with 24px padding. At this time, BDS does not define specific card layouts. Use a card to present related information on a single topic. Cards can be used as a teaser of an experience to follow. For example, a card that displays a simple message with no destination.
\r\n \r\n\r\n \r\nThe behavior of a card will depend on its context. Cards can exist alone, in a grid, a carousel, and more. Usually, a card takes users to a single destination or allows for a single action.
\r\n \r\n \r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\n \r\n\r\n \r\nIn Figma, we have two separate components: checkbox button and checkbox card.
\r\nIn our developed core library, there is one component called hrb-radio-button that can represent either of the above, depending on the value of the 'type' property.
\r\n \r\n\r\n \r\nUse checkboxes (instead of toggles or radio buttons) if multiple options can be selected from a list. The label should be clear and concise with only the first letter of the first word capitalized.
\r\n \r\n\r\n \r\nProvide clear and concise labels for checkboxes. Use language that accurately describes the action or item. Checkbox labels should be no longer than a sentence.
\r\n \r\n\r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\n \r\n\r\n \r\n{{cmsItem.properties.usageGuidelinesText}}
\r\n \r\n\r\n \r\n{{cmsItem.properties.usageGuidelinesText}}
\r\n \r\n \r\n \r\n{{ cmsItem.properties.contentGuidelinesTextContent }}
\r\n \r\n\r\n \r\n{{ cmsItem.properties.designRecommendationsText}}
\r\n{{ cmsItem.properties.developmentRecommendations}}
\r\n \r\n\r\n \r\n\r\n Block Design System provides a variety of components for building\r\n larger experiences and patterns. Provided are detailed design and\r\n development documentation to guide better, more consistent\r\n experiences.\r\n
\r\n\r\n Button is used to initiate actions on a page or form.\r\n
\r\n\r\n Card is a container that holds other elements within it.\r\n
\r\n\r\n Checkbox is a form control for single and multiple selections.\r\n
\r\n\r\n Inputs display a labelled input and, optionally, associated\r\n validation text or hint text.\r\n
\r\n\r\n Radio is for making a single selection from a list of\r\n options.\r\n
\r\n\r\n Select is an input for selecting a single option from a menu.\r\n
\r\n\r\n Textarea is used to input multiple lines of text.\r\n
\r\n\r\n Accordion optimizes screen real estate by allowing users to expand and collapse sections.\r\n
\r\n\r\n Toast is a short, time-based message that provides non-disruptive information.\r\n
\r\n\r\n A link is text that a user clicks to go to a different website, page, section, or to trigger a dialog.\r\n
\r\n\r\n A toggle represents a physical switch that allows someone to choose between two mutually exclusive options.\r\n
\r\n\r\n The label is designed to visually represent and categorize information within our interfaces.\r\n
\r\nInputs are found all throughout Block products in forms and other patterns. You may utilize different input types available (e.g., text, email, number, date) to help users input data accurately and enable appropriate browser behaviors.
\r\nUse placeholder text to provide additional guidance to users, such as formatting expectations or examples of valid input. However, ensure that the placeholder text does not substitute for a proper label and that it is not mistaken as pre-filled input.
\r\n \r\n\r\n \r\nWhile in the default state, the input should only display the expected user input text. When the input is filled or focused, the label should be shown and should clearly indicate what text is expected for that input. Incorporate validation feedback to inform users about input errors or invalid data. This can include visual cues, such as error messages, error icons, or color changes, to clearly indicate the issue and offer guidance on how to correct it. Disabled inputs cannot be clicked into.
\r\n \r\n \r\n \r\nProvide clear and descriptive labels for text inputs to guide users on what information to enter. Utilize placeholder text to offer additional context or examples, but ensure it disappears once the user starts typing.
\r\n \r\n\r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\n \r\n\r\n \r\nEnsure that labels convey meaningful information and contribute to a clear and organized user experience. Use our recommended colors if possible.
\r\n \r\n\r\n \r\nOnly make it hover-able if clicking on the label triggers an action.
\r\n \r\n \r\n \r\nProvide clear and concise text for labels. Keep labels to only a couple words.
\r\n \r\n\r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\n \r\n\r\n \r\nUse inline text links within bodies of copy or as tertiary links in flows (i.e. \"Skip this” or \"learn more”). Use standalone links as CTAs in secondary modules when a button would be too prominent.
\r\n \r\n\r\n \r\nHowever, there are times when it makes sense for a link to look like a button. In that case, there are additional themes for buttons, currently available in the code, that will do this. They are not represented as Variants in bds-figma. This is because it would be redundant. However, it's good for the designer to know these themes are available for links when working with their dev partners.
\r\n \r\n \r\n \r\nProvide clear and concise text for links. Keep link messages or CTAs only a few words long.
\r\n \r\n\r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\n \r\n\r\n \r\nIn Figma, we have two separate components: radio button and radio card.
\r\nIn our developed core library, there is one component called hrb-radio-button that can represent either of the above, depending on the value of the 'type' property.
\r\n \r\n\r\n \r\nUse radio buttons and radio button cards when only one item can be selected from a list. Use checkboxes or switches when multiple items can be selected.
\r\n \r\n\r\n \r\nProvide clear and concise labels for radio buttons. Use language that accurately describes the action or item. Radio button labels should be no longer than a sentence.
\r\n \r\n\r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\n \r\n\r\n \r\nSelect is best suited for scenarios where users need to choose one or more items from a list of menu items, typically found in forms or inline editing. It's recommended to use the select component when you have 4 or more options to avoid cluttering the interface. If you have fewer than 4 options, please use a radio button.
\r\n \r\n\r\n \r\nUnderstanding and utilizing various states will enhance the user experience of the select component in our design system:
\r\nProvide clear and descriptive labels for selects to guide users on what information they need to select. Utilize helper text to offer additional context needed to understand the intent of the select.
\r\n \r\n\r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\n \r\n\r\n \r\n\r\n
\r\n
\r\n
Textarea serves as a form input element for multiline text. Designed with a focus on flexibility and consistency, the text area incorporates predefined styles, including font choices, sizes, and line heights, ensuring a harmonious visual integration with the overall design language. It features adaptive resizing to accommodate varying amounts of content and can be configured with adjustable rows to suit specific layout needs.
\r\n \r\n\r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\n \r\n\r\n \r\nToasts are non-modal, time-based window elements used to display short messages. They are more disruptive than inline notifications and are best used with system-generated messages that do not correspond to a specific section of the UI.
\r\n \r\n\r\n \r\nProvide clear and descriptive text for the toast component. Keep toast messages under two sentences.
\r\n \r\n\r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\n \r\n\r\n \r\nUsed to review a list or significant amount of information, toggles enable users to quickly confirm information. For examples, scanning information and settings that are turn on or off in accounts.
\r\n \r\n\r\n \r\nThe toggle will immediately change state once clicked.
\r\n \r\n \r\n \r\nProvide clear and concise text for toggles. Keep labels to only a couple words.
\r\n \r\n\r\n \r\nAll text, elements and components must meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.2) level AA requires a 4.5:1 color contrast ratio between text and background color for normal text, and 3:1 for large text. Icons and other critical elements should meet this same level of contrast.
\r\n \r\n\r\n \r\nComponents are reusable design elements. They help us build consistency across our websites and products.
\r\nPatterns are two or more components that build up an experience. They offer us repeatable solutions to common design problems.
\r\nRecommended resources and guides to get you started.
\r\nComing soon!
\r\nPortal has everything you need to get started designing great experiences at Block.
\r\nComing soon!
A great resource to get you up and running as a developer.
\r\nComing soon!
\r\nGet to know the voice and tone of our one of a kind brand.
\r\nComing soon!
\r\nCheck out the colors that make up our brand and products.
\r\nComing soon!
\r\nView our core mission, company vision, and branding principals.
\r\nComing soon!
\r\nLearn about our different brands and their unique stylistic features.
\r\nComing soon!
\r\nBrowse our frequently asked questions to find the answers you need.
\r\nComing soon!
\r\nGet in touch with a member of the Block Design System team.
\r\nComing soon!
\r\nSubmit ideas, questions, or fixes to new or existing components.
\r\n