For consistent typography throughout the application, we created text helper classes for headings and body text.
Text: Body Size Default
In our framework, all headings (
are reset to the base (body text) size, with margins and padding reset
to zero. When building an enterprise application, the heading level may vary
depending on the context of the component or page. Using the correct
heading level is important for accessibility.
The text helper classes help maintain visual hierarchy separately from the structural markup hierarchy.
Overview of CSS Classes
- The CSS class being referred to.
- A description of what the class does.
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- The selector that the class name is allowed to be used on.
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.