Academy of Natural Sciences

Heading Styles 

<div class="frctl-section">

    <div class="frctl-section__entry">
        <h2 class="f-title--h1">The quick brown fox jumps over a lazy dog.</h2>
        <span>
            <code class="fractal-code">class="f-title--h1"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <h2 class="f-title--h2">The quick brown fox jumps over a lazy dog.</h2>
        <span>
            <code class="fractal-code">class="f-title--h2"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <h2 class="f-title--h3">The quick brown fox jumps over a lazy dog.</h2>
        <span>
            <code class="fractal-code">class="f-title--h3"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <h2 class="f-title--h4">The quick brown fox jumps over a lazy dog.</h2>
        <span>
            <code class="fractal-code">class="f-title--h4"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <h2 class="f-title--h5">The quick brown fox jumps over a lazy dog.</h2>
        <span>
            <code class="fractal-code">class="f-title--h5"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <h2 class="f-title--h6">The quick brown fox jumps over a lazy dog.</h2>
        <span>
            <code class="fractal-code">class="f-title--h6"</code>
            <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
        </span>
    </div>

    <div class="frctl-section__entry">
        <strong><em>See notes on styling header tags</em></strong>
        <h1>The quick brown fox jumps over a lazy dog. <code class="fractal-code">tag: h1</code></h1>
        <h2>The quick brown fox jumps over a lazy dog. <code class="fractal-code">tag: h2</code></h2>
        <h3>The quick brown fox jumps over a lazy dog. <code class="fractal-code">tag: h3</code></h3>
        <h4>The quick brown fox jumps over a lazy dog. <code class="fractal-code">tag: h4</code></h4>
        <h5>The quick brown fox jumps over a lazy dog. <code class="fractal-code">tag: h5</code></h5>
        <h6>The quick brown fox jumps over a lazy dog. <code class="fractal-code">tag: h6</code></h6>
    </div>
</div>
 
<div class="frctl-section">
  {% for class in classes %}
    <div class="frctl-section__entry">
      <h2 class="{{ class }}">{{ text }}</h2>
      <span>
        <code class="fractal-code">class="{{ class }}"</code>
        <code class="fractal-code fractal-type-size">font-size: <span class="fractal-insert-fontsize"></span></code>
      </span>
    </div>
  {% endfor %}
  <div class="frctl-section__entry">
    <strong><em>See notes on styling header tags</em></strong>
    <h1>{{ text }} <code class="fractal-code">tag: h1</code></h1>
    <h2>{{ text }} <code class="fractal-code">tag: h2</code></h2>
    <h3>{{ text }} <code class="fractal-code">tag: h3</code></h3>
    <h4>{{ text }} <code class="fractal-code">tag: h4</code></h4>
    <h5>{{ text }} <code class="fractal-code">tag: h5</code></h5>
    <h6>{{ text }} <code class="fractal-code">tag: h6</code></h6>
  </div>
</div>
 
{
  "pageColorTheme": "teal",
  "text": "The quick brown fox jumps over a lazy dog.",
  "classes": [
    "f-title--h1",
    "f-title--h2",
    "f-title--h3",
    "f-title--h4",
    "f-title--h5",
    "f-title--h6"
  ]
}

Heading Markup

The styles of all heading tags have been reset to basic paragraph styles.

Headings should be used in semantic order in the markup. Styling headers with class names allows a preffered visual layout to be achieved while maintaining the proper heading order.