<><Paragraph>When submitting feedback about your experience, provide specific details to help us understand your needs and improve our offerings. For example:</Paragraph><ExampleText>The service was quick and efficient, but I would like more options in the menu.</ExampleText></>
Example Text represents contextual examples that guide users on what type of information to enter or how to respond within a system.
Use Example Text so users can easily differentiate between examples and regular text or code blocks. It also reduces the chances of users overlooking important examples.
| Component | Usage | Example |
|---|---|---|
| Example Text | Use when you want to provide contextual examples of user input. | This is an Example Text that guides users on how to respond to a system |
| Blockquote | Use to highlight quotations from an external source or customer feedback. | This is a Blockquote pulled from an outside source. |
| Code Block | Use when you need to display blocks of code and when the user needs to copy a command to put it into a CLI. | |
| Inline Code | Use to emphasize short, inline pieces of computer code such as variable names and function calls. | console.log(mySustainabilityGoals) |
| Help Text | Use below a form field to help users prevent an error and describe what makes the form field successful. | Use your work email address. |
| Callout | Use a Callout to highlight any other important information. | (information) Heads up!This is some information you need to know. |
Use Example Text to show examples of user input, especially in instructions, or to help users fill out forms.
<><Paragraph>When submitting feedback about your experience, provide specific details to help us understand your needs and improve our offerings. For example:</Paragraph><ExampleText>The service was quick and efficient, but I would like more options in the menu.</ExampleText></>
Example Text can also be used inline in a Paragraph in cases where the example supports the sentence but isn’t the primary focus, maintaining the conversational tone.
<Paragraph>To create your account, provide your full name, a valid email address, and a secure password. Your password must contain at least eight characters, including uppercase letters, lowercase letters, numbers, and a special character. For example, <ExampleText>!Password@123</ExampleText>. You may be asked to verify your email address by clicking a link sent to your inbox.</Paragraph>
Do
Use a prefix like “For example:” followed by Example Text to give users better context that the content is an example.
Don't
Don't use Example Text to highlight important information, use Callout or bold text instead.
Do
Use common editorial styles when example text doesn’t require special emphasis.
Don't
Do not use Example Text when you want the user to copy a command to put it into CLI, use Code Block instead.