Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
This is a normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat elit, lacinia at magna eget, porttitor lobortis nulla.
Text can be bold, italic, or strikethrough, and can contain emoji like 👋 🙂 🚨 🚀.
Inline links should be styled according to the design specifications.
Problematic use cases to fix
HTML tags inside a "paragraph"
How do we avoid the <(/)code> word be indexed, but return only the "ipsum" string within it?
Lorem ipsum dolor.
Images
A simple image
Image with alt text
Image with alt text and custom size
Tables
| What | Follows |
|---|---|
| A table | A header |
| A table | A header |
| A table | A header |
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | $1 | |
inline code |
can be added | too |
Banners
HTML
Hello world
DOC Components
-
01
Rooted in reality
We ground our work and our decisions in reality through data and observations.
-
02
Guidance over control
We provide balance between configurability and composability while driving consistency.
-
03
Quality by default
We recognize that we are providing a service and commit to a baseline of quality to provide value and leverage for our consumers. We iterate on features, not quality.
-
04
Design in context
We meet consumers where they are and consider both the current and future context in which they use the system.
-
05
Consider everyone
We take an inclusive approach to our work from the start, considering the context and range of abilities for all customers.
-
06
Invite feedback
We take time to have the right conversations with the appropriate stakeholders, to validate and create trust in the outcome.
-
1.1.1
Non-text Content (Level A):
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. -
1.2.3
Audio Description or Media Alternative (Level A):
Support
If any accessibility issues have been found within this component, let us know by submitting an issue.
No tokens found. 🤷♀️
<:toggle>
named block
AccordionItem.
type
enum
- page
- inline
- compact
color
enum
- neutral (default)
- highlight
- success
- warning
- critical
background, border, title, and description, which cannot be overridden.color results in a default icon, which can be overridden.
…attributes
...attributes.
<[G].Error>
yielded component
Form::Error component.
The
id attribute of the Error element is automatically generated.
<[E].Message>
yielded component
Error.Message.