Punch Buying Club
2019 Rebrand

Style Downloads:

Compiled CSS File not minified or compressed

Raw SCSS files

This text is quoted. A block of quoted text like this is particularly useful when presented as a pull-quote within an article of text.

<blockquote> <p>This text is quoted. A block of quoted text like this is particularly useful when presented as a pull-quote within an article of text.</p> </blockquote>

Element name: blockquote.html

Primary colours:

$pbc-dark-blue

$pbc-white

$pbc-copper

$pbc-teal

Secondary colours:

$pbc-yellow

$pbc-purple

$pbc-green

$pbc-pink

<style> .swatch {width: 10em; height: 10em; display: inline-block;margin: .5em; padding: .5em;} .swatch1 {background: rgba(19, 37, 44, 1); color: #fff} .swatch2 {background: rgba(255, 255, 255, 1); border: .0625em solid #ddd;} .swatch3 {background: rgba(212, 111, 29, 1); } .swatch4 {background: rgba(49, 138, 140, 1); } .swatch5 {background: rgba(227, 149, 0, 1); } .swatch6 {background: rgba(120, 54, 96, 1); } .swatch7 {background: rgba(127, 144, 56, 1); } .swatch8 {background: rgba(168, 43, 64, 1); } </style> <p>Primary colours:</p> <div class="swatch swatch1"> <p>$pbc-dark-blue</p> </div> <div class="swatch swatch2"> <p>$pbc-white</p> </div> <div class="swatch swatch3"> <p>$pbc-copper</p> </div> <div class="swatch swatch4"> <p>$pbc-teal</p> </div> <p>Secondary colours:</p> <div class="swatch swatch5"> <p>$pbc-yellow</p> </div> <div class="swatch swatch6"> <p>$pbc-purple</p> </div> <div class="swatch swatch7"> <p>$pbc-green</p> </div> <div class="swatch swatch8"> <p>$pbc-pink</p> </div>

Element name: colours.html

<div class="feedback slim"> <p>This is a feedback message.</p> </div> <div class="feedback slim success"> <p>This is a positive feedback message.</p> </div> <div class="feedback slim error"> <p>This is a error feedback message.</p> </div>

Element name: feedback-slim.html

<div class="feedback"> <p>This is an positive feedback message.</p> </div> <div class="feedback success"> <p>This is an positive feedback message.</p> </div> <div class="feedback error"> <p>This is an positive feedback message.</p> </div>

Element name: feedback.html

A HREF with class "button primary"
<button>Basic Button</button> <input type="submit" value="Submit button"> <button class="info">Info button</button> <button class="primary">Primary CTA button</button> <button class="sml">Small</button> <a href="*" class="button primary"> A HREF with class "button primary"</a>

Element name: form-buttons.html

<label><input type="checkbox"> Label text</label>

Element name: form-checkbox.html

<label>Label text</label> <input type="email">

Element name: form-email.html

<label>Label text</label> <input type="number">

Element name: form-number.html

<select> <option selected="">option text</option> <option>option text 2</option> <option>option text 3</option> <option>option text 4</option> <option>option text 5</option> </select>

Element name: form-select.html

<label>Label text</label> <input type="text">

Element name: form-text.html

<label>Label text</label> <textarea rows="5" cols="20"></textarea>

Element name: form-textarea.html

<label>Label text</label> <input type="url">

Element name: form-url.html

Level one heading

<h1>Level one heading</h1>

Element name: heading-1.html

Level two heading

<h2>Level two heading</h2>

Element name: heading-2.html

Level three heading

<h3>Level three heading</h3>

Element name: heading-3.html

Level four heading

<h4>Level four heading</h4>

Element name: heading-4.html

Level five heading
<h5>Level five heading</h5>

Element name: heading-5.html

Level six heading
<h6>Level six heading</h6>

Element name: heading-6.html

  1. First list item
  2. Second item in a list of ordered items
  3. Third item in the list
<ol> <li>First list item</li> <li>Second item in a list of ordered items</li> <li>Third item in the list</li> </ol>

Element name: list-ordered.html

  • A list item
  • Another item in a list
  • Yet another item in this list of items
<ul> <li>A list item</li> <li>Another item in a list</li> <li>Yet another item in this list of items</li> </ul>

Element name: list-unordered.html

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
<ol class="pagination"> <li><a>1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ol>

Element name: pagination-first.html

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
<ol class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a>10</a></li> </ol>

Element name: pagination-last.html

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
<ol class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a>5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ol>

Element name: pagination.html

Key/value style table

Pub Village Pub
Outlet Number 860453
Account Name MR L A Ndlord
Pub Address The Main Street, Someford, CRV SEW
Invoice Address Village Pub, The Main Street, Someford, CRV SEW
Pub Telephone Number 01332666763
Scheduled Delivery Date / Time Tuesday 07:00 - 11:00
Local Depot Bedford (Marston's), Depot Collection Time: 10:00 - 15:00, Havelock Street, Bedford, MK40 4LU

Sortable Table Data style

Date Reference Item Value
21/11/2019 4531880 Invoice £888.20 View
20/11/2019 4533793 Invoice £1,811.95 View
18/11/2019 164 Notification £2,479.34 View
14/11/2019 4518549 Invoice £888.20 View
13/11/2019 4519923 Invoice £1,501.84 View
11/11/2019 157 Notification £2,310.13 View
07/11/2019 4504870 Invoice £888.20 View
<h3>Key/value style table</h3> <table> <tbody> <tr> <th>Pub</th> <td>Village Pub</td> </tr> <tr> <th>Outlet Number</th> <td>860453</td> </tr> <tr> <th>Account Name</th> <td>MR L A Ndlord</td> </tr> <tr> <th>Pub Address</th> <td>The Main Street, Someford, CRV SEW </td> </tr> <tr> <th>Invoice Address</th> <td> Village Pub, The Main Street, Someford, CRV SEW </td> </tr> <tr> <th>Pub Telephone Number</th> <td>01332666763</td> </tr> <tr> <th>Scheduled Delivery Date / Time</th> <td>Tuesday 07:00 - 11:00 </td> </tr> <tr> <th>Local Depot</th> <td> Bedford (Marston's), Depot Collection Time: 10:00 - 15:00, Havelock Street, Bedford, MK40 4LU </td> </tr> </tbody> </table> <h3>Sortable Table Data style</h3> <table> <thead> <tr class="active"> <th>Date <span class="glyphicon glyphicon-sort-by-attributes"></span></th> <th>Reference <span class="glyphicon glyphicon-sort-by-attributes"></span></th> <th>Item <span class="glyphicon glyphicon-sort-by-attributes"></span></th> <th>Value <span class="glyphicon glyphicon-sort-by-attributes"></span></th> <th></th> </tr> </thead> <tbody data-bind="foreach: currentList"> <tr> <td >21/11/2019</td> <td>4531880</td> <td>Invoice</td> <td>£888.20</td> <td> <a href="https://punch.electronic-billing.co.uk/">View</a> </td> </tr> <tr> <td >20/11/2019</td> <td>4533793</td> <td>Invoice</td> <td>£1,811.95</td> <td><a href="https://punch.electronic-billing.co.uk/">View</a></td> </tr> <tr> <td >18/11/2019</td> <td>164</td> <td>Notification</td> <td>£2,479.34</td> <td><a href="https://punch.electronic-billing.co.uk/">View</a></td> </tr> <tr> <td >14/11/2019</td> <td>4518549</td> <td>Invoice</td> <td>£888.20</td> <td><a href="https://punch.electronic-billing.co.uk/">View</a></td> </tr> <tr> <td >13/11/2019</td> <td>4519923</td> <td>Invoice</td> <td>£1,501.84</td> <td><a href="https://punch.electronic-billing.co.uk/">View</a></td> </tr> <tr> <td >11/11/2019</td> <td>157</td> <td>Notification</td> <td>£2,310.13</td> <td><a href="https://punch.electronic-billing.co.uk/">View</a></td> </tr> <tr> <td >07/11/2019</td> <td>4504870</td> <td>Invoice</td> <td>£888.20</td> <td><a href="https://punch.electronic-billing.co.uk/">View</a></td> </tr> </tbody> </table>

Element name: tables.html

This is a paragraph of text. Some of the text may be emphasised and some it might even be strongly emphasised. Occasionally quoted text may be found within a paragraph …and of course a link may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.

This is a paragraph of text. Some of the text may be emphasised and some it might even be strongly emphasised. Occasionally quoted text may be found within a paragraph …and of course a link may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.

This is a paragraph of text. Some of the text may be emphasised and some it might even be strongly emphasised. Occasionally quoted text may be found within a paragraph …and of course a link may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.

<p>This is a paragraph of text. Some of the text may be <em>emphasised</em> and some it might even be <strong>strongly emphasised</strong>. Occasionally <q>quoted text</q> may be found within a paragraph &hellip;and of course <a href="#">a link</a> may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.</p> <p>This is a paragraph of text. Some of the text may be <em>emphasised</em> and some it might even be <strong>strongly emphasised</strong>. Occasionally <q>quoted text</q> may be found within a paragraph &hellip;and of course <a href="#">a link</a> may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.</p> <p>This is a paragraph of text. Some of the text may be <em>emphasised</em> and some it might even be <strong>strongly emphasised</strong>. Occasionally <q>quoted text</q> may be found within a paragraph &hellip;and of course <a href="#">a link</a> may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.</p>

Element name: text.html