<div class="table table--zebra table--primary">
    <table>

        <thead>
            <th>Title</th>
            <th>Description</th>
            <th>Type</th>
            <th>Required</th>
        </thead>

        <tbody>

            <tr>
                <td class="table__lead-cell" data-header="Title">Identifier</td>
                <td data-header="Description">The unique identifier for this grant. Made up of your 360Giving prefix, and an identifier from your records. See the 360Giving Grant identifier guidance for details.</td>
                <td data-header="Type"><code>string</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--true">check</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Title</td>
                <td data-header="Description">A title for this grant activity. This should be under 140 characters long.</td>
                <td data-header="Type"><code>string</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--true">check</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Description</td>
                <td data-header="Description">A short description of this grant activity.</td>
                <td data-header="Type"><code>string</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--true">check</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Currency</td>
                <td data-header="Description">The currency used in amounts. Use the three-letter <a href='#'>currency code from ISO 4217</a> eg: Use GBP for Pounds Sterling.</td>
                <td data-header="Type"><code>string</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--true">check</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Amount Applied For</td>
                <td data-header="Description">Total amount applied for in numbers (do not include commas or currency symbols such as £). If you have provided detailed transaction information on a separate table, this should equal the sum of all the application transactions for this grant.</td>
                <td data-header="Type"><code>number</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--false">close</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Amount Awarded</td>
                <td data-header="Description">Total amount awarded in numbers (do not include commas or currency symbols such as £). If you have provided detailed transaction information on a separate table, this should equal the sum of all the award transactions for this grant.</td>
                <td data-header="Type"><code>number</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--true">check</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Amount Disbursed</td>
                <td data-header="Description">Total amount disbursed (paid) to this grantee when this record was last updated (in numbers: do not include commas or currency symbols such as £)). If you have provided detailed transaction information on a separate table, this should equal the sum of all the disbursement transactions for this grant.</td>
                <td data-header="Type"><code>number</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--false">close</i>

                </td>
            </tr>

            <tr>
                <td class="table__lead-cell" data-header="Title">Award Date</td>
                <td data-header="Description">When was the decision to award this grant made. The date should be written as YYYY-MM-DD, or in full date-time format.</td>
                <td data-header="Type"><code>string</code></td>
                <td data-header="Required" class="table__checks">

                    <i class="material-icons table--true">check</i>

                </td>
            </tr>

        </tbody>
    </table>
</div>
<div class="table table--zebra table--primary">
  <table>
    {% if header %}
    <thead>
      <th>{{ header.th1 }}</th>
      <th>{{ header.th2 }}</th>
      <th>{{ header.th3 }}</th>
      <th>{{ header.th4 }}</th>
    </thead>
    {% endif %}
    <tbody>
      {% for i in body %}
      <tr>
        <td class="table__lead-cell" data-header="{{ header.th1 }}">{{ i.row.cell1 | safe }}</td>
        <td data-header="{{ header.th2 }}">{{ i.row.cell2 | safe }}</td>
        <td data-header="{{ header.th3 }}"><code>{{ i.row.cell3 | safe }}</code></td>
        <td data-header="{{ header.th4 }}"class="table__checks">
          {% if i.row.cell4 %}
          <i class="material-icons table--{{i.row.cell4}}">check</i>
          {% else %}
          <i class="material-icons table--{{i.row.cell4}}">close</i>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{
  "header": {
    "th1": "Title",
    "th2": "Description",
    "th3": "Type",
    "th4": "Required"
  },
  "body": [
    {
      "row": {
        "cell1": "Identifier",
        "cell2": "The unique identifier for this grant. Made up of your 360Giving prefix, and an identifier from your records. See the 360Giving Grant identifier guidance for details.",
        "cell3": "string",
        "cell4": true
      }
    },
    {
      "row": {
        "cell1": "Title",
        "cell2": "A title for this grant activity. This should be under 140 characters long.",
        "cell3": "string",
        "cell4": true
      }
    },
    {
      "row": {
        "cell1": "Description",
        "cell2": "A short description of this grant activity.",
        "cell3": "string",
        "cell4": true
      }
    },
    {
      "row": {
        "cell1": "Currency",
        "cell2": "The currency used in amounts. Use the three-letter <a href='#'>currency code from ISO 4217</a> eg: Use GBP for Pounds Sterling.",
        "cell3": "string",
        "cell4": true
      }
    },
    {
      "row": {
        "cell1": "Amount Applied For",
        "cell2": "Total amount applied for in numbers (do not include commas or currency symbols such as £). If you have provided detailed transaction information on a separate table, this should equal the sum of all the application transactions for this grant.",
        "cell3": "number",
        "cell4": false
      }
    },
    {
      "row": {
        "cell1": "Amount Awarded",
        "cell2": "Total amount awarded in numbers (do not include commas or currency symbols such as £). If you have provided detailed transaction information on a separate table, this should equal the sum of all the award transactions for this grant.",
        "cell3": "number",
        "cell4": true
      }
    },
    {
      "row": {
        "cell1": "Amount Disbursed",
        "cell2": "Total amount disbursed (paid) to this grantee when this record was last updated (in numbers: do not include commas or currency symbols such as £)). If you have provided detailed transaction information on a separate table, this should equal the sum of all the disbursement transactions for this grant.",
        "cell3": "number",
        "cell4": false
      }
    },
    {
      "row": {
        "cell1": "Award Date",
        "cell2": "When was the decision to award this grant made. The date should be written as YYYY-MM-DD, or in full date-time format.",
        "cell3": "string",
        "cell4": true
      }
    }
  ]
}
  • Content:
    .table {
      --table-border-hsl: var(--base-hsl);
      --table-text-hsl: var(--base-hsl);
      --table-bg-hsl: var(--base-hsl);
    
      font-size: .9rem;
      border: 1px solid hsla(var(--table-border-hsl), .2);
      border-radius: 3px;
    
      table { margin: 0; }
    
      a {
        font-weight: inherit;
        text-decoration: underline;
        text-underline-position: under;
      }
    
      th, td {
        padding: 8px;
        vertical-align: top;
        color: hsla(var(--table-text-hsl), 1);
        display: block;
        @include breakpoint($medium) {
          display: table-cell;
          padding: 8px 16px;
        }
      }
    
      th { background-color: hsla(var(--table-bg-hsl), .1); }
      tr + tr { border-top: 1px solid hsla(var(--table-bg-hsl), .2); }
    
      th {
        display: none;
        @include breakpoint($medium) { display: table-cell; }
      }
    
      td {
        display: block;
        @include breakpoint($medium) { display: table-cell; }
      }
    }
    
    .table {
      @include breakpoint($small-only) {
        td:before {
          content: attr(data-header);
          display: block;
          font-weight: 400;
          background-color: hsla(var(--table-bg-hsl), .1);
          margin: -8px -8px 4px -8px;
          padding: 4px 8px;
        }
      }
    }
    
    .table--zebra {
      tr:nth-of-type(even) { background-color: hsla(var(--table-bg-hsl), .04); }
    }
    
    .table__lead-cell {
      font-weight: 500;
      min-width: 180px;
    }
    
    .table__checks {
      @include breakpoint($medium) { text-align: center; }
    }
    
    .table--true  { color: hsla(var(--teal-dark-hsl), 1); }
    .table--false { color: hsla(var(--red-hsl), 1);; }
    
    /* Primary styling */
    .table--primary {
      border: none;
      border-bottom: 1px solid $orange-tint-lighter;
    
      th {
        background: $orange-tint-lighter;
        font-size: 20px;
        font-weight: 700;
        padding: 16px 14px;
        border: none;
      }
    
      thead {
        tr:first-of-type {
          border-radius: 3px 3px 0px 0px;
    
          th:first-of-type {
            border-top-left-radius: 3px;
          }
    
          th:last-of-type {
            border-top-right-radius: 3px;
          }
        }
      }
    
      tr {
        border: none;
    
        td + td {
          border-left: 1px solid $orange-tint-lighter;
        }
    
        &:nth-of-type(odd) {
          background: $orange-tint-fade;
        }
    
        &:nth-of-type(even) {
          background: $orange-tint-light;
        }
    
        + tr {
          border: none;
        }
      }
    }
    
    .table--primary-light {
      table {
        border: solid 1px $orange-tint-light;
      }
    
      th {
        background: $orange-tint-lightest;
      }
    
      td {
        border: solid 1px $orange-tint-light;
      }
    }
    
    /* Secondary styling */
    .table--secondary {
      border: none;
      border-bottom: 1px solid $yellow-tint-dark;
    
      th {
        background: $yellow-tint-dark;
        font-size: 16px;
        font-weight: 700;
        padding: 16px 14px;
        border: none;
      }
    
      thead {
        tr:first-of-type {
          border-radius: 3px 3px 0px 0px;
    
          th:first-of-type {
            border-top-left-radius: 3px;
          }
    
          th:last-of-type {
            border-top-right-radius: 3px;
          }
        }
      }
    
      tr {
        border: none;
    
        td + td {
          border-left: 1px solid $yellow-tint-dark;
        }
    
        &:nth-of-type(odd) {
          background: $yellow-tint-fade;
        }
    
        &:nth-of-type(even) {
          background: $yellow-tint-light;
        }
    
        + tr {
          border: none;
        }
      }
    }
    
    
    .table--small {
      width: 100%;
      border: none;
      border-bottom: 1px solid $orange-tint-lighter;
    
      th {
        background: $orange-tint-lighter;
        font-size: 16px;
        font-weight: 600;
        padding: 16px 14px;
        border: none;
      }
    
      thead {
        tr:first-of-type {
          border-radius: 3px 3px 0px 0px;
    
          th:first-of-type {
            border-top-left-radius: 3px;
          }
    
          th:last-of-type {
            border-top-right-radius: 3px;
          }
        }
      }
    
      tr {
        border: none;
    
        td + td {
          border-left: 1px solid $orange-tint-lighter;
        }
    
        &:nth-of-type(odd) {
          background: $orange-tint-fade;
        }
    
        &:nth-of-type(even) {
          background: $orange-tint-light;
        }
    
        + tr {
          border: none;
        }
      }
    }
  • URL: /components/raw/table/table.scss
  • Filesystem Path: src/components/03-components/table/table.scss
  • Size: 3.9 KB

No notes defined.