Display

Overview

Source: ./src/fragments/typography/OCDisplayV1.mdx

Display

Skip to:

• Class naming convention
• Usage guidelines
• Accessibility

Class naming convention

Classes use the format {prefix}-display-{size}.

Usage guidelines

To use the display utility, add the appropriate CSS class to your text elements. For example, to set the display size to 100 use the oc-display-100 class:

<p class="oc-display-100">This text uses size 100.</p>

Use the controls in the interactive display demo to see these classes in action.

Accessibility

See the accessibility documentation for general guidelines on making your content accessible.

Typography/Display (OCDisplayV1.stories.ts)

Demo: Display

Story: fragments-typography-display--default · tags:

Args: base-class=oc-display-100

{
  name: "Demo: Display",
  args: {
    "base-class": "oc-display-100"
  }
}