Home/Connect/Style Guide

Style Guide

Use the style guide page to create HTML/CSS elements that your site has built in. Copy the code and paste into your content by editing the HTML and then clicking the button.

CSS Class

Copy the red code and paste in HTML SOURCE to copy the element.

Text & Content

Replace the blue text from your copied element with your desired content.

Link URL

Paste your link in place of the green text in HTML SOURCE.

Buttons

Accent Button 1

Accent Extra Small

<a class="dg-btn-3 size-xs radius-3px btn-accent" href="Link URL">Button Title</a>

Accent Small

<a class="dg-btn-3 size-sm radius-3px btn-accent" href="Link URL">Button Title</a>

Accent Button

<a class="dg-btn-3 radius-3px btn-accent" href="Link URL">Button Title</a>

Accent Large

<a class="dg-btn-3 size-lg radius-3px btn-accent" href="Link URL">Button Title</a>

Accent Extra Large

<a class="dg-btn-3 size-xl radius-3px btn-accent" href="Link URL">Button Title</a>

Accent Button 2

Accent2 Extra Small

<a class="dg-btn-3 size-xs radius-3px btn-accent2" href="Link URL">Button Title</a>

Accent2 Small

<a class="dg-btn-3 size-sm radius-3px btn-accent2" href="Link URL">Button Title</a>

Accent2 Button

<a class="dg-btn-3 radius-3px btn-accent2" href="Link URL">Button Title</a>

Accent2 Large

<a class="dg-btn-3 size-lg radius-3px btn-accent2" href="Link URL">Button Title</a>

Accent2 Extra Large

<a class="dg-btn-3 size-xl radius-3px btn-accent2" href="Link URL">Button Title</a>

Accent Button 3

Accent3 Extra Small

<a class="dg-btn-3 size-xs radius-3px btn-accent3" href="Link URL">Button Title</a>

Accent3 Small

<a class="dg-btn-3 size-sm radius-3px btn-accent3" href="Link URL">Button Title</a>

Accent3 Button

<a class="dg-btn-3 radius-3px btn-accent3" href="Link URL">Button Title</a>

Accent3 Large

<a class="dg-btn-3 size-lg radius-3px btn-accent3" href="Link URL">Button Title</a>

Accent3 Extra Large

<a class="dg-btn-3 size-xl radius-3px btn-accent3" href="Link URL">Button Title</a>

Accent Button 4

Accent4 Extra Small

<a class="dg-btn-3 size-xs radius-3px btn-accent4" href="Link URL">Button Title</a>

Accent4 Small

<a class="dg-btn-3 size-sm radius-3px btn-accent4" href="Link URL">Button Title</a>

Accent4 Button

<a class="dg-btn-3 radius-3px btn-accent4" href="Link URL">Button Title</a>

Accent4 Large

<a class="dg-btn-3 size-lg radius-3px btn-accent4" href="Link URL">Button Title</a>

Accent4 Extra Large

<a class="dg-btn-3 size-xl radius-3px btn-accent4" href="Link URL">Button Title</a>

Containers

Callout Accent

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Callout Accent 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Callout Accent 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Color Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Callout Accent 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.