Heading Level 1 small text
+This is a standard paragraph of body text. It contains enough words to wrap across multiple lines so you can evaluate line height, measure, and paragraph spacing. Good typography makes content easier to read and understand.
+This is another standard paragraph of body text.
+Heading Level 2 small text
+This is a standard paragraph of body text. It contains enough words to wrap across multiple lines so you can evaluate line height, measure, and paragraph spacing. Good typography makes content easier to read and understand.
+Heading Level 3 small text
+This is a standard paragraph of body text. It contains enough words to wrap across multiple lines so you can evaluate line height, measure, and paragraph spacing. Good typography makes content easier to read and understand.
+Heading Level 4 small text
+This is a standard paragraph of body text. It contains enough words to wrap across multiple lines so you can evaluate line height, measure, and paragraph spacing. Good typography makes content easier to read and understand.
+Heading Level 5 small text
+This is a standard paragraph of body text. It contains enough words to wrap across multiple lines so you can evaluate line height, measure, and paragraph spacing. Good typography makes content easier to read and understand.
+Heading Level 6 small text
+ +This is a standard paragraph of body text. It contains enough words to wrap across multiple lines so you can evaluate line height, measure, and paragraph spacing. Good typography makes content easier to read and understand.
+This second paragraph tests spacing between consecutive paragraphs. It also contains bold text, italic text, bold italic text, and underlined text. Here is strikethrough text for deleted content.
Inline elements: inline code, Ctrl + S keyboard input, highlighted text, small text, subscript and superscript, and abbr.
More inline elements: x = y + z for variables, Error: file not found for sample output, design token for defining terms, and an inline quotation
with automatic quote marks. The formula is E = mc2 and water is H2O.
Edit tracking: This text has been removed and been added to show revision marks.
Here is a standard link within a paragraph. And here is a link with bold and em inside it.
+ ++ +
Unordered List
+-
+
First item in an unordered list
+ - Second item with a bit more text to test wrapping behavior on longer list items +
- Third item with nested list:
+
-
+
- Nested item one +
- Nested item two +
- Deeply nested:
+
-
+
- Third level item +
+
+ - Fourth item back at the top level +
Ordered List
+-
+
- First step in a process +
- Second step with more detail to test line wrapping within ordered list items +
- Third step with a nested ordered list:
+
-
+
- Sub-step one +
- Sub-step two +
+ - Fourth step back at the top level +
Mixed List
+-
+
- Unordered item with an ordered sub-list:
+
-
+
- Ordered sub-item one +
- Ordered sub-item two +
+ - Another unordered item +
Blockquotes
+++This is a single-paragraph blockquote. It should be visually distinct from surrounding body text.
+
++This is a multi-paragraph blockquote. The first paragraph introduces the idea.
+The second paragraph continues the thought. Both paragraphs should sit inside the same blockquote styling.
+
++Nested blockquote:
+++This is a blockquote inside a blockquote.
+
++ +Good design is as little design as possible.
+ +
Code Blocks
+// A plain code block
+return `Hello, ${name}!`;
+const message = greet('world');
+console.log(message);<template>
+ <div class="container">
+ <h1>{{ title }}</h1>
+ <p>{{ description }}</p>
+ </div>
+</template>Tables
+| Property | +Type | +Default | +Description | +
|---|---|---|---|
size |
+ String | +'md' |
+ Sets the size of the component | +
variant |
+ String | +'default' |
+ Sets the visual style variant | +
disabled |
+ Boolean | +false |
+ When true, prevents user interaction | +
| Token | +Value | +Pixels | +
|---|---|---|
--dt-size-300 |
+ 0.4rem | +4px | +
--dt-size-400 |
+ 0.8rem | +8px | +
--dt-size-500 |
+ 1.6rem | +16px | +
Definition List
+-
+
- Design token +
- A named value that represents a design decision, such as a color, spacing unit, or font size. +
- Component +
- A reusable UI element that encapsulates structure, style, and behavior. +
- Utility class +
- A single-purpose CSS class that applies one specific style rule. +
Images
+Details / Summary
+Click to expand for more information
+This content is hidden by default and revealed when the user interacts with the summary element. It can contain any block-level content including paragraphs, lists, and code.
+-
+
- Detail item one +
- Detail item two +
Task List
+-
+
- Completed task +
- Incomplete task +
- Another task to do +
Long-Form Content Flow
+This section tests how all the elements above flow together naturally, as they would in real documentation or article content.
+When building with our design system, start by installing the package:
+npm install @dialpad/dialtoneThen import the styles in your entry file:
+import '@dialpad/dialtone/css';You can now use any of the available utility classes. For example:
+-
+
d-p16— applies 16px padding
+ d-fc-primary— sets the primary font color
+ d-bgc-moderate— applies a moderate background color
+
++Note: Make sure your build pipeline is configured to process CSS imports before using utility classes in production.
+
For more details, see the installation guide or reach out to the team on Slack.
+