Copy

Overview

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

Copy

The copy utility provides CSS classes for responsive text sizing and modifiers, allowing you to control font size and style across breakpoints.

Skip to:

• Class naming convention
• Usage guidelines
• Modifiers
• Accessibility

Class naming convention

Classes use the format {prefix}-copy-{size}--{breakpoint}.

Usage guidelines

To use the copy utility, add the appropriate CSS class to your text elements. To apply responsive sizes, append the breakpoint suffix to the class name. For example, to set the copy size to 100 from the m breakpoint and up, use the oc-copy-100--m class:

<p class="oc-copy-100--m">This text uses size 100 from medium screens and up.</p>

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

Modifiers

The copy utility supports modifiers, such as oc-copy--bold, to combine regular copy classes or breakpoints with additional styles. The following example uses both classes, oc-copy-100 and oc-copy--bold:

<p class="oc-copy-100 oc-copy--bold">This text is size 100 and bold.</p>

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

Accessibility

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

Typography/Copy (OCCopyV1.stories.ts)

Demo: Copy

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

Args: base-class=oc-copy-100

Demo: Modifiers

Story: fragments-typography-copy--modifiers · tags:

Args: base-class=oc-copy-100, modifiers=oc-copy--bold

Demo: Strikethrough

Story: fragments-typography-copy--strike-through · tags:

Args: base-class=oc-copy-100

<p>
  If you need screen reader support for strikethrough text, you need to wrap it inside a
  &lt;s&gt; tag
</p>

<s
  class="${props["base-class"]} 
${props.modifiers} 
${props["breakpoint-s-class"]} 
${props["breakpoint-m-class"]}  
${props["breakpoint-l-class"]}  
${props["breakpoint-xl-class"]}  
${props["breakpoint-xxl-class"]}"
>
  Example copy text which uses the following CSS classes: "${props["base-class"]}
  ${props.modifiers} ${props["breakpoint-s-class"]} ${props["breakpoint-m-class"]}
  ${props["breakpoint-l-class"]} ${props["breakpoint-xl-class"]}
  ${props["breakpoint-xxl-class"]}"
</s>

{
  name: "Demo: Strikethrough",
  args: {
    "base-class": "oc-copy-100"
  },
  render({
    ...props
  }) {
    return html` <p>
        If you need screen reader support for strikethrough text, you need to wrap it inside a
        &lt;s&gt; tag
      </p>

      <s
        class="${props["base-class"]} 
      ${props.modifiers} 
      ${props["breakpoint-s-class"]} 
      ${props["breakpoint-m-class"]}  
      ${props["breakpoint-l-class"]}  
      ${props["breakpoint-xl-class"]}  
      ${props["breakpoint-xxl-class"]}"
      >
        Example copy text which uses the following CSS classes: "${props["base-class"]}
        ${props.modifiers} ${props["breakpoint-s-class"]} ${props["breakpoint-m-class"]}
        ${props["breakpoint-l-class"]} ${props["breakpoint-xl-class"]}
        ${props["breakpoint-xxl-class"]}"
      </s>`;
  }
}