DC Identity

Style guide

A guide for the DesignChief online style

Core typography

Typography is using System UI font.

Standard Headings

Heading 1 with long running sample title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis vitae risus tristique posuere.

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 2 sample title

Heading 3 sample title

Heading 4 with text link

Heading 5 sample title
Heading 6 sample title
.h-hero

Hero header

.h-hero.small

Hero header

.h-hero.xsmall

Hero header

.h-large
Large header with long running title text
.h-medium
Medium header with long running title text
.h-section
Section Heading
.p-hero

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.p-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Unordered List
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.
  • Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
ordered List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.
  2. Suspendisse varius enim in eros elementum tristique.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Blockquote
A sample block quote

Colours

Your brand colour palette.

Main Colours
DC Red
#CB0700
Secondary Colours
DC Orange
#DC8A00
DC Blue
#007DDD
DC Green
#00AAAA
Grey Colours
Body Dark
#1a1a1a
Body Light
#E5E5E5
Medium Grey
#757575
White
#FFFFFF
Process Colours
Info
#009FF2
Success
#3ADB76
Warning
#DC8A00
Alert
#E80900

Icons

Icon styles and sizes.

Standard Icons
Circle Icons
Social Icons

Icon headers

Icon headers and other inline uses.

Icon Headers

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Heading

Heading with long running title text with long running title text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Icon Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

This is some text inside of a div block.

Links

Text link styles with icon.

Buttons

Button options and styles.

.button.b-secondary
.button.b-hollow
.button.b-white
.button.b-small
.button.b-large

Form elements

Form components and size options.

Search
email-action-unread
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Cards

Various boxed style components.

.card
Badge Standard

Card headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Card with Image

Card headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Badge Small

Card headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Media

Image and video components.

.img-mask
.img-mask.img-circle
.img-mask.img-16-9
Circle Image Sizes
Video Embed

Dropdown

Dropdown component.

Dropdown

Tabs

Tab components.

Tabs

Content 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Content 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Content 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Accordion

Show and hide content with the accordion component.

Accordion Dropdown
Accordion 1
Accordion 2

Badges

Badge components with various size and colour options.

Standard Badges
Badge
Badge
Badge
Badge
Small Badges
Badge Small
Badge Small
Badge Small
Badge Small

Notifications

Colour coded notification components.

Notifications
Standard notification component.
Alert! Something went wrong while submitting the form.
Success! That went well.
Warning! Something’s not quite right.

Rich text

Body content styles for rich text elements.

Rich text headline

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

A sample block quote

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Image with caption

Image caption here...

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element. Here is some Bold Text, some Italicised Text and a text link.

Media embed sample

Cookie widget

Cookie widget setup for iubenda.

.iubenda-cs-default-floating
We and selected partners, use cookies or similar technologies as specified in the cookie policy. Learn more and customize.
Ready to go?

Contact

Get in touch and let’s chat about your project.