<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. */
.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
}
}
}
}
Styled as a definition list at smaller widths, and a table at larger ones.