Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Headings 

<p>All HTML headings, <code class="code-inline-preview">&lt;h1&gt;</code> through <code class="code-inline-preview">&lt;h6&gt;</code>,
    are available.</p>
<table class="example-table">
    <thead>
        <tr>
            <th>Heading</th>
            <th>Example</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;h1&gt;...&lt;/h1&gt;</code>

            </td>
            <td>
                <h1>h1 Rehau Heading</h1>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;h2&gt;...&lt;/h2&gt;</code>

            </td>
            <td>
                <h2>h2 Rehau Heading</h2>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;h3&gt;...&lt;/h3&gt;</code>

            </td>
            <td>
                <h3>h3 Rehau Heading</h3>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;h4&gt;...&lt;/h4&gt;</code>

            </td>
            <td>
                <h4>h4 Rehau Heading</h4>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;h5&gt;...&lt;/h5&gt;</code>

            </td>
            <td>
                <h5>h5 Rehau Heading</h5>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;h6&gt;...&lt;/h6&gt;</code>

            </td>
            <td>
                <h6>h6 Rehau Heading</h6>
            </td>
        </tr>
    </tbody>
</table>

<p><code class="code-inline-preview">.h1</code> heading can have a signet "New"</p>
<h1><span class="h1__signet">New</span>Heading</h1>

<p><code class="code-inline-preview">.h1</code> through <code class="code-inline-preview">.h6</code> classes are also
    available</p>
<table class="example-table">
    <thead>
        <tr>
            <th>Heading</th>
            <th>Example</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;p class&#x3D;&quot;headline-140&quot;&gt;...&lt;/p&gt;</code>

            </td>
            <td>
                <p class="headline-140">headline-140 Rehau Heading</p>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;p class&#x3D;&quot;headline-100&quot;&gt;...&lt;/p&gt;</code>

            </td>
            <td>
                <p class="headline-100">headline-100 Rehau Heading</p>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;p class&#x3D;&quot;headline-60&quot;&gt;...&lt;/p&gt;</code>

            </td>
            <td>
                <p class="headline-60">headline-60 Rehau Heading</p>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;p class&#x3D;&quot;headline-48&quot;&gt;...&lt;/p&gt;</code>

            </td>
            <td>
                <p class="headline-48">headline-48 Rehau Heading</p>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;p class&#x3D;&quot;h1&quot;&gt;...&lt;/p&gt;</code>

            </td>
            <td>
                <p class="h1">h1 Rehau Heading</p>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;p class&#x3D;&quot;h2&quot;&gt;...&lt;/p&gt;</code>

            </td>
            <td>
                <p class="h2">h2 Rehau Heading</p>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;p class&#x3D;&quot;h3&quot;&gt;...&lt;/p&gt;</code>

            </td>
            <td>
                <p class="h3">h3 Rehau Heading</p>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;p class&#x3D;&quot;h4&quot;&gt;...&lt;/p&gt;</code>

            </td>
            <td>
                <p class="h4">h4 Rehau Heading</p>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;p class&#x3D;&quot;h5&quot;&gt;...&lt;/p&gt;</code>

            </td>
            <td>
                <p class="h5">h5 Rehau Heading</p>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;p class&#x3D;&quot;h6&quot;&gt;...&lt;/p&gt;</code>

            </td>
            <td>
                <p class="h6">h6 Rehau Heading</p>
            </td>
        </tr>
    </tbody>
</table>
 
<p>All HTML headings, <code class="code-inline-preview">&lt;h1&gt;</code> through <code
    class="code-inline-preview">&lt;h6&gt;</code>,
  are available.</p>
<table class="example-table">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    {{#each headings}}
      <tr>
        <td>
          {{render '@helper-code-inline-preview' this}}
        </td>
        <td>{{{example}}}</td>
      </tr>
    {{/each}}
  </tbody>
</table>

<p><code class="code-inline-preview">.h1</code> heading can have a signet "New"</p>
<h1><span class="h1__signet">New</span>Heading</h1>

<p><code class="code-inline-preview">.h1</code> through <code class="code-inline-preview">.h6</code> classes are also
  available</p>
<table class="example-table">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    {{#each classes}}
      <tr>
        <td>
          {{render '@helper-code-inline-preview' this}}
        </td>
        <td>{{{example}}}</td>
      </tr>
    {{/each}}
  </tbody>
</table>
 
{
  "headings": [
    {
      "snippet": "<h1>...</h1>",
      "example": "<h1>h1 Rehau Heading</h1>"
    },
    {
      "snippet": "<h2>...</h2>",
      "example": "<h2>h2 Rehau Heading</h2>"
    },
    {
      "snippet": "<h3>...</h3>",
      "example": "<h3>h3 Rehau Heading</h3>"
    },
    {
      "snippet": "<h4>...</h4>",
      "example": "<h4>h4 Rehau Heading</h4>"
    },
    {
      "snippet": "<h5>...</h5>",
      "example": "<h5>h5 Rehau Heading</h5>"
    },
    {
      "snippet": "<h6>...</h6>",
      "example": "<h6>h6 Rehau Heading</h6>"
    }
  ],
  "classes": [
    {
      "snippet": "<p class=\"headline-140\">...</p>",
      "example": "<p class=\"headline-140\">headline-140 Rehau Heading</p>"
    },
    {
      "snippet": "<p class=\"headline-100\">...</p>",
      "example": "<p class=\"headline-100\">headline-100 Rehau Heading</p>"
    },
    {
      "snippet": "<p class=\"headline-60\">...</p>",
      "example": "<p class=\"headline-60\">headline-60 Rehau Heading</p>"
    },
    {
      "snippet": "<p class=\"headline-48\">...</p>",
      "example": "<p class=\"headline-48\">headline-48 Rehau Heading</p>"
    },
    {
      "snippet": "<p class=\"h1\">...</p>",
      "example": "<p class=\"h1\">h1 Rehau Heading</p>"
    },
    {
      "snippet": "<p class=\"h2\">...</p>",
      "example": "<p class=\"h2\">h2 Rehau Heading</p>"
    },
    {
      "snippet": "<p class=\"h3\">...</p>",
      "example": "<p class=\"h3\">h3 Rehau Heading</p>"
    },
    {
      "snippet": "<p class=\"h4\">...</p>",
      "example": "<p class=\"h4\">h4 Rehau Heading</p>"
    },
    {
      "snippet": "<p class=\"h5\">...</p>",
      "example": "<p class=\"h5\">h5 Rehau Heading</p>"
    },
    {
      "snippet": "<p class=\"h6\">...</p>",
      "example": "<p class=\"h6\">h6 Rehau Heading</p>"
    }
  ]
}

There are no notes for this item.