Your Store:

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 (dark)
Primary (dark)
Secondary (dark)
Alternate (dark)
Black (dark)

Status Colours

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


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" />


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>


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">
        <li class="k-state-active">
            Tab #1
            Tab #2
            Tab #3
            Tab #4
        Tab Content #1
        Tab Content #2
        Tab Content #3
        Tab Content #4

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
<div class="content-box primary">
    <section class="box-content">
        Primary Box Content
<div class="arrow-box">
    Default Box

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>
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>