The D&B Product Design Guide created to make your job easier! It includes everything you need to quickly recreate any of the examples found on this site.
Created to make your job easier! It includes everything you need to quickly design product UIs. Check out our live demo page for a working example.
These components are a customization of Bootstrap and the items provided here are intended to be used in lieu of Bootstrap. You can follow the guidlines set by Bootstrap to create the elements and layouts you need. Any nuances added by the D&B UXD team are noted on this site with sample code snippets.
These components were created with Adobe Photoshop. You may request access to our CC Library. Library includes all raw customizable components.
New components are being added regularly, so make sure you have the latest version. If you need something that has not yet been added, please contact Cassie Sharp and we will try to get it added as quickly as possible.
Designed, coded, and maintained (with love) by the D&B UXD Team. For questions or additional help, contact Haidy Francis.
Download
There are a few ways to get started:
Precompiled Code
Preompiled and minified CSS, JavaScript, and global images. No docs or original source files are included. Link up the files of your choice in your <head> and you're good to go.
Source Less, JavaScript, and basic images, along with our docs. Requires a Less compiler. Setup after download will depend on how you plan on using it.
Install with npm: npm install dnb-product-design-guide
What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.
Precompiled Code
Once downloaded, unzip the compressed folder to see the structure of (the compiled) Product Design Guide. You'll see something like this:
We provide compiled CSS and JS (dnb-product-design-guide.*), as well as compiled and minified CSS and JS (dnb-product-design-guide.min.*). CSS source maps are built into dnb-product-design-guide.css and are available for use with certain browsers' developer tools. We also provide the source code for LESS and javascript, in case you need to customize something for your specific app and to give you access to the LESS variables.
Custom icon fonts are imported into the CSS and do not require anything to set up.
Source Code
The D&B Product Design Guide source code download includes the precompiled CSS, JavaScript, and image assets, along with source Less, JavaScript, and documentation. More specifically, it includes the following and more:
The less/ and js/ are the source code for our CSS and JS (respectively). The dist/ folder includes everything listed in the precompiled download section above. The documentation/ folder includes the source code for our documentation, and demo/ includes a few examples of D&B Product Design Guide usage. Beyond that, any other included file provides support for packages, license information, and development.
Custom icon fonts are imported into the CSS and do not require anything to set up.
Basic Usage
D&B Products are not all the same. Each has it's own set of requirements that cater to its unique users and purpose. The D&B Product Design Guide was not created to dictate exactly how a product to look, but rather to help unify the look and feel of all products so users can have a consistant experience across different products.
Having said that, there are some basic elements each product should try to incorporate if possible, mainly the global header and left-hand menu. Below you will find a basic HTML template to get you on your way.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>D&B Product Design Guide Template</title>
<!-- D&B Product Designs -->
<link href="css/dnb-product-design-guide.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="header-fixed has-sidebar sidebar-fixed">
<nav id="globalNav" class="dnb-global-header navbar navbar-default">
<!-- See global header section of components for HTML structure of this element -->
</nav><!-- /.dnb-global-header -->
<div class="dnb-left-hand-menu hidden-xs">
<!-- See left-hand menu section of components for HTML structure of this element -->
</div> <!-- /#left-hand-menu -->
<div class="page-wrapper container-fluid">
Your amazing product content here!
<!-- Don't forget to add your footer here. See the in product footer section of components for HTML structure of this element -->
</div> <!-- /.container-fluid -->
<!-- jQuery (necessary for JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/dnb-product-design-guide.min.js"></script>
</body>
</html>
Demo
Here's a quick demo so you can get an idea of what the Product Design Guide looks like in action. It doesn't incorporate every possible element, but it'll show you the basics and some of the flixibility it provides.
Primary color palette is used throughout the entire product UI. For example: Application Shell, UI Elements.
Primary Blue 1
Hex: #005172
Less: @dnb-dark-blue
Primary Blue 2
Hex: #3095B4
Less: @dnb-light-blue
Borders / Strokes
Hex: #D7E0E4
Less: @dnb-gray-light
Backgrounds
Hex: #F1F6F8
Less: @dnb-gray-lighter
Secondary
Secondary color palette is used for accent colors within the UI when appropriate. For example: Badges, Labels, Alert Messages.
Secondary
Hex: #E1A357
Less: @dnb-orange-light
Secondary
Hex: #BC4C05
Less: @dnb-orange-dark
Secondary
Hex: #D06079
Less: @dnb-coral-light
Secondary
Hex: #963156
Less: @dnb-coral-dark
Secondary
Hex: #C55E9B
Less: @dnb-pink-light
Secondary
Hex: #8F3F6D
Less: @dnb-pink-dark
Secondary
Hex: #9C5FB5
Less: @dnb-purple-light
Secondary
Hex: #693A77
Less: @dnb-purple-dark
Secondary
Hex: #73AF55
Less: @dnb-green-light
Secondary
Hex: #284E36
Less: @dnb-green-dark
Secondary
Hex: #00B2A9
Less: @dnb-teal-light
Secondary
Hex: #006265
Less: @dnb-teal-dark
Risk
Risk color palette is used to represent the “RISK” of a company. For example: Heat Map, Risk Indicator, Risk Bands, Risk Status, Risk Charts.
Risk-Low
Hex: #69C568
Less: @dnb-risk-low
Risk-Mod-Low
Hex: #B9C552
Less: @dnb-risk-mod-low
Risk-Moderate
Hex: #FFC341
Less: @dnb-risk-moderate
Risk-Mod-High
Hex: #F79851
Less: @dnb-risk-mod-high
Risk-High
Hex: #EC6660
Less: @dnb-risk-high
Risk-Severe
Hex: #B54039
Less: @dnb-risk-severe
Risk-OOB
Hex: #333333
Less: @dnb-risk-oob
Risk-NA
Hex: #BCC9DB
Less: @dnb-risk-na
Charts
Chart color palette is used to represent non-risk attributes. For example: Bar Chart, Line Chart, Pie Chart.
Chart
Hex: #4EB1CB
Less: @dnb-chart-01
Chart
Hex: #717ECD
Less: @dnb-chart-02
Chart
Hex: #D96383
Less: @dnb-chart-03
Chart
Hex: #D291D6
Less: @dnb-chart-04
Chart
Hex: #C3D785
Less: @dnb-chart-05
Common Usage
Backgrounds
Dark Blue
Hex: #003B53
Less: @bg-dark-1
Light Gray
Hex: #F1F6F8
Less: @bg-light-1, @dnb-gray-lighter
White
Hex: #FFFFFF
Less: @bg-light-2, @body-bg
Borders / Strokes
Gray
Hex: #D7E0E4
Less: @gray, @dnb-gray-light
Text Colors
Default
Hex: #002E41
Less: @text-color, @type-dark, @dnb-darker-blue
Small Text
Hex: #728d96
Less: @type-med
Headers
Hex: #005172
Less: @type-header, @dnb-dark-blue
Links
Hex: #009ECE
Less: @link-color, @dnb-bright-blue
Left-Hand Menu
Background
Hex: #003B53
Less: @left-hand-menu-bg, @bg-dark-1
Item Hover/Active BG
Hex: #022A3C
Less: @left-hand-menu-active-hover-bg
Font/Link Color
Hex: #D5DEE3
Less: @left-hand-menu-color
Link Hover
Hex: #00D2C7
Less: @left-hand-menu-active-hover-color
Typography
We have modified the typography to be branded for D&B products. It is worth noting, however, that we have not specifically modified every typography component as outlined in Bootstrap's typography documentation. Below, you will find the most commonly used elements for D&B products.
The global default font-family is Open Sans.
Open Sans is the primary font used within product. Open Sans is designed with an upright stress, open forms and a neutral, yet friendly appearance. It’s optimized for web and mobile interfaces, and has excellent legibility characteristics in its letterforms.
Headings
The D&B Product Design Guide only defines HTML headings <h1> through <h3>. While <h4> through <h6> are still available, we haven't defined any special styling for them. The Bootstrap classes .h1 through .h6 are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
Create lighter, secondary text in any heading with a generic <small> tag or the .small class.
EXAMPLE
H1 Heading (24px semibold)
H2 Heading (18px semibold)
H3 Heading (14px semibold all caps)
Default Links
The default link is has a font-size of 14px and font-weight of 600 (semibold). Default behavior is underline on hover/focus.
The global default font-size is 14px, with a line-height of 1.7145. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (12px by default).
EXAMPLE
Lucas ipsum dolor sit amet xanatos hapan mod mara bib moff wuher choka glymphid mccool. Kathol vagaari duros colton. Gizka iego kashyyyk amidala.
For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.
You may alternatively use an inline element with .small in place of any <small>.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Small Font
12px Open Sans Regular | Leading 24px
#728d96
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Copywriting
Use a semi-professional and friendly tone within a product UI.
Do's
Read it aloud
Be the editor writers hate
Remember that writing and editing are different
Be transparent
Don'ts
Don't try to sound smart
Don’t use jargon
Don’t sound like a robot.
Icons
We have compiled a set of commonly used icons that fit the D&B brand. This icon set is automatically imported into the CSS using the @icon-font-path variable. Usage of these icons is similar to the Bootstrap glyphicons, however, you do not need to include two classes to for our icons, just the icon class itself.
If you app has specific icons, you can create your icon class following the same pattern used here. If we've missed an icon that you think should be global, please let us know so we can review it.
Note
Solid icons are used for user interface icons. For example: Save, Export, Share. Line icons are used for large supporting icons. For example: Articles, Videos, Training.
Cancel
.icon-cancel
Check
.icon-check
Plus
.icon-plus
Download
.icon-download4
Minus
.icon-minus3
user
.icon-user2
arrow-right
.icon-arrow-right2
arrow-up
.icon-arrow-up
arrow-down
.icon-arrow-down
sort-arrow
.icon-sort-arrow
arrow-right
.icon-arrow-right
info-with-circle
.icon-info-with-circle
chain
.icon-chain
question-circle
.icon-question-circle
alert
.icon-alert
delete
.icon-delete
edit
.icon-edit
lock
.icon-lock2
menu
.icon-menu
printer
.icon-printer
search
.icon-search
settings
.icon-settings
share
.icon-share
star-empty
.icon-star-empty
star-full
.icon-star-full
tag
.icon-tag
warning
.icon-warning
Grid System
The grid system is based off Bootstrap's grid. Please see Bootstrap's grid system documentation for more information.
Global Header
The global product header follows Bootrap's navbar-default, but because of it's unique nature, it requires some extra classes. Inspect the demos to see a complete view, but here's a quick breakdown.
(You'll want to launch the demo site on a phone or resize your browser to see the mobile version.)
Required Classes
These classes are required to create the basic look and feel of the global header:
.dnb-global-header
.navbar
.navbar-default
Sticky Header
The preferred usage is to have a sticky header. To make the header sticky, add .header-fixed to the <body> tag.
Product Logo
The ampersand logo is added automatically when you include a .navbar-brand element. The ampersand by itself is to be use once logged into a product. You will need to modify this to show your specific product logo for the logged out view.
(You'll want to launch the demo site on a phone or resize your browser to see the mobile version.)
The demo search bar was built out to show what it would look like if you added everything. You many not need each element, but if you choose to use them, make sure you follow the structure found in the demo.
Requirements
Similar to Bootstrap's Bootrap's navbar, in order for the acheive the preferred experience on mobile you'll need to add a .navbar-toggle button with the added class .mobile-search-toggle to show/hide the search functionality.
Wrap your search form in .search-group.
Plugin dependency
The demoed search animation requires global-search.js. The animation shown above is the preferred user experience. It has already been built out and included with the styleguide. If you are using dnb-product-design-guide.js (or .min.js) you're good to go. If not, you'll need to include global-search.js.
Options
An option is available to updtate the placeholder based on if the user has focused on the search bar or not. To use this feature, add the following attributes to the .searchinput element:
placeholder - needed for initial placeholder
data-no-focus-placeholder - needed for non-focus state
data-focus-placeholder - needed for focus state
Not all products are equal!
Not every product requires the search bar nor will it always create the best experience using this animation. Please use your best judgement.
Menu Items
Default
The default behavior/look for menu items is what you see above, with no background and an underline for the active page.
Utility Buttons
In order to create the utility buttons on the right of the example below, you need to add a few classes. First add the class .header-utility-btns to the .dnb-global-header element. This will pull the buttons over to the very right hand side of the header. Then add .utility-btn to the <li> for each utility button. Also the first button requires the class .utility-btn-first for proper styling. Adding .alert-badge to the icon will create the red badge.
Square buttons on the right-hand side with an icon.
Nav Buttons
You can add a cta button in the main navigation. We suggest using this sparingly.
Also available is a .nav-btn class - which can be placed on either the <li> or the <a> element. This will create a traditionally styled button, but it will be properly sized and positioned in menu. These buttons will also require an additional class to determine the button color. Available options are:
.nav-btn-default
.nav-btn-default-dark-blue
.nav-btn-default-green
.nav-btn-primary
.nav-btn-primary-dark-blue
.nav-btn-primary-green
Responsive menus
Since the number of menu items varies per product, you will need to override the responsive breakpoints for the way the items adjust to different screen sizes.
Left-Hand Menu
The left-hand menu follows Bootrap's nav-pills component, and, like the global header, it requires some extra classes. Inspect the element to see a complete view, but here's a quick breakdown.
These following is required to create the basic look and feel of the left-hand nav:
Wrap the .nav element in .dnb-left-hand-menu
The left-hand menu should be hidden for mobile devices, less than 768px wide, so add .hidden-xs to the .dnb-left-hand-menu element.
The .nav element requires both the .nav-pills and .nav-stacked classes to create the correct styling.
The <body> tag requires .has-sidebar, which will adjust the rest of the page to compensate for the menu.
The .dnb-left-hand-menu's sibling element which contains the main page content needs to have the class .page-wrapper in order to adjust for the left-hand-menu
Menu Width
The default width for the left-hand menu is 220px, however, some apps have different requirements. You can customize the @left-hand-menu-width LESS variable to quickly modify the left-hand menu width and everything else that is affected by it.
Fixed Menu
Depending on your app, you want the left-hand menu to scroll independently of the rest of the page. For this, add .sidebar-fixed to the <body> tag.
Adding this class provides two different behaviors depending on if the global header is fixed or not. This page contains both a fixed header and fixed left-hand menu. If the header is not fixed, then the left-hand menu will slide up with the page, until it reaches the top, then becomes fixed, automatically utilizing Bootrap's affix plugin (included in the D&B Product Design Guide repo).
Plugin dependency
To used a fixed left-hand menu without a fixed global header, both affix.js and the global-left-hand-menu.js are required. It has already been built out and included with the styleguide. If you are using dnb-product-design-guide.js (or .min.js) you're good to go.
Menu Item Toggle
The preferred menu behavior is demonstrated in this page. If a main level menu item needs a sub menu, it is created by following the pills with dropdowns convetion set forth by Bootstrap. However, instead of using the .dropdown-toggle class and dropdown for the data-toggle="" attribute, it requires .accordion-toggle and accordion repectively.
A left-hand menu main level item will support up to two more levels of sub menus.
Main item
├─ Sub menu item 1
│ └─ Sub- menu item 1.1
└─ Sub menu item 2
Main item
Plugin dependency
The sub menu functionality requires global-left-hand-menu.js. It has already been built out and included with the styleguide. If you are using dnb-product-design-guide.js (or .min.js) you're good to go.
Buttons
Button Colors
As with stock Bootstrap, buttons require the .btn class and can be used on <a>, <button>, and <input> elements. An additional class is required to give the button it's color. The available color classes are given for each button below.
Panels fit in rows and columns based on the width of the row or column they are in. They use the .panel class. Within that, they use the standard bootstrap .panel-heading, .panel-title, and .panel-body classes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula justo sit amet elit tincidunt volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Tab 2 with some content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula justo sit amet elit tincidunt volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla non bibendum dolor. Curabitur luctus urna in tempor mattis. Integer auctor euismod ipsum, et ullamcorper nisi fermentum sed. Quisque dictum felis quis justo accumsan, a volutpat augue luctus.
Accordions follow the same guidelines as Bootstrap's accordion example, but require additional classes. Accordions use the .panel class and the group of .panels should live inside a .panel-group element. The .panel element requires both the .panel-accordion and .panel-accordion-default classes
Plugin dependency
Accordions require Bootstrap's collapse.js. It is included with the style guide and if you are using dnb-product-design-guide.js (or .min.js) you're good to go. If not, you'll need to include it.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Tables
Our tables follow Bootstrap's tables, however, we have removed many of the table variations Bootstrap offers and have added some requirements. Here's a list of some of the nuances:
Tables are always contained within a .panel element which gets an additional .panel-table class. This adjusts the padding of the .panel slightly for a better feel for the tables.
There is only one option for table spacing and padding.
Striped rows have become the default.
Demos Using Plugin
The demoed tables use the Datatables jQuery plugin with the Bootstrap extention. You are welcome to use your own javascript or favorite plugin to make the tables work properly. If you use your own, you can study and use the classes used here to easily get the correct styling.
Basic Usage
Tables go inside the .pane-body of .panel elements. Make sure the <table> tag gets the .table class.
EXAMPLE
Standard Sortable Table with Title
Company
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Hover Rows
Add .table-hover to enable a hover state on table rows within a <tbody>.
EXAMPLE
Table with Hover Rows
Company
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Contextual Classes
Contextual Rows
Use contextual classes to color table rows or individual cells.
Class
Description
.active
Applies the hover color to a particular row or cell
.success
Indicates a successful or positive action
.info
Indicates a neutral informative change or action
.warning
Indicates a warning that might need attention
.danger
Indicates a dangerous or potentially negative action
EXAMPLE
Standard Table with Colored Rows
Company
First Name
Last Name
Username
1
Mark
Otto
@mdo
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
3
Larry
the Bird
@twitter
1
Mark
Otto
@mdo
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
2
Jacob
Thornton
@fat
Scrollable Tables
Scrolling tables are a good option if you need to display a lot of data but don't have much space. Many classes are used to give the table a nice look when it's scrollable - the fading edges, etc. You will need to inspect the following table to see which classes you need to use (if you don't use the Datatables plugin).
To create the scroll table, the table needs to have two ancenstors: .scroll-table-wrapper (outer) and .scroll-table (inner). In this example, .scroll-table-wrapper is added to the .panel-body element.
An additional attribute, data-table-height, is required on the table. This will define the height for the tbody. The overall table height will be taller after the thead is added in.
Plugin dependency
For scroll tables to work and style properly, scroll-table.js is required. It has already been built out and included with the styleguide. If you are using dnb-product-design-guide.js (or .min.js) you're good to go. If not, you'll need to include scroll-table.js.
IE9 and lower
IE < 10 does not like giving a tbody a height. The workaround is to conditionally wrap .scroll-table in .old_ie_wrapper and apply the scrolling to that <div>.
Indicate the current page's location within a navigational hierarchy. See Bootstrap's documentation for breadcrumbs. We've just updated the style for D&B products. Enjoy :)
Separators are automatically added in CSS through :before and content.
Provide pagination links for your site or app with the multi-page pagination component. See Bootstrap's documentation for pagination.
Basic Usage
The pagination row is wrapped in an element with the .pagination-row class. Inside it has two direct decendants, .pagination-perpage and .pagination.pages.
.pagination-perpage requires the .pull-left class to align it to the left. Add an inline element with .reults-indicator if you will show results. The per-page indicator gets a .perpage-indicator class, while each of the three options, 25, 50, and 100, get a .perpage-num class.
.pagination-pages requires the .pull-right class to align it to the right . Inside .pagination-pages, use .pagination to create the list of pages with 4 pages on the left of the ellipsis and 1 on the right. Wrap the ellipsis in .ellipsis for proper styling.
Make sure to inspect the emelents to understand how all the elements are used.
EXAMPLE
1 - 25 of 100,137 Results | Items per page25 | 50 | 100
Variations
Modify the markup to create variations that fit your needs.
EXAMPLE
1 - 25 of 100,137 Results | Items per page25 | 50 | 100
Wrap an input in .go-to-page to create a manual page selector.
EXAMPLE
1 - 25 of 100,137 Results | Items per page25 | 50 | 100
Tabs
Tabs follow the exact same guidlines as laid out in Bootstrap's documentation for tabs. The only difference is that they have been styled for D&B products. Enjoy :)
Plugin dependency
Tabs require Bootstrap's tab.js, which is included with the styleguide. If you are using dnb-product-design-guide.js (or .min.js) you're good to go. If not, you'll need to include tab.js.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula justo sit amet elit tincidunt volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Tab 2 with some content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula justo sit amet elit tincidunt volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla non bibendum dolor. Curabitur luctus urna in tempor mattis. Integer auctor euismod ipsum, et ullamcorper nisi fermentum sed. Quisque dictum felis quis justo accumsan, a volutpat augue luctus.
Tab 3 with some content
Nulla non bibendum dolor. Curabitur luctus urna in tempor mattis. Integer auctor euismod ipsum, et ullamcorper nisi fermentum sed. Quisque dictum felis quis justo accumsan, a volutpat augue luctus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula justo sit amet elit tincidunt volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Tab 4 with some content
Nulla non bibendum dolor. Curabitur luctus urna in tempor mattis. Integer auctor euismod ipsum, et ullamcorper nisi fermentum sed. Quisque dictum felis quis justo accumsan, a volutpat augue luctus.
Forms and Inputs
We have updated the styling for forms and inputs to fit with D&B products. However, most elements follow the same guidlines as laid out in Bootstrap's documentation for forms. There are a couple additional features that are explained below.
Basic Usage
Add .form-control to <input>, <textarea>, and <select> elements, which sets to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
EXAMPLE
File Input
File inputs are a bit trickier. The default is pretty bad, so we need to do some fancy work to make it presentable. Of course IE9 and down doesn't play nice, so you'll need to add some extra tags.
We need to wrap the input type="file" in a couple elements. Inspect the element to see the structure.
IE9 and lower
For IE9 or below, make sure you add the conditional tags directly after the new structure for the file input.
<!--[if IE]>
<input type="file">
<![endif]-->
You'll also need to conditionally hide .input-file when IE9 or below. Add the following to your <head> for to your css if you use some sort of browser detection like modernizr.
Fancy file inputs require input-file.js. It has already been built out and included with the styleguide. If you are using dnb-product-design-guide.js (or .min.js) you're good to go. If not, you'll need to include input-file.js.
EXAMPLE
Disabled state
Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.
EXAMPLE
Validation states
We've styled Bootstrap's validation styles for success, warning, and error states on form controls. To use, add .has-success, .has-warning, or .has-error to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.
The icons are generated by adding a sibling .icon-* element which also requires the .form-control-feedback class. We've added a little animation to enhance the user experience. Toggle the validation state to see the experience. For more information about the usage of feedback icons, please see Bootstrap's docs on form control validation states.
Checkboxes and Radios
We got tired of looking at the default checkboxes and radio buttons, so we styled them up a bit. For some situations, the default styles are more appropriate, so you'll need to follow Bootstrap's documentation. It's preferred, however, to use our D&B styling wherever possible.
Inspect the elements to understand where to put the appropriate classes.
Toggle Switch
Here's a handy toggle, on-off switch for you. This uses Bootstrap's button.js, more specifically it's checkbox / radio specs to transform a checkbox into the toggle switch.
But this bad boy requires a few new classes. Add .toggle-group to the .btn-group element as well as .btn and .btn-toggle to the label. You'll need a class for the color, too. The primay use needs .btn-toggle-primary. If you need different colors, you'll need to use the .button-toggle-variant() mixin.
Plugin dependency
Toggle switches requires Bootstrap's button.js. It has already been built out and included with the styleguide. If you are using dnb-product-design-guide.js (or .min.js) you're good to go. If not, you'll need to include button.js.
EXAMPLE
Alerts
Alerts follow the exact same guidlines as laid out in Bootstrap's documentation for alerts, however, we've added some additional classes to give more variety to fit our needs.
To achieve the preferred style, add .alert-with-icon and .alert-dismissible to the .alert element, along with all the appropriate elements for the icon and close button.
Preferred usage
Although alerts are made up of multiple elements that can be used in various combinations, the preferred usage includes the appropriate icon and dismissable close button.
Plugin dependency
Dismissable alerts require Bootstrap's alert.js, which is included with the styleguide. If you are using dnb-product-design-guide.js (or .min.js) you're good to go. If not, you'll need to include alert.js.
Notice are similar to Panels, except the parent element has the .notice class with a child .notice-content element. Inside .notice-content use .notice-title and .notice-body to create your notice.
Notice Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum diam eget neque mollis placerat. Vestibulum pretium non arcu nec laoreet. Vivamus hendrerit id neque eu porta. Aenean aliquam tincidunt quam, facilisis molestie sapien aliquet id. Morbi varius justo vitae ligula accumsan condimentum.
Notice variations can be created using the .notice-variant() mixin. Here are some examples.
.notice-success
Success Notice
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum diam eget neque mollis placerat.
.notice-error
Error Notice
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum diam eget neque mollis placerat.
.notice-warning
Warning Notice
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum diam eget neque mollis placerat.
The body copy for notices without titles is the same color as the left-hand border.
Notice without titles are very useful.
Notice without titles are very useful.
Notice without titles are very useful.
Labels
Labes follow the exact same guidlines as laid out in Bootstrap's documentation for labels. But we've added some extra colors for D&B products. Enjoy :)
DefaultPrimarySuccessInfoWarningDanger
Low RiskMod-Low RiskMod RiskMod-High RiskHigh RiskSevere RiskOut of BusinessNA
EXAMPLE
Royal Bank of Canada
Tradstyle(s) : Royal Bank
ActiveHeadquarters
Address:
200 Bay St Toronto M5j 2J5 ON Canada
Phone:
+1 555-555-5555
D-U-N-S:
2055555
Registration #:
350000
Tooltips
Tooltips follow the exact same guidlines as laid out in Bootstrap's documentation for tooltips. But we've added some extra guidlines for D&B products.
Plugin dependency
Tooltips require Bootstrap's tooltip.js. It has already been built out and included with the styleguide. If you are using dnb-product-design-guide.js (or .min.js) you're good to go. If not, you need to include tooltip.js.
Opt-in functionality
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all popovers on a page would be to select them by their data-toggle attribute:
$('[data-toggle="tooltip"]').tooltip()
Read Tooltip Docs
Make sure you familiarize yourself with Bootstrap's documentation for tooltips. There are a lot of options you need to pay attention to.
Basic Usage
Hover over the links below to see tooltips:
EXAMPLE
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Available Options
We've added a few extra options that may work well for your product, depending on the information you need to show.
Default
See Bootstrap's documentation to understand the structure to create these default tooltips. The available positions are top, right, bottom, and left. These positions apply to all of the color variations.
EXAMPLE
Tooltip on the left
Tooltip on the top
Tooltip on the bottom
Tooltip on the right
White Background
To create a tooltip with a white background, you need to modify the tooltip template (see Bootstrap's documentation for tooltip options) with the following, which adds the .tooltip-white class to the .tooltip element, and changes .tooltip-arrow to .tooltip-white-arrow:
To create a tooltip with a white background, you need to modify the tooltip template (see Bootstrap's documentation for tooltip options) with the following, which adds the .tooltip-gray class to the .tooltip element, and changes .tooltip-arrow to .tooltip-gray-arrow:
You can customize the tooltip content by setting the tooltip html option to true (see Bootstrap's documentation for tooltip options), then adding your html markup the to the title attribute.
Here are a few examples that are included in the Product Design Guide - but you may need to add you're own custom css:
Link Group
A link group might be useful for quick links or actions. In order to allow the user to click on the links, you'll need to modify the trigger option to include click (see Bootstrap's documentation for tooltip options). The title attribute looks like this (change the icons as needed):
Popovers follow the exact same guidlines as laid out in Bootstrap's documentation for popovers. However, we've added some extra guidlines for D&B products.
Plugin dependency
Tooltips require Bootstrap's popover.js and tooltip.js, as well as dnb-popover.js. All three have already been built out and included with the styleguide. If you are using dnb-product-design-guide.js (or .min.js) you're good to go. If not, you need to include popover.js, tooltip.js, and dnb-popover.js.
Opt-in functionality
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all popovers on a page would be to select them by their data-toggle attribute:
$('[data-toggle="popover"]').popover()
Read Popover Docs
Make sure you familiarize yourself with Bootstrap's documentation for popovers. There are a lot of options you need to pay attention to, especially the container option if you have a fixed sidebar.
Basic Usage
We've added some new functionality to the default popovers. Now, unlike stock Bootstrap, when a popover is open, if you click anywhere outside of the popover, it will close.
EXAMPLES (click on the buttons below)
Available Options
We've added a few extra options that may work well for your product, depending on the information you need to show.
Default
See Bootstrap's documentation to understand the structure to create these default popovers. The available positions are top, right, bottom, and left.
EXAMPLE
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Interactive
You can add more user interactions to the popover by adding the elements into the content option (see Bootstrap's documentation for popover options).
Adding a .close button will provide another way for the user to close the popover. You can also add a button (or whatever you need) inside the content for more user interaction.
Interactive popovers require the html option to be set to true as well as the trigger option to be set to manual.
EXAMPLE
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
EXAMPLES (click on the buttons below)
Progress bars
Progress bars follow the exact same guidlines as laid out in Bootstrap's documentation for progress bars. The only difference is that they have been styled for D&B products. Enjoy :)
60% Complete
40% Complete (success)
60% Complete (warning)
80% Complete (danger)
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Modals
Modals follow the exact same guidlines as laid out in Bootstrap's documentation for modals. Please read through Bootstrap's documentation to ensure your modals will work correctly.
Plugin dependency
Modals require Bootstrap's modal.js, which is included with the styleguide. If you are using dnb-product-design-guide.js (or .min.js) you're good to go. If not, you'll need to include modal.js.
Modal title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula justo sit amet elit tincidunt volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla non bibendum dolor. Curabitur luctus urna in tempor mattis. Integer auctor euismod ipsum, et ullamcorper nisi fermentum sed. Quisque dictum felis quis justo accumsan, a volutpat augue luctus.
Modal title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula justo sit amet elit tincidunt volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla non bibendum dolor. Curabitur luctus urna in tempor mattis. Integer auctor euismod ipsum, et ullamcorper nisi fermentum sed. Quisque dictum felis quis justo accumsan, a volutpat augue luctus.
Page Loader
We've created a fancy page loader out of the D&B ampersand. It's really easy to use. You can either use it as an img, div, or span. Just add the .amp-loader class and your all set. If you want a smaller version, add .mini-loader.
.amp-loader
EXAMPLE
img
div
span
Add .mini-loader for a smaller version.
EXAMPLE
img
div
span
Sometimes it's more appropriate to use something a little more subtle. For these cases, you can use this traditional loader. Just drop in an img, div, or span with the .simple-spinner and you're good to go.
EXAMPLE
img
div
span
Carousel Dots
We've styled the carousel navigation dots to fit with D&B products. Please review Bootstrap's documentation for carousel if you plan to use this feature.
Helper Classes
Don't forget to use the built in helper classes to quickly and easily modify elements.
There are also some quick contextual changes you can use to draw extra attention.
This section will probably be more helpful for developers.
Bootstrap Helper Classes
Check out Bootstrap's documentation on helper classes. We've highlighted just a few here, but have linked to all that Bootstrap makes available.
Sometimes you need columns to have the same height. This often helps a layout feel complete and look great.
Use .col-heightfix on the parent element of the columns you want to have the same heights. This applies display: table to the parent and display: table-cell to the direct decendant columns. This will make the heights the same, but you'll need to specify the vertical alignment. There are 3 additional classes to choose from, depending on what you're trying to accomplish: .col-heightfix-top, .col-heightfix-middle, and .col-heightfix-bottom.
EXAMPLE
w/o .col-heightfix class
Nullam id dolor id nibh ultricies vehicula ut id elit.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
w/ .col-heightfix class
Nullam id dolor id nibh ultricies vehicula ut id elit.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
May not produce expected results
Depending on your structure, this may not product the exact results you are looking for. For example, the height of panels is determined by the .panel-body element which is not a direct decendent of a column. So, although the columns will be the same height, the panels will remain unaffected.
EXAMPLE
w/o .col-heightfix class
Panel Title
Nullam id dolor id nibh ultricies vehicula ut id elit.
Panel Title
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Panel Title
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
w/ .col-heightfix class
Panel Title
Nullam id dolor id nibh ultricies vehicula ut id elit.
Panel Title
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Panel Title
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Although the panels don't become the same height, you can do some interesting thing by adding the extra classes. May not be ideal for panels, but this should illustrate the point.
EXAMPLE
w/ .col-heightfix-top class added
Nullam id dolor id nibh ultricies vehicula ut id elit.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
w/ .col-heightfix-middle class added
Nullam id dolor id nibh ultricies vehicula ut id elit.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
w/ .col-heightfix-bottom class added
Nullam id dolor id nibh ultricies vehicula ut id elit.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
FAQ
Here are some answers to questions you might find helpful.
How Do I Gain Access?
Our CC Library includes all raw customizable components. You may request access by emailing Cassie Sharp.
Why Bootstrap?
There are many framework options out there. After colaborationg with many D&B teams, we decided to go with Bootstrap for many reasons: it's a popular, well-documented framework; has a big community; it's easy to learn; a lot of people are already familiar with it; and many D&B apps are already using it.
Why a Fork of Bootstrap?
After much discussion, we decided a fork of Bootstrap would work best for us. There were so many changes that needed to be made to the stock Bootsrap. We decided that if we had just put our theme on top of Bootstrap, we would have had a lot of code bloat as well as a difficult time upgrading Bootsrap, when a newer version becomes available. Creating our own fork allows us to minimize the code bloat and take full control of our style guide.
How Do I Customize?
Typically, you'll want to treat this like you would Bootstrap and keep any app specific customizations separate. That way, if you update the the latest Product Design Guide, you won't lose any of your customizations.
If you're using LESS, you can @import the Product Design Guide LESS into your project LESS and overwrite any variables to meet your needs.
But ultimately it's up to you and what works best for your project.
Maintenance?
The D&B UXD Team maintains the D&B Product Design Guide. We encourage the users of this guide to contribute to it's improvement by submitting bugs and pull requests through Bitbucket. From there we will fix and add new features after a discussion to see what is appropriate for this global style guide. Not everything will be added, but we will do our best to keep this framework one that will work for as many D&B products as possible.
How Do I Stay Up to Date?
We will send out notifications to D&B teams when we make significant updates. Upgrading your project will depend on how you are using the Product Design Guide. You can either download the latest precompiled files and relink, pull the latest from Bitbucket or do an npm update.
