Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Grafana Saga - text
Getting started
Grafana Saga
Grafana UI
Pro
Components
Alert
Badge
Card
Checkbox
Components Status
Field
File Dropzone
Filter Pill
Inline Field
Input
Interactive Table
Modal
Pagination
Plugin Signature
Radio Button
Radio Button Group
Select
Switch
Text
Text Link
Textarea
Toggletip
Tooltip
<ul> <li>Do not use the element prop simply for its appearance, use it to organize the structure of the page.</li> <li>Do not use color for emphasis as colors are linked to states such as error, success, disabled, etc.</li> <li>Do not use the code variant for anything other than code snippets.</li> <li>Avoid using p as the element prop if the Text has nested components as it may break the DOM nesting rules.</li> </ul> </div> </div> </div> <div class="usage-section"> <h2>Content</h2> <p>The content of the text should be written according to the <a href="https://grafana.com/docs/writers-toolkit/write/style-guide/" class="text-link">Grafana writing style guide</a>.</p> </div> <div class="usage-section"> <h2>Formatting</h2> <p>The following is the default behavior and as such, it will be applied according to its type.</p> <h3>Anatomy</h3> <p>The Text component mainly comprises itself. On occasion, the Text component can have another Text or TextLink component as a child.</p> <div class="example-container"> <h4>Example: Text with Link</h4> <span class="text-primary"> If you need more help of how to write in Grafana you can go to our <a href="https://grafana.com/docs/writers-toolkit/" class="text-link" target="_blank">Writer's Toolkit</a>. </span> </div> <h3>Behaviour</h3> <p>The Text component can be truncated. However, the default rendered element for the Text component (when no value is set in the element prop) is <span>. This is an inline container that must have a parent, which may or may not be another Text component. Therefore, truncation must be applied to the parent element.</p> <div class="example-container"> <h4>Example: Truncated Text with Tooltip</h4> <p class="text-primary text-truncate" style="max-width: 300px;"> And Forrest Gump said: <span class="text-italic">Life is like a box of chocolates. You never know what you're gonna get.</span> </p> </div> <div class="example-container"> <h4>Example: Container Truncation with Tooltip</h4> <div class="tooltip-container"> <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px;"> <span class="text-primary">This is an example of a span element truncated by its parent container.</span> </div> <div class="tooltip">This is an example of a span element truncated by its parent container</div> </div> </div> </div> <div class="usage-section"> <h2>Accessibility</h2> <ul> <li>There should be only one h1 heading per page.</li> <li>Headings should be organized according to their significance: h1 has the rank 1 while h6 heading has the rank 6. For instance, h1 can be used for the page heading, h2 for the titles of sections, and h3 for subsections.</li> <li>The ranking of headings should be continuous. An h2 should not be immediately followed by an h5, but an h2 can follow an h5 if this is closing the previous section. Skipping heading ranks should be avoided as much as possible because it can be confusing.</li> </ul> </div> <div class="playground"> <h2>Playground</h2> <p>Interactive component examples would appear here in the actual Storybook environment.</p> </div></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">