Product Design Guide Documentation

Product Design Guide

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.

Live Demo

Current Version: 1.0.0

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 Code

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.

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:

dnb-product-design-guide/
  ├── css/
  │   ├── dnb-product-design-guide.css
  │   └── dnb-product-design-guide.min.css
  ├── img/
  │   └── General D&B Images
  └── js/
         ├── dnb-product-design-guide.js
         └── dnb-product-design-guide.min.js

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:

dnb-product-design-guide/
  ├── less/
  ├── js/
  ├── dist/
  │   ├── css/
  │   ├── js/
  │   └── img/
  └── documentation/
      └── demo/

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.

Launch Demo

Colors

Primary

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.

EXAMPLE

This is what a link looks like.

Paragraph

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.

Luminara sebulba codru-ji keyan pavan shado qui-gonn cabasshite dormé. Kohl borvo ooryl y'bith sluis rex hutt gordin grievous. Latter ahsoka secura skywalker sio borvo aayla utapaun.

Small Text

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

EXAMPLE

Luminara sebulba codru-ji keyan pavan shado qui-gonn cabasshite dormé. Kohl borvo ooryl y'bith sluis rex hutt gordin grievous.

Unordered Lists

Multiple options are available:

Default

EXAMPLE

  • List item 1
  • List item 2
  • List item 3

.alt-list will remove the bullets:

Without bullets

EXAMPLE

  • List item 1
  • List item 2
  • List item 3

.list-unstyled will remove the bullets and padding:

Without bullets or padding

EXAMPLE

  • List item 1
  • List item 2
  • List item 3

H1 Heading

24px Open Sans SemiBold
#005172

H2 Heading

14px Open Sans SemiBold
#005172

H3 Heading

18px Open Sans SemiBold
#005172
14px Open Sans SemiBold
#009ECE
Bullet Points
14px Open Sans Regular | Leading 30px
#002E41
  • Lorem ipsum dolor
  • Ut enim ad minim
  • Duis aute irure dolor in
Paragraph Copy
14px Open Sans Regular | Leading 24px
#002E41

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.

grid

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.

Live Demo

Required Classes

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.

Primary

.btn-primary, .btn-primary-dark-blue, .btn-primary-green

Default

.btn-default, .btn-default-dark-blue, .btn-default-green

Default w/ Gray Outline

Add .btn-gray-outline to the default classes.

Danger

.btn-danger

Link

To deemphasize a button by making it look like a link while maintaining button behavior, add .btn-link.


Button Colors on Dark Background

Add .btn-on-dark class to change the hover state to work better on dark backgrounds.


Button Disabled States

Add the disabled attribute to <button> buttons or the .disabled class to <a> buttons.

Primary




Default




Default w/ Gray Outline

Default
Default Dark Blue
Default Green

Danger

Link

Button Sizes

Additional sizes are available by adding the approprite class.

Large

.btn-lg

Large

Medium

Default size

Default

Small

.btn-sm

Small

Buttons w/ icons

Buttons that have icons inside them require the .btn-with-icon class, including button dropdowns.

To add a stroke, use .btn-with-icon-stroke.

The icons inside the button element get the following classes.

.btn-icon-left


.btn-icon-left


.btn-icon-right


.btn-icon-right


Buttons w/ badges

Requires the .btn-with-icon and .btn-icon-left classes like buttons w/ icons.



Panels

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.

Check Bootstrap's panel documentation for more detail.

Primary Usage

The primary (default) use of panels has a blue border at the top.

Primary Panel Title

Panel content
Panel content

Plain Panel

Remove the top blue border by adding the .panel-plain class.

Plain panel without header or footer

Panel Body without Padding

It may be appropriate to remove the padding from the panel body. Add .panel-body-no-padding to the .panel-body.

Panel Body without Padding

Cards

Add .card-on-white to the .card element if the card will be on a white background.

.card-default

Default Card

Lorem ipsum dolor sit amet, consectetur ropefort adipisicing elit, sed do eiusmod tempor incididnt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud guisde exercitation ullamco anim id est laborum. Sed perspiciatis under.

.card-with-image

Card with Image

.card-with-icon

Card with Icon

Lorem ipsum dolor sit amet, consectetur ropefort adipisicing elit, sed do eiusmod tempor incididnt

.card-center-lg

Large Centered Title

Anim pariatur cliche reprehenderit, enim eiusmod high life.

.card-center-heading

Centered Heading Card

Lorem ipsum dolor sit amet, consectetur ropefort adipisicing elit, sed do eiusmod tempor incididnt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud guisde exercitation ullamco anim id est laborum. Sed perspiciatis under.

.card-with-tabs

Tab 1 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.

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.

.card-table

Card with Table

Company First Name Last Name Username
Clickable Item Mark Otto @mdo
Clickable Item Jacob Thornton @fat
Clickable Item Larry the Bird @twitter

Accordions

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

<!--[if lte IE 9]>
  <div class="old_ie_wrapper">
<!--<![endif]-->
  <div class="scroll-table">
    Table goes here...
  </div>
<!--[if lte IE 9]>
  </div>
<!--<![endif]-->

EXAMPLE

Standard Sortable Table with Scrollable Content

Company First Name Last Name Username Numeric First Name Last Name Username Company First Name Last Name Username
1 Mark Otto @mdo 172,345 Mark Otto @mdo 1 Mark Otto @mdo
2 Jacob Thornton @fat 28,963,004 Jacob Thornton @fat 2 Jacob Thornton @fat
3 Larry the Bird @twitter 38,345,100 Larry the Bird @twitter 3 Larry the Bird @twitter
1 Mark Otto @mdo 3,245 Mark Otto @mdo 1 Mark Otto @mdo
2 Jacob Thornton @fat 21,963,046 Jacob Thornton @fat 2 Jacob Thornton @fat
3 Larry the Bird @twitter 52,345,197 Larry the Bird @twitter 3 Larry the Bird @twitter
1 Mark Otto @mdo 572,375 Mark Otto @mdo 1 Mark Otto @mdo
2 Jacob Thornton @fat 1,963,789 Jacob Thornton @fat 2 Jacob Thornton @fat
3 Larry the Bird @twitter 907,345,623 Larry the Bird @twitter 3 Larry the Bird @twitter

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.

Tab 1 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.

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.

<!--[if IE]>
        <style>
            .input-file {display: none;}
        </style>
<![endif]-->
Plugin dependency

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

Choose File

Example block-level help text here.

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.

EXAMPLE

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.

Checkboxes

.checkbox-styled

EXAMPLE

.checkbox-styled.checkbox-sm

EXAMPLE

Radio Buttons

.radio-styled

EXAMPLE

.radio-styled.radio-sm

EXAMPLE

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

Off
On

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.

Variations

More subtle alerts are easily created by including an additional class:

.alert-white-bg

.alert-gray-bg

Remove .alert-with-icon and the icon element for an alert without an icon

Notices

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

Default Primary Success Info Warning Danger

Low Risk Mod-Low Risk Mod Risk Mod-High Risk High Risk Severe Risk Out of Business NA

EXAMPLE

Royal Bank of Canada

Tradstyle(s) : Royal Bank

Active Headquarters

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

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:

<div class='tooltip tooltip-white' role='tooltip'><div class='tooltip-white-arrow'></div><div class='tooltip-inner'></div></div>

EXAMPLE

Gray 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-gray class to the .tooltip element, and changes .tooltip-arrow to .tooltip-gray-arrow:

<div class='tooltip tooltip-gray' role='tooltip'><div class='tooltip-white-arrow'></div><div class='tooltip-inner'></div></div>

EXAMPLE

Custom Content

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

<span class='tooltip-link-group'><a href='#'><span class='icon-download4'></span></a><a href='#'><span class='icon-edit'></span></a><a href='#'><span class='icon-delete'></span></a></span>

EXAMPLE

Data Detail

Display a quick look at data with the data detail tooltip. The title attribute looks like this (add you're own css):

<span class='tooltip-link-group'><a href='#'><span class='icon-download4'></span></a><a href='#'><span class='icon-edit'></span></a><a href='#'><span class='icon-delete'></span></a></span>

EXAMPLE

Use with Buttons

EXAMPLE

Popovers

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.

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

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.

  • Contextual colors

    Add a class to a p tag to highlight the entire paragraph.

    EXAMPLE

    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

    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.

    Combine with strong or b to make it stand out even more.

    EXAMPLE

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Contextual backgrounds

    EXAMPLE

    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.

  • Close icon
  • Carets
  • Quick floats
  • Center content blocks
  • Clearfix
  • Showing and hiding content
  • Screen reader and keyboard navigation content
  • Image replacement

D&B Specific Helper Classes

  • Column Heightfix

    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.

Footers

Footers have been defined to be standardized across products. There are 3 to choose from, based on the page you're on.

Login Screen Footer

EXAMPLE

In Product Footer

Make sure you use your product name. The basic D&B image is included in the design guide download.

EXAMPLE

Marketing Footer

Make sure you use your product name for accessibility. The logo here will need to be constimized for the marketing page you are building. If you need help, please contact Casey Decker.

EXAMPLE

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.