Overview
Source: ./src/fragments/typography/Typography.mdx
Typography
The typography fragment provides a set of utilities for consistent text styling across your project. This page covers text modifier utilities (CSS classes for text decoration, with a linked demo below).
Info
See the Typography UX documentation for detailed design guidelines.
For more details on other typography topics, see Copy utility overview for responsive copy text sizes and modifiers, and Headlines utility overview for headline styles for section and page titles. For text color utilities, see the Color fragment.
Skip to:
Text modifier utilities
The following classes are available for modifying text appearance:
| Class name | Description |
|---|---|
oc-underline |
Underlines the text |
oc-line-through |
Strikes through the text |
oc-no-decoration |
Removes all text decoration |
Usage guidelines
To use the typography utilities, add the appropriate CSS classes to your text elements.
For example, to apply a underline to a paragraph, use the oc-underline class:
<p class="oc-underline">This text will be underlined.</p>
Use the controls in the interactive modifiers demo to see these classes in action.
Info
See the Typography UX documentation for detailed user experience guidelines and best practices on typography usage.
Accessibility
See the accessibility documentation for general guidelines on making your content accessible.
Typography (Modifier.stories.ts)
Demo: Modifiers
Story: fragments-typography--modifiers · tags:
Args: modifier-class=oc-line-through