dxw style
<div class="grid-container">
    <div class="column-full">
        <table class="definition-table">
            <caption class="h4">Definition table</caption>
            <tbody>
                <tr>
                    <td class="bold">Your company name and business address</td>
                    <td class="dd"></td>
                </tr>
                <tr>
                    <td class="bold">Your VAT registration number</td>
                    <td class="dd">You won’t have one of these if you’re a sole trader</td>
                </tr>
                <tr>
                    <td class="bold">Invoice date (or tax point, if different)</td>
                    <td class="dd">More information from GOV.UK on tax points</td>
                </tr>
                <tr>
                    <td class="bold">Customer name and address</td>
                    <td class="dd">You may need to invoice someone different from your usual contact - check who it needs to be sent to</td>
                </tr>
                <tr>
                    <td class="bold">Delivery address</td>
                    <td class="dd">If this is different from the customer’s address</td>
                </tr>
                <tr>
                    <td class="bold">Purchase order number (PO number)</td>
                    <td class="dd">Check with the company you’re invoicing if you don’t have this</td>
                </tr>
                <tr>
                    <td class="bold">Description of the goods or services supplied</td>
                    <td class="dd">For example: 10 crates of The Small Company marmalade, or 3 days of in-house consultancy</td>
                </tr>
                <tr>
                    <td class="bold">Amount due</td>
                    <td class="dd">This is the cost before VAT</td>
                </tr>
                <tr>
                    <td class="bold">Amount of VAT being charged</td>
                    <td class="dd">Information on the standard rate of VAT is on GOV.UK</td>
                </tr>
                <tr>
                    <td class="bold">Total amount due</td>
                    <td class="dd">The total amount you’re invoicing for, including VAT</td>
                </tr>
                <tr>
                    <td class="bold">Your payment terms and due date</td>
                    <td class="dd"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="grid-container">
  <div class="column-full">
    <table class="definition-table">
      <caption class="h4">Definition table</caption>
      <tbody>
        <tr>
          <td class="bold">Your company name and business address</td>
          <td class="dd"></td>
        </tr>
        <tr>
          <td class="bold">Your VAT registration number</td>
          <td class="dd">You won’t have one of these if you’re a sole trader</td>
        </tr>
        <tr>
          <td class="bold">Invoice date (or tax point, if different)</td>
          <td class="dd">More information from GOV.UK on tax points</td>
        </tr>
        <tr>
          <td class="bold">Customer name and address</td>
          <td class="dd">You may need to invoice someone different from your usual contact - check who it needs to be sent to</td>
        </tr>
        <tr>
          <td class="bold">Delivery address</td>
          <td class="dd">If this is different from the customer’s address</td>
        </tr>
        <tr>
          <td class="bold">Purchase order number (PO number)</td>
          <td class="dd">Check with the company you’re invoicing if you don’t have this</td>
        </tr>
        <tr>
          <td class="bold">Description of the goods or services supplied</td>
          <td class="dd">For example: 10 crates of The Small Company marmalade, or 3 days of in-house consultancy</td>
        </tr>
        <tr>
          <td class="bold">Amount due</td>
          <td class="dd">This is the cost before VAT</td>
        </tr>
        <tr>
          <td class="bold">Amount of VAT being charged</td>
          <td class="dd">Information on the standard rate of VAT is on GOV.UK</td>
        </tr>
        <tr>
          <td class="bold">Total amount due</td>
          <td class="dd">The total amount you’re invoicing for, including VAT</td>
        </tr>
        <tr>
          <td class="bold">Your payment terms and due date</td>
          <td class="dd"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
/* No context defined for this component. */
  • Content:
    .definition-table {
    
      $table-padding: $medium-spacing $medium-spacing $medium-spacing 0;
    
      display: block;
      margin-bottom: 2em;
    
      @include grid-media($sbc-grid-medium) {
        display: table;
        border-top: 1px solid $grey-2;
      }
    
      td {
        display: block;
        border-bottom: none;
    
        @include grid-media($sbc-grid-medium) {
          display: table-cell;
          border-bottom: 1px solid $grey-2;
        }
    
        &.bold {
          padding-bottom: 0;
          @include grid-media($sbc-grid-medium) {
            padding: $table-padding
          }
        }
        &.dd {
          padding-left: 1em;
          padding-top: 0;
          @include grid-media($sbc-grid-medium) {
            padding: $table-padding
          }
        }
      }
    }
    
  • URL: /components/raw/definition-table/definition-table.scss
  • Filesystem Path: components/typography/definition-table/definition-table.scss
  • Size: 691 Bytes
  • Handle: @definition-table
  • Preview:
  • Filesystem Path: components/typography/definition-table/definition-table.nunj

Definition table

Styled as a definition list at smaller widths, and a table at larger ones.