Text Styles
The following table demonstrates standard paragraph text and various inline text styles. These styles can be applied to enhance readability, emphasize important information, or provide semantic meaning to the content.
| Element / Modifier | Meaning | Preview (Live) | Code Snippet |
|---|---|---|---|
| Default | Standard body text | Default paragraph text. | <p>Default paragraph text.</p> |
| Small | Small text | Small text in a paragraph. | <p><small>Small text</small></p> |
| Strong | Semantic importance | Strong text in a paragraph. | <p><strong>Strong text</strong></p> |
| Italic | Emphasized text | Emphasized text in a paragraph. | <p><em>Emphasized text</em></p> |
| Bold Class | Utility-based weight | Bold span tag | <span class="-bold">...</span> |
| Italic Class | Utility-based style | Italic span tag | <span class="-italic">...</span> |
| Marked Text | Highlight words in a text | Text with marked text | <mark>...</mark> |
| Marked Text (Current Match) | Highlight the current match e.g. in search results | Text with current match | <mark class="-is-current-match">...</mark> |
| Code | Inline Code | Text with | <code>...</code> |