Overview
Source: ./src/fragments/typography/OCHeadlineV1.mdx
Headlines
The headlines utility provides CSS classes for responsive heading sizes, allowing you to control headline appearance across breakpoints.
Skip to:
Class naming convention
Classes use the format {prefix}-headline-{size}--{breakpoint}.
| Element | Description |
|---|---|
prefix |
Always oc for OTTO Components |
size |
One of 10, 25, 50, 100, 200, 300, 400 |
breakpoint |
Optional, one of s, m, l, xl, xxl (applies styles from the breakpoint upwards) |
Usage guidelines
To use the headline utility, add the appropriate CSS class to your heading elements.
For example, to set the headline size to 100 from the m breakpoint and up, use the oc-headline-100--m class:
<h1 class="oc-headline-100--m">This is a headline using size 100 from medium screens and up.</h1>
Use the controls in the interactive headline demo to see these classes in action.
Accessibility
See the accessibility documentation for general guidelines on making your content accessible.
Typography/Headlines (OCHeadlineV1.stories.ts)
Demo: Headlines
Story: fragments-typography-headlines--default · tags:
Args: base-class=oc-headline-100