Web Docs

Lines & Borders 

<!-- Horizontal Rule -->
<hr>


<!-- Table -->
<div class="table-container " tabindex="0" role="group" aria-labelledby="caption-id">
    <table>
        <thead>
            <tr>
                <th scope="col">Heading&nbsp;1</th>
                <th scope="col">Heading&nbsp;2</th>
                <th scope="col">Heading&nbsp;3</th>
                <th scope="col">Heading&nbsp;4</th>
            </tr>
        </thead>

        <tbody>
            <tr>

                <td>Cell&nbsp;1.1</td>
                <td>Cell&nbsp;1.2</td>
                <td>Cell&nbsp;1.3</td>
                <td>Cell&nbsp;1.4</td>
            </tr>
            <tr>

                <td>Cell&nbsp;2.1</td>
                <td>Cell&nbsp;2.2</td>
                <td>Cell&nbsp;2.3</td>
                <td>Cell&nbsp;2.4</td>
            </tr>
            <tr>

                <td>Cell&nbsp;3.1</td>
                <td>Cell&nbsp;3.2</td>
                <td>Cell&nbsp;3.3</td>
                <td>Cell&nbsp;3.4</td>
            </tr>
        </tbody>
    </table>
</div>


<!-- Horizontal Rule -->
<hr>

<!-- Table -->
{{> '@table' }}
  • Content: 
    hr
	margin: $spacing6 15% $spacing6 10%
	border: 0
	height: 1px
	background: $colorLineDark
  • URL: /components/raw/lines/lines.sass
  • Filesystem Path: src/components/0-foundation/lines/lines.sass
  • Size: 93 Bytes 
/* Horizontal Rule */
{
  "markupBefore": "<p>Horizontal rules have spacing above and below. They're a little darker than other borders and lines.</p>",
  "markupAfter": "<p>Horizontal rules provide a distinct break between sections to indicate a change, such as a change in voice or thought.</p>"
}


/* Table */
{
  "caption": {
    "data": "Table borders follow the conventions for other borders and lines.",
    "id": "caption-id"
  },
  "head": {
    "cells": [
      {
        "data": "Heading&nbsp;1"
      },
      {
        "data": "Heading&nbsp;2"
      },
      {
        "data": "Heading&nbsp;3"
      },
      {
        "data": "Heading&nbsp;4"
      }
    ]
  },
  "rows": [
    {
      "cells": [
        {
          "data": "Cell&nbsp;1.1"
        },
        {
          "data": "Cell&nbsp;1.2"
        },
        {
          "data": "Cell&nbsp;1.3"
        },
        {
          "data": "Cell&nbsp;1.4"
        }
      ]
    },
    {
      "cells": [
        {
          "data": "Cell&nbsp;2.1"
        },
        {
          "data": "Cell&nbsp;2.2"
        },
        {
          "data": "Cell&nbsp;2.3"
        },
        {
          "data": "Cell&nbsp;2.4"
        }
      ]
    },
    {
      "cells": [
        {
          "data": "Cell&nbsp;3.1"
        },
        {
          "data": "Cell&nbsp;3.2"
        },
        {
          "data": "Cell&nbsp;3.3"
        },
        {
          "data": "Cell&nbsp;3.4"
        }
      ]
    }
  ]
}