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

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>
 
<table class="example-table">
  <thead>
    <tr>
      <th>Links</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    {{#each links}}
      <tr>
        <td>
          {{render '@helper-code-inline-preview' this}}
        </td>
        <td>{{{example}}}</td>
      </tr>
    {{/each}}
  </tbody>
</table>
 
{
  "links": [
    {
      "snippet": "<h1><a href=\"#\">...</a></h1>",
      "example": "<h1><a href=\"#\">h1 Rehau Heading</a></h1>"
    },
    {
      "snippet": "<h2><a href=\"#\">...</a></h2>",
      "example": "<h2><a href=\"#\">h2 Rehau Heading</a></h2>"
    },
    {
      "snippet": "<h3><a href=\"#\">...</a></h3>",
      "example": "<h3><a href=\"#\">h3 Rehau Heading</a></h3>"
    },
    {
      "snippet": "<h4><a href=\"#\">...</a></h4>",
      "example": "<h4><a href=\"#\">h4 Rehau Heading</a></h4>"
    },
    {
      "snippet": "<h5><a href=\"#\">...</a></h5>",
      "example": "<h5><a href=\"#\">h5 Rehau Heading</a></h5>"
    },
    {
      "snippet": "<h6><a href=\"#\">...</a></h6>",
      "example": "<h6><a href=\"#\">h6 Rehau Heading</a></h6>"
    },
    {
      "snippet": "<p class=\"h1\"><a href=\"#\">...</a></p>",
      "example": "<p class=\"h1\"><a href=\"#\">h1 Rehau Heading</a></p>"
    },
    {
      "snippet": "<p class=\"h2\"><a href=\"#\">...</a></p>",
      "example": "<p class=\"h2\"><a href=\"#\">h2 Rehau Heading</a></p>"
    },
    {
      "snippet": "<p class=\"h3\"><a href=\"#\">...</a></p>",
      "example": "<p class=\"h3\"><a href=\"#\">h3 Rehau Heading</a></p>"
    },
    {
      "snippet": "<p class=\"h4\"><a href=\"#\">...</a></p>",
      "example": "<p class=\"h4\"><a href=\"#\">h4 Rehau Heading</a></p>"
    },
    {
      "snippet": "<p class=\"h5\"><a href=\"#\">...</a></p>",
      "example": "<p class=\"h5\"><a href=\"#\">h5 Rehau Heading</a></p>"
    },
    {
      "snippet": "<p class=\"h6\"><a href=\"#\">...</a></p>",
      "example": "<p class=\"h6\"><a href=\"#\">h6 Rehau Heading</a></p>"
    },
    {
      "snippet": "<p><strong><a href=\"#\">...</a></strong></p>",
      "example": "<p><strong>This line of text is rendered as <a href=\"#\">normal text with link</a></strong></p>"
    },
    {
      "snippet": "<p><em><a href=\"#\">...</a></em></p>",
      "example": "<p><em>This line of text is rendered as <a href=\"#\">normal text with link</a></em></p>"
    },
    {
      "snippet": "<p><a href=\"#\">...</a></p>",
      "example": "<p>This line of text is rendered as <a href=\"#\">normal text with link</a></p>"
    },
    {
      "snippet": "<ul><li><a href=\"#\">...</a></li></ul>",
      "example": "<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>"
    },
    {
      "snippet": "<ol><li><a href=\"#\">...</a></li></ol>",
      "example": "<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>"
    }
  ]
}

There are no notes for this item.