Panels - often referred to as portals or tiles
Summary of features
Admin interfaces can be complex beasts from a usability perspective, so the use of colour to differentiate data types or context is really beneficial. The COLOURcode template builds on Bootstrap's use of contextual colouring for alerts, buttons, and table cells (e.g. info, warning etc.) by allowing you to easily assign a single colour class to a panel. This then changes the colour of not only the panel itself, but also any panel, tables, forms, list groups, default buttons and hover effects (does not apply to panels with Bootstrap contextual styling). Additionally, child elements can be individually styled, overriding the parent's colour if you wish.
At a glance
- Add contextual and/or associational colouring to your panels.
- Style all components of a panel with a single colour class.
- Sub-components (e.g. tables or forms) can be styled separately.
- Choose from up to ten named and two branding colour-sets.
- All colour-sets based on single SASS-variable base colours.
Default panel
This is a default panel - .panel.panel-default
This is a default panel with a bronze header - .panel.panel-default with .panel-heading.panel-heading-bronze and .panel-footer.panel-footer-bronze
Transparent Panel
This is a panel with transparent styling - .panel.panel-transparent
| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
This is a gold panel containing a silver table inside a panel-body - .panel.panel-gold with .table.table-silver inside the gold panel's .panel-body
Panel styled with .panel-brand1
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with brand1 class applied .panel.panel-brand1. The colouring of the table, form and list-group within is automatic but can be overridden.
Panel styled with .panel-brand2
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with brand2 class applied .panel.panel-brand2. The colouring of the table, form and list-group within is automatic but can be overridden.
Panel styled with .panel-blue
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with blue class applied .panel.panel-blue. The colouring of the table, form and list-group within is automatic but can be overridden.
Panel styled with .panel-yellow
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with yellow class applied .panel.panel-yellow. The colouring of the table, form and list-group within is automatic but can be overridden.
Panel styled with .panel-red
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with red class applied .panel.panel-red. The colouring of the table, form and list-group within is automatic but can be overridden.
Panel styled with .panel-green
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with green class applied .panel.panel-green. The colouring of the table, form and list-group within is automatic but can be overridden.
Panel styled with .panel-orange
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with orange class applied .panel.panel-orange. The colouring of the table, form and list-group within is automatic but can be overridden.
Panel styled with .panel-purple
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with purple class applied .panel.panel-purple. The colouring of the table, form and list-group within is automatic but can be overridden.
Panel styled with .panel-gold
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with gold class applied .panel.panel-gold. The colouring of the table, form and list-group within is automatic but can be overridden.
Panel styled with .panel-bronze
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with bronze class applied .panel.panel-bronze. The colouring of the table, form and list-group within is automatic but can be overridden.
Panel styled with .panel-silver
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with silver class applied .panel.panel-silver. The colouring of the table, form and list-group within is automatic but can be overridden.
Panel styled with .panel-grey
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with grey class applied .panel.panel-grey. The colouring of the table, form and list-group within is automatic but can be overridden.
Panel styled with .panel-default
Style everything with one classname
Memory Usage
3.831 GB in total| # | Header | Header | Figure |
|---|---|---|---|
| 1,001 | Lorem | ipsum | 26.331 |
| 1,002 | amet | consect | 5.700 |
| 1,003 | Integer | nec | 42.107 |
| 1,004 | libero | Sed | 10.00 |
| Total for month = | 84.138 | ||
Alert Email Configuration
Further Information
Panel with default class applied .panel.panel-default. The colouring of the table, form and list-group within is automatic but can be overridden.
This is a panel with 'primary' contextual styling - .panel.panel-primary
This is a panel with 'success' contextual styling - .panel.panel-success
This is a panel with 'info' contextual styling - .panel.panel-info
This is a panel with warning contextual styling - .panel.panel-warning