Typography

<!-- 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>

<!-- Inline Elements -->
<p>This line of text is rendered as normal text</p>
  <p class="body-24">This line of text is rendered as normal text with body-24 class</p>
  <p class="body-28">This line of text is rendered as normal text with body-28 class</p>
  <p><del>This line of text is rendered as deleted text</del></p>
  <p><s>This line of text is rendered as no longer accurate</s></p>
  <p><ins>This line of text is rendered as an addition to the document</ins></p>
  <p><u>This line of text is rendered as underlined text</u></p>
  <p><strong>This line of text is rendered as bold text</strong></p>
  <p><em>This line of text is rendered as italicized text</em></p>
  <p><small>This line of text is rendered as fine print</small></p>
  <p>This line of text has <sub>subscripted</sub> content</p>
  <p>This line of text has <sup>superscripted</sup> content</p>
  <p>This line of text has <mark>highlighted</mark> content</p>
  <p>This line of text has <code>Inline Code Element</code></p>
  <p>This line of text has <abbr title="Description of the Abbreviation">Abbreviation Element</abbr></p>

  <pre class="code-preview">&lt;p&gt;This line of text is rendered as normal text&lt;/p&gt;
&lt;p class&#x3D;&quot;body-24&quot;&gt;This line of text is rendered as normal text with body-24 class&lt;/p&gt;
&lt;p class&#x3D;&quot;body-28&quot;&gt;This line of text is rendered as normal text with body-28 class&lt;/p&gt;
&lt;p&gt;&lt;del&gt;This line of text is rendered as deleted text&lt;/del&gt;&lt;/p&gt;
&lt;p&gt;&lt;s&gt;This line of text is rendered as no longer accurate&lt;/s&gt;&lt;/p&gt;
&lt;p&gt;&lt;ins&gt;This line of text is rendered as an addition to the document&lt;/ins&gt;&lt;/p&gt;
&lt;p&gt;&lt;u&gt;This line of text is rendered as underlined text&lt;/u&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;This line of text is rendered as bold text&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;This line of text is rendered as italicized text&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;small&gt;This line of text is rendered as fine print&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;This line of text has &lt;sub&gt;subscripted&lt;/sub&gt; content&lt;/p&gt;
&lt;p&gt;This line of text has &lt;sup&gt;superscripted&lt;/sup&gt; content&lt;/p&gt;
&lt;p&gt;This line of text has &lt;mark&gt;highlighted&lt;/mark&gt; content&lt;/p&gt;
&lt;p&gt;This line of text has &lt;code&gt;Inline Code Element&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;This line of text has &lt;abbr title&#x3D;&quot;Description of the Abbreviation&quot;&gt;Abbreviation Element&lt;/abbr&gt;&lt;/p&gt;
</pre>

<!-- Lists -->
<ul>
    <li>Integer sed mi interdum, mattis neque at, consectetur odio.</li>
    <li>Sed vitae lorem non felis interdum rutrum non vel eros.
        <ul>
            <li>Cras eu nulla a ipsum congue dignissim et nec enim.</li>
            <li>Morbi a augue non purus ornare imperdiet non ut ex.</li>
        </ul>
    </li>
    <li>Duis a eros vestibulum, consequat nunc et, tincidunt tortor.</li>
    <li>Ut id dolor viverra, tempus nisi eu, congue dui.
        <ol>
            <li>Cras eu nulla a ipsum congue dignissim et nec enim.</li>
            <li>Morbi a augue non purus ornare imperdiet non ut ex.</li>
        </ol>
    </li>
    <li>Aenean at lacus quis ex lacinia molestie.</li>
</ul>

<ol>
    <li>Integer sed mi interdum, mattis neque at, consectetur odio.</li>
    <li>Sed vitae lorem non felis interdum rutrum non vel eros.
        <ol>
            <li>Cras eu nulla a ipsum congue dignissim et nec enim.</li>
            <li>Morbi a augue non purus ornare imperdiet non ut ex.</li>
        </ol>
    </li>
    <li>Duis a eros vestibulum, consequat nunc et, tincidunt tortor.</li>
    <li>Ut id dolor viverra, tempus nisi eu, congue dui.
        <ul>
            <li>Cras eu nulla a ipsum congue dignissim et nec enim.</li>
            <li>Morbi a augue non purus ornare imperdiet non ut ex.</li>
        </ul>
    </li>
    <li>Aenean at lacus quis ex lacinia molestie.</li>
</ol>

<pre class="code-preview">&lt;ul&gt;
  &lt;li&gt;Integer sed mi interdum
    &lt;ul&gt;
      &lt;li&gt;Cras eu nulla a ipsum&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Sed vitae lorem non felis interdum rutrum non vel eros&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
  &lt;li&gt;Integer sed mi interdum
    &lt;ol&gt;
      &lt;li&gt;Cras eu nulla a ipsum&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;Sed vitae lorem non felis interdum rutrum non vel eros&lt;/li&gt;
&lt;/ol&gt;
</pre>

<!-- Links -->
<table class="example-table">
    <thead>
        <tr>
            <th>Links</th>
            <th>Example</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;h1&gt;&lt;a href&#x3D;&quot;#&quot;&gt;...&lt;/a&gt;&lt;/h1&gt;</code>

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

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

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

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

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

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

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

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

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

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

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

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

            </td>
            <td>
                <p><strong>This line of text is rendered as <a href="#">normal text with link</a></strong></p>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;p&gt;&lt;em&gt;&lt;a href&#x3D;&quot;#&quot;&gt;...&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;</code>

            </td>
            <td>
                <p><em>This line of text is rendered as <a href="#">normal text with link</a></em></p>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;p&gt;&lt;a href&#x3D;&quot;#&quot;&gt;...&lt;/a&gt;&lt;/p&gt;</code>

            </td>
            <td>
                <p>This line of text is rendered as <a href="#">normal text with link</a></p>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;ul&gt;&lt;li&gt;&lt;a href&#x3D;&quot;#&quot;&gt;...&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;</code>

            </td>
            <td>
                <ul>
                    <li><a href="#">Integer sed mi interdum</a></li>
                    <li>Sed vitae lorem non <a href="#">felis interdum</a> rutrum non vel eros</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <code class="code-inline-preview">&lt;ol&gt;&lt;li&gt;&lt;a href&#x3D;&quot;#&quot;&gt;...&lt;/a&gt;&lt;/li&gt;&lt;/ol&gt;</code>

            </td>
            <td>
                <ol>
                    <li><a href="#">Integer sed mi interdum</a></li>
                    <li>Sed vitae lorem non <a href="#">felis interdum</a> rutrum non vel eros</li>
                </ol>
            </td>
        </tr>
    </tbody>
</table>

<!-- Languages -->
<table class="example-table" lang="zh-CN">
      <thead>
          <tr>
              <th>Chinese (zh-CN)</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
                  <h1>德国瑞好 BREATHE 空气净化机</h1>
                  <h2>德国瑞好 BREATHE 空气净化机</h2>
                  <h3>德国瑞好 BREATHE 空气净化机</h3>
              </td>
          </tr>
          <tr>
              <td>
                  <p><strong>德国瑞好认为，在生命的第一天，随着第一次呼吸，人生就此启程。因此，德国瑞好推出BREATHE家具式空气净化机，希望能为呼吸竭尽所能，创造全新的鲜活体验</strong></p>
                  <p><em>德国瑞好认为，在生命的第一天，随着第一次呼吸，人生就此启程。因此，德国瑞好推出BREATHE家具式空气净化机，希望能为呼吸竭尽所能，创造全新的鲜活体验</em></p>
                  <p>德国瑞好认为，在生命的第一天，随着第一次呼吸，人生就此启程。因此，德国瑞好推出BREATHE家具式空气净化机，希望能为呼吸竭尽所能，创造全新的鲜活体验</p>
              </td>
          </tr>
      </tbody>
  </table>
  <table class="example-table" lang="ka-GE">
      <thead>
          <tr>
              <th>Georgian (ka-GE)</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
                  <h1>გათბობა/გაციების რეჟიმების გადართვა ავტომატურია!</h1>
                  <h2>გათბობა/გაციების რეჟიმების გადართვა ავტომატურია!</h2>
                  <h3>გათბობა/გაციების რეჟიმების გადართვა ავტომატურია!</h3>
              </td>
          </tr>
          <tr>
              <td>
                  <p><strong>REHAU-ს ავტომატური რეგულირების სისტემა საშუალებას მოგცემთ განახორციელოთ თქვენი ოცნება „გონიერი სახლი“. ამინდის </strong></p>
                  <p><em>REHAU-ს ავტომატური რეგულირების სისტემა საშუალებას მოგცემთ განახორციელოთ თქვენი ოცნება „გონიერი სახლი“. ამინდის </em></p>
                  <p>REHAU-ს ავტომატური რეგულირების სისტემა საშუალებას მოგცემთ განახორციელოთ თქვენი ოცნება „გონიერი სახლი“. ამინდის </p>
              </td>
          </tr>
      </tbody>
  </table>
  <table class="example-table" lang="el-GR">
      <thead>
          <tr>
              <th>Greek (el-GR)</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
                  <h1>Σημεία αναφοράς - Συστήματα REHAU</h1>
                  <h2>Σημεία αναφοράς - Συστήματα REHAU</h2>
                  <h3>Σημεία αναφοράς - Συστήματα REHAU</h3>
              </td>
          </tr>
          <tr>
              <td>
                  <p><strong>Έξυπνες λύσεις που χρησιμοποιούνται στο μέγιστο των δυνατοτήτων τους, ακόμα και κάτω από δύσκολες συνθήκες</strong></p>
                  <p><em>Έξυπνες λύσεις που χρησιμοποιούνται στο μέγιστο των δυνατοτήτων τους, ακόμα και κάτω από δύσκολες συνθήκες</em></p>
                  <p>Έξυπνες λύσεις που χρησιμοποιούνται στο μέγιστο των δυνατοτήτων τους, ακόμα και κάτω από δύσκολες συνθήκες</p>
              </td>
          </tr>
      </tbody>
  </table>
  <table class="example-table" lang="ru-RU">
      <thead>
          <tr>
              <th>Russian (ru-RU)</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
                  <h1>Компания REHAU открыла новый офис в Грузии</h1>
                  <h2>Компания REHAU открыла новый офис в Грузии</h2>
                  <h3>Компания REHAU открыла новый офис в Грузии</h3>
              </td>
          </tr>
          <tr>
              <td>
                  <p><strong>13 сентября 2018 года состоялось официальное открытие нового офиса REHAU в Тбилиси (Грузия)</strong></p>
                  <p><em>13 сентября 2018 года состоялось официальное открытие нового офиса REHAU в Тбилиси (Грузия)</em></p>
                  <p>13 сентября 2018 года состоялось официальное открытие нового офиса REHAU в Тбилиси (Грузия)</p>
              </td>
          </tr>
      </tbody>
  </table>
  <table class="example-table" lang="th-TH">
      <thead>
          <tr>
              <th>Thai (th-TH)</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
                  <h1>การจ่ายน้ำ - REHAU Hybrid</h1>
                  <h2>การจ่ายน้ำ - REHAU Hybrid</h2>
                  <h3>การจ่ายน้ำ - REHAU Hybrid</h3>
              </td>
          </tr>
          <tr>
              <td>
                  <p><strong>ระบบผสมผสานของ REHAU นำจุดแข็งที่สำคัญของระบบ PEX และระบบ PP-R มารวมไว้ในระบบท่อแบบรวม (16-110 มม.)</strong></p>
                  <p><em>ระบบผสมผสานของ REHAU นำจุดแข็งที่สำคัญของระบบ PEX และระบบ PP-R มารวมไว้ในระบบท่อแบบรวม (16-110 มม.)</em></p>
                  <p>ระบบผสมผสานของ REHAU นำจุดแข็งที่สำคัญของระบบ PEX และระบบ PP-R มารวมไว้ในระบบท่อแบบรวม (16-110 มม.)</p>
              </td>
          </tr>
      </tbody>
  </table>
  <table class="example-table" lang="vi-VN">
      <thead>
          <tr>
              <th>Vietnamese (vi-VN)</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
                  <h1>Hệ thống cửa sổ và cửa đi</h1>
                  <h2>Hệ thống cửa sổ và cửa đi</h2>
                  <h3>Hệ thống cửa sổ và cửa đi</h3>
              </td>
          </tr>
          <tr>
              <td>
                  <p><strong>REHAU là một trong những đơn vị sản xuất hệ thống cửa sổ và cửa đi cao cấp lớn nhất trên toàn thế giới</strong></p>
                  <p><em>REHAU là một trong những đơn vị sản xuất hệ thống cửa sổ và cửa đi cao cấp lớn nhất trên toàn thế giới</em></p>
                  <p>REHAU là một trong những đơn vị sản xuất hệ thống cửa sổ và cửa đi cao cấp lớn nhất trên toàn thế giới</p>
              </td>
          </tr>
      </tbody>
  </table>