![]() Inline Survey ( Radio Buttons, Checkboxes, Buttons): Use this pattern to create a clean and easy to navigate survey. It also provides information on a common save behavior. Grid with Selection Pattern ( Grids): This pattern is an example of good UX design for a grid that allows users to select items and easily view their selections when there are multiple pages of data. ![]() This pattern uses a combination of cards and rich text to show an easy to navigate list of documents of different types.ĭrilldown Pattern ( Grids): The drilldown pattern allows users to select an item from a grid to see more details in place of the grid.ĭrilldown Report Pattern ( Grids, Charts, Reports): The drilldown report pattern consists of a bar chart and column chart, which each drill down into a grid.ĭuration Display ( Rich Text, Events): Use the duration display pattern to show the amount of time in between events in a quick, easy-to-read way.ĭynamic Inputs ( Inputs, Dynamic Links): Use the dynamic inputs pattern to allow users to easily add or remove as many values as needed. You can easily modify the pattern to change the card content or the number of cards per row to fit your use case.Ĭomments Patterns ( Comments, Looping): Use this pattern when displaying a chronological list of messages from different users, such as comments on a topic or notes on a case.ĭocument List ( Documents): Use the document list items pattern to display a list of documents that can be searched and filtered. This pattern uses a combination of cards and billboards to show lists of like items. The following patterns include usage of the Styled Icon.Īdd Validations to an Inline Editable Grid ( Validation, Grids, Looping): Allows the user to change data directly in a grid, and validate a various entries.Īdd, Edit, and Remove Data in an Inline Editable Grid ( Grids, Looping): Allow the user to change data directly in an inline editable grid.Īlert Banner Patterns ( Choice Components): The alert banners pattern is good for creating a visual cue of different types of alerts about information on a page.Ĭards as Buttons Pattern ( Choice Components, Formatting, Conditional Display): The cards as buttons pattern is a great way to prominently display a select few choices.Ĭards as List Items Patterns ( Choice Components, Images): Use the cards as list items pattern to create visually rich lists as an alternative to grids or feeds. Use the interactive editor below to test out your code: Linked icons within text For nested rich text, if two conflicting styles are found (for example, both SMALL and LARGE), the innermost style will be displayed.If link is null, the icon is not displayed as a link.If icon is null or contains an empty array, no icon is displayed.Usage considerations Using the icon, link, and style parameters When set to false, the component is hidden and is not evaluated. Valid values: "INLINE" (default), "STANDALONE".ĭetermines whether the component is displayed on the interface. Create links with:ĭetermines how the link is underlined. Link that determines the behavior of the icon when clicked. Valid values: Any hex color or "STANDARD" (default), "ACCENT", "POSITIVE", "NEGATIVE", and "SECONDARY". Valid values: "STANDARD" (default), "SMALL", "MEDIUM", "MEDIUM_PLUS", "LARGE", "LARGE_PLUS", and "EXTRA_LARGE".ĭetermines the icon color. ![]() See Available Icons below.Įquivalent alternate text to display when accessibility or browser compatibility issues prevent the icon from displaying.ĭetermines the icon size. See also: Styled icon design guidance, Rich text style guidance Parameters Name To show documents as images within rich text, see Inline Image. Icons can be styled by configuring a color, size, or link. SAIL Design System guidance available for Rich TextĮnhance readability and comprehension on your interface by using rich text styles to visually differentiate text.Ī!richTextIcon( icon, altText, caption, size, color, link, linkStyle, showWhen )ĭisplay a styled icon within a rich text component.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |