$0.00 Cart (0)
You currently have 0 items in your cart
Subtotal (inc GST)
Charges
Discounts
-
Freight
No Charge
Requires Quote
Total (inc GST)
Including GST
Discounts (inc GST)
-
Giftcard Total
Net Owing
Checkout
Your Store:
Set
Back

UI Elements

E-Commerce User Interface Elements

Primary Colours

These are the primary colours of BPD Version 1, Theme 1.

Default (light)
Primary (light)
Secondary (light)
Alternate (light)
Black (light)
Default
Primary
Secondary
Alternate
Black
Default (dark)
Primary (dark)
Secondary (dark)
Alternate (dark)
Black (dark)

Status Colours

These are the status colours of BPD Version 1, Theme 1.

Info
Success
Warning
Error

Product Ribbons

Ribbons to highlight a product. Must be applied to a product grid / list html grouping.

 
HTML Example
                                                <!-- Product Ribbon Group -->
<aside class="product-ribbons">
    <img src="/Themes/BPDTHEME01/theme-client-updates/img/ribbons/ribbon-sale.png" />
</aside>

Tooltips

Tooltips to display quick short text information that supports the main element.

Tooltip Top
Tooltip Right
Tooltip Bottom
Tooltip Left
 
HTML Example
                                                <span class="tooltip-top tooltip-rounded" data-tooltip="Hello I'm A Tooltip">Tooltip Top</span>

Tabs

Tabbed content.

  • Tab #1
  • Tab #2
  • Tab #3
  • Tab #4
Tab Content #1
Tab Content #2
Tab Content #3
Tab Content #4
 
HTML Example
                                                <div class="cv-tabs">
    <ul>
        <li class="k-state-active">
            Tab #1
        </li>
        <li>
            Tab #2
        </li>
        <li>
            Tab #3
        </li>
        <li>
            Tab #4
        </li>
    </ul>
    <div>
        Tab Content #1
    </div>
    <div>
        Tab Content #2
    </div>
    <div>
        Tab Content #3
    </div>
    <div>
        Tab Content #4
    </div>
</div>

Content Boxes

Content box, two ways. Border top style, or alternate with a coloured heading and content area. Grouped content in a box, multiple colours! Use with grid system to set width etc.

Grey Box Title
Box Content
Primary Box Title
Primary Box Content
Secondary Box Title
Secondary Box Content
Alternate Box Title
Alternate Box Content
Black Box Title
Black Box Content
Processing Box Title
Processing Box Content
Processing Updates
Box Content
Primary Box Content
Secondary Box Content
Alternate Box Content
Black Box Content
Arrow Box Default
Arrow Box Primary
Arrow Box Secondary
Arrow Box Alternate
Arrow Box Black
Grey Box
 
HTML Example
                                                <div class="content-box primary">
    <header class="box-title cv-ico-general-rocket ico-heading">Primary Box Title</header>
    <section class="box-content">
        Primary Box Content
    </section>
</div>
<div class="content-box primary">
    <section class="box-content">
        Primary Box Content
    </section>
</div>
<div class="arrow-box">
    Default Box
</div>

Buttons - Fixed Functional

Buttons can only used for one specific purpose, not to be altered.

 
HTML Example
                                                <button class="btn cv-is-processing">CV Is Processing Button</button>
<button class="btn cv-add-to-cart">Add To Cart</button>
<button class="btn cv-view-cart">View Cart</button>
<button class="btn cv-checkout">Checkout</button>
<button class="btn cv-log-in">Log In</button>
<button class="btn cv-log-out">Log Out</button>
<button class="btn cv-favourite">Favourite</button>
<button class="btn cv-favourite active">Favourite</button>
<button class="btn cv-view">View</button>
<button class="btn cv-clear">Clear</button>
<button class="btn cv-search">Search</button>
<button class="btn cv-filter">Filter</button>
<button class="btn cv-next">Next</button>
<button class="btn cv-previous">Previous</button>
<button class="btn cv-apply">Apply</button>
<button class="btn cv-confirm">Confirm</button>
<button class="btn cv-cancel">Cancel</button>
<button class="btn cv-back">Back</button>
<button class="btn cv-close">Close</button>
<button class="btn cv-send">Send</button>
<button class="btn cv-submit">Submit</button>
<button class="btn cv-home">Home</button>
<button class="btn cv-print">Print</button>
<button class="btn cv-edit">Edit</button>
<button class="btn cv-export">Export</button>
<button class="btn cv-share">Share</button>
<button class="btn cv-refresh">Refresh</button>
<button class="btn cv-copy">Copy</button>
<button class="btn cv-delete">Delete</button>
<button class="btn cv-publish">Publish</button>
<button class="btn cv-undo">Undo</button>
<button class="btn cv-upload">Upload</button>
<button class="btn cv-download">Download</button>
<button class="btn cv-help">Help</button>

Buttons - Navigation A HREF Functional

Buttons can only used for one specific purpose, not to be altered.

Processing Button Add To Cart View Cart Checkout Log Out Favourite Favourite View Clear Search Filter Next Previous Apply Confirm Cancel Back Close Send Submit Home Print Edit Export Share Refresh Copy Delete Publish Undo Upload Download Help Read More Sign Up
 
HTML Example
                                                <a href="" class="btn cv-is-processing">CV Is Processing Button</a>
<a href="" class="btn cv-add-to-cart">Add To Cart</a>
<a href="" class="btn cv-view-cart">View Cart</a>
<a href="" class="btn cv-checkout">Checkout</a>
<a href="" class="btn cv-log-in">Log In</a>
<a href="" class="btn cv-log-out">Log Out</a>
<a href="" class="btn cv-favourite">Favourite</a>
<a href="" class="btn cv-favourite active">Favourite</a>
<a href="" class="btn cv-view">View</a>
<a href="" class="btn cv-clear">Clear</a>
<a href="" class="btn cv-search">Search</a>
<a href="" class="btn cv-filter">Filter</a>
<a href="" class="btn cv-next">Next</a>
<a href="" class="btn cv-previous">Previous</a>
<a href="" class="btn cv-apply">Apply</a>
<a href="" class="btn cv-confirm">Confirm</a>
<a href="" class="btn cv-cancel">Cancel</a>
<a href="" class="btn cv-back">Back</a>
<a href="" class="btn cv-close">Close</a>
<a href="" class="btn cv-send">Send</a>
<a href="" class="btn cv-submit">Submit</a>
<a href="" class="btn cv-home">Home</a>
<a href="" class="btn cv-print">Print</a>
<a href="" class="btn cv-edit">Edit</a>
<a href="" class="btn cv-export">Export</a>
<a href="" class="btn cv-share">Share</a>
<a href="" class="btn cv-refresh">Refresh</a>
<a href="" class="btn cv-copy">Copy</a>
<a href="" class="btn cv-delete">Delete</a>
<a href="" class="btn cv-publish">Publish</a>
<a href="" class="btn cv-undo">Undo</a>
<a href="" class="btn cv-upload">Upload</a>
<a href="" class="btn cv-download">Download</a>
<a href="" class="btn cv-help">Help</a>

Buttons - Clear w/ Colour Hover

Buttons that have no-background colour, but do on hover.

 
HTML Example
                                                <button class="btn small clear">Default Button</button>
<button class="btn small clear primary">Primary Button</button>
<button class="btn small clear secondary">Secondary Button</button>
<button class="btn small clear alternate">Alternate Button</button>
<button class="btn small clear black">Black Button</button>
<button class="btn small clear cv-ico-general-rocket">Icon Button</button>
<button class="btn small clear cv-is-processing">Processing Button</button>

Buttons - Small

Buttons that are small.

 
HTML Example
                                                <button class="btn small">Default Button</button>
<button class="btn small primary">Primary Button</button>
<button class="btn small secondary">Secondary Button</button>
<button class="btn small alternate">Alternate Button</button>
<button class="btn small black">Black Button</button>
<button class="btn small cv-ico-general-rocket">Icon Button</button>
<button class="btn small cv-is-processing">Processing Button</button>

Buttons - Small Square

Small buttons that do not have rounded corners, they instead have sharp edges, watchout!

 
HTML Example
                                                <button class="btn small square">Default Button</button>
<button class="btn small square primary">Primary Button</button>
<button class="btn small square secondary">Secondary Button</button>
<button class="btn small square alternate">Alternate Button</button>
<button class="btn small square black">Black Button</button>
<button class="btn small square cv-ico-general-rocket">Icon Button</button>
<button class="btn small square cv-is-processing">Processing Button</button>

Buttons - Small Pill

Small Buttons that have full curved ends, like a pill.

 
HTML Example
                                                <button class="btn small pill">Default Button</button>
<button class="btn small pill primary">Primary Button</button>
<button class="btn small pill secondary">Secondary Button</button>
<button class="btn small pill alternate">Alternate Button</button>
<button class="btn small pill black">Black Button</button>
<button class="btn small pill cv-ico-general-rocket">Icon Button</button>
<button class="btn small pill cv-is-processing">Processing Button</button>

Buttons - Small Ghost

Small Buttons that have transparent-background,-background fills on hover

 
HTML Example
                                                <button class="btn small ghost">Default Button</button>
<button class="btn small ghost primary">Primary Button</button>
<button class="btn small ghost secondary">Secondary Button</button>
<button class="btn small ghost alternate">Alternate Button</button>
<button class="btn small ghost black">Black Button</button>
<button class="btn small ghost cv-ico-general-rocket">Icon Button</button>
<button class="btn small ghost cv-is-processing">Processing Button</button>

Buttons - Standard

Stock standard buttons

 
HTML Example
                                                <button class="btn">Default Button</button>
<button class="btn primary">Primary Button</button>
<button class="btn secondary">Secondary Button</button>
<button class="btn alternate">Alternate Button</button>
<button class="btn black">Black Button</button>
<button class="btn cv-ico-general-rocket">Icon Button</button>
<button class="btn cv-is-processing">Processing Button</button>

Buttons - Standard Square

Buttons that do not have rounded corners, they instead have sharp edges, watchout!

 
HTML Example
                                                <button class="btn square">Default Button</button>
<button class="btn square primary">Primary Button</button>
<button class="btn square secondary">Secondary Button</button>
<button class="btn square alternate">Alternate Button</button>
<button class="btn square black">Black Button</button>
<button class="btn square cv-ico-general-rocket">Icon Button</button>
<button class="btn square cv-is-processing">Processing Button</button>

Buttons - Standard Pill

Standard button with full curved ends.

 
HTML Example
                                                <button class="btn pill">Default Button</button>
<button class="btn pill primary">Primary Button</button>
<button class="btn pill secondary">Secondary Button</button>
<button class="btn pill alternate">Alternate Button</button>
<button class="btn pill black">Black Button</button>
<button class="btn pill cv-ico-general-rocket">Icon Button</button>
<button class="btn pill cv-is-processing">Processing Button</button>

Buttons - Standard Ghost

Standard Buttons that have transparent-background,-background fills on hover

 
HTML Example
                                                <button class="btn ghost">Default Button</button>
<button class="btn ghost primary">Primary Button</button>
<button class="btn ghost secondary">Secondary Button</button>
<button class="btn ghost alternate">Alternate Button</button>
<button class="btn ghost black">Black Button</button>
<button class="btn ghost cv-ico-general-rocket">Icon Button</button>
<button class="btn ghost cv-is-processing">Processing Button</button>

Buttons - Large

Large buttons that need to go on a diet!

 
HTML Example
                                                <button class="btn large">Default Button</button>
<button class="btn large primary">Primary Button</button>
<button class="btn large secondary">Secondary Button</button>
<button class="btn large alternate">Alternate Button</button>
<button class="btn large black">Black Button</button>
<button class="btn large cv-ico-general-rocket">Icon Button</button>
<button class="btn large cv-is-processing">Processing Button</button>

Buttons - Large Square

Large square buttons.

 
HTML Example
                                                <button class="btn large square">Default Button</button>
<button class="btn large square primary">Primary Button</button>
<button class="btn large square secondary">Secondary Button</button>
<button class="btn large square alternate">Alternate Button</button>
<button class="btn large square black">Black Button</button>
<button class="btn large square cv-ico-general-rocket">Icon Button</button>
<button class="btn large square cv-is-processing">Processing Button</button>

Buttons - Large Pill

Large pill buttons.

 
HTML Example
                                                <button class="btn large pill">Default Button</button>
<button class="btn large pill primary">Primary Button</button>
<button class="btn large pill secondary">Secondary Button</button>
<button class="btn large pill alternate">Alternate Button</button>
<button class="btn large pill black">Black Button</button>
<button class="btn large pill cv-ico-general-rocket">Icon Button</button>
<button class="btn large pill cv-is-processing">Processing Button</button>

Buttons - Large Ghost

Large Buttons that have transparent-background,-background fills on hover

 
HTML Example
                                                <button class="btn large ghost">Default Button</button>
<button class="btn large ghost primary">Primary Button</button>
<button class="btn large ghost secondary">Secondary Button</button>
<button class="btn large ghost alternate">Alternate Button</button>
<button class="btn large ghost black">Black Button</button>
<button class="btn large ghost cv-ico-general-rocket">Icon Button</button>
<button class="btn large ghost cv-is-processing">Processing Button</button>