TheaterMania Component Library

Headings 

<code>H1</code>
<h1 class="heading-xlarge">Lorem ipsum dolor sit amet adipiscing elit</h1>

<code>H2</code>
<h2 class="heading-large">Lorem ipsum dolor sit amet adipiscing elit</h2>

<code>H3</code>
<h3 class="heading-medium">Lorem ipsum dolor sit amet adipiscing elit</h3>

<code>H4</code>
<h4 class="heading-small">Lorem ipsum dolor sit amet adipiscing elit</h4>

<code>H5</code>
<h5 class="heading-xsmall">Lorem ipsum dolor sit amet adipiscing elit</h5>
 
<code>H1</code>
<h1 class="heading-xlarge">{{copy}}</h1>

<code>H2</code>
<h2 class="heading-large">{{copy}}</h2>

<code>H3</code>
<h3 class="heading-medium">{{copy}}</h3>

<code>H4</code>
<h4 class="heading-small">{{copy}}</h4>

<code>H5</code>
<h5 class="heading-xsmall">{{copy}}</h5>
 
{
  "copy": "Lorem ipsum dolor sit amet adipiscing elit"
}
  • Content: 
    .heading-xlarge {
  @include text-title-medium;

  @include breakpoint($break-small) {
    @include text-title-large;
  }

  @include breakpoint($break-medium) {
    @include text-title-xlarge;
  }
}

.heading-large {
  @include text-title-small;

  @include breakpoint($break-small) {
    @include text-title-medium;
  }

  @include breakpoint($break-medium) {
    @include text-title-large;
  }
}

.heading-medium {
  @include text-title-medium;
}

.heading-small {
  @include text-title-small;
}

.heading-xsmall {
  @include text-title-xsmall;
}
  • URL: /components/raw/headings/Headings.scss
  • Filesystem Path: src/components/01-Units/Type/Headings/Headings.scss
  • Size: 550 Bytes

Use headers to compose markup based on structure. Try not to jump header levels. For example, h3 should be within content preceded by an h2. To use header styling without an h tag, use appropiate classes like heading-medium.