Colors

The color palette specifies primary and secondary colors to use throughout a design.

Primary Colors

$color-p0

$color-p1

$color-p2

$color-p3

$color-p4

$color-p5

$color-p6

$color-p7

$color-p8

$color-p9

$color-p10

Secondary Colors

$color-s0

$color-s1

$color-s2

$color-s3

$color-s4

$color-s5

$color-s6

$color-s7

$color-s8

$color-s9

$color-s10

Brand Colors

In addition to these colors, we also have alpha transparent variants of Neutral-0, Neutral-1000 and all of the other -500 colors. The alpha color options have a breakdown of transparency in tenths available (i.e. .1 through .9). The alpha transparent CSS custom property values can be accessed as var(--color-neutral-1000-alpha-9), var(--color-primary-500-alpha-1), etc.

neutral

neutral-0

neutral-50

neutral-100

neutral-200

neutral-300

neutral-400

neutral-500

neutral-600

neutral-700

neutral-800

neutral-900

neutral-950

neutral-1000

primary

primary-50

primary-100

primary-200

primary-300

primary-400

primary-500

primary-600

primary-700

primary-800

primary-900

accent

accent-50

accent-100

accent-200

accent-300

accent-400

accent-500

accent-600

accent-700

accent-800

accent-900

Functional Colors

success

success-50

success-100

success-200

success-300

success-400

success-500

success-600

success-700

success-800

success-900

info

info-50

info-100

info-200

info-300

info-400

info-500

info-600

info-700

info-800

info-900

warning

warning-50

warning-100

warning-200

warning-300

warning-400

warning-500

warning-600

warning-700

warning-800

warning-900

danger

danger-50

danger-100

danger-200

danger-300

danger-400

danger-500

danger-600

danger-700

danger-800

danger-900

Text Color

.text-body

.text-inverse

.text-muted

.text-muted-inverse

.text-light

.text-dark

.text-primary

.text-success

.text-danger

.text-warning

.text-info

.text-white

.text-black-50

.text-white-50

Background Color

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

.bg-body

.bg-contrast-low

.bg-contrast-med

.bg-contrast-med.bg-top-30*

.bg-contrast-med.bg-top-50*

.bg-contrast-high

.bg-primary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-black

.bg-white

.bg-transparent

* Additional extension classes can be applied to .bg-contrast-med to achieve percentage based background colors. This is not fully supported on all background color classes and only has top-30 and top-50 options at this time.

Typography

Heading Size

H1 Heading Size

<preference name='headingSize' value='h1'/>

H2 Heading Size

<preference name='headingSize' value='h2'/>

H3 Heading Size

<preference name='headingSize' value='h3'/>

H4 Heading Size

<preference name='headingSize' value='h4'/>

H5 Heading Size

<preference name='headingSize' value='h5'/>

H6 Heading Size

<preference name='headingSize' value='h6'/>

Heading Style

H1 Heading with .ddc-heading-1 class applied.

<preference name='headingStyle' value='1'/>

H1 Heading with .ddc-heading-2 class applied.

<preference name='headingStyle' value='2'/>

H1 Heading with .ddc-heading-3 class applied.

<preference name='headingStyle' value='3'/>

H1 Heading with .ddc-heading-4 class applied.

<preference name='headingStyle' value='4'/>

H1 Heading with .ddc-heading-5 class applied.

<preference name='headingStyle' value='5'/>

H1 Heading with .ddc-heading-6 class applied.

<preference name='headingStyle' value='6'/>

Display Headings

Display headings should be used when you need a heading to stand out. These typically display larger than standard headings, and may contain unique style attributes (i.e. font-family, font-weight, etc.).

Display 1

<h1 class='display-1'>Display 1</h1>

Display 2

<h1 class='display-2'>Display 2</h1>

Display 3

<h1 class='display-3'>Display 3</h1>

Display 4

<h1 class='display-4'>Display 4</h1>

Paragraph

Important or intro paragraphs can have the lead class applied to help them stand out.

<p class="lead">Content</p>

Then, body text. So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

<p>Content</p>

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Forms

Forms may be shown with labels stacked above input elements (default), horizontally with labels adjacent to input elements (horizontal), or with all elements floated left for very small forms (inline). The formLayout preference may be used to change the display of a form.

Inline Layout

Slider

Buttons

Buttons are generally added to a page using portlet preferences whose names contain the strings buttonSize, buttonStyle, and buttonLayout.

The default button style should be used when it is less visually prominent than primary buttons but more prominent than link buttons. It should be seen as a secondary button.

Button Style

<preference name='buttonStyle' value='primary'/>

Link Button Style

This style should be used when a button is the semantic element to use, but it needs to look like an anchor link. This is a standalone class that should not be combined with .btn. This differs from the .btn-link usage as it removes padding, background and borders.

Icons

Global icons that are overridden by the variation are in the Global Icons section below and are highlighted in yellow.

Icon Sizes

Icon sizes can be relative (i.e. em based) to the parent size. Or they can use Design System spacing framework values. Using spacing framework icon size classes allows exact sizing to be set. Be aware of the type of styling you desire when setting these sizing classes.

<i class='ddc-icon ddc-icon-home ddc-icon-size-xlarge'></i>

<i class='ddc-icon ddc-icon-home icon-size-8'></i>

Animation Classes

Style Classes

Icon styles are set up in the design system to apply styling to the icon beyond basic font coloring. These classes do not have a 'ddc' prefix.

Responsive Grid Example

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6

.col-xs-6

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and a responsive utility classes.

.col-xs-6 .col-sm-3 Sample piece of text to make this div taller than the others.

POPOVERS

By default popovers work on hover for desktop and click on mobile.

On mobile you will get a slidein.

Pop on over for a demonstration.

<span class='btn btn-primary' data-toggle='popover' data-placement='bottom' data-title='Helpful information on popovers' data-content='This is content set in the...'>Pop on over for a demonstration.</span>

Although every reasonable effort has been made to ensure the accuracy of the information contained on this site, absolute accuracy cannot be guaranteed. This site, and all information and materials appearing on it, are presented to the user "as is" without warranty of any kind, either express or implied. All vehicles are subject to prior sale. Price does not include applicable tax, title, license, processing and/or documentation fees, and destination charges. ‡Vehicles shown at different locations are not currently in our inventory (Not in Stock) but can be made available to you at our location within a reasonable date from the time of your request, not to exceed one week.