Style Examples

This is a h1 header, with a strong element

This is a h2 header, with a strong element

This is a h3 header, with a strong element

This is a h4 header, with a strong element

This is a h5 header, with a strong element
This is a h6 header, with a strong element

This is default style for blockquote.

This is a quote in a box floated to the right side (Blockquote with “box” class.)

Paragraph and text style:

This is a long paragraph of text. Link here. A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec vulputate leo. Fusce mauris arcu, interdum quis auctor at, pulvinar eget nibh. In vitae nisl nec justo accumsan tristique ut vel quam. Proin ac risus eu magna sagittis cursus. Maecenas id dui molestie odio pharetra sagittis non sed enim. Proin placerat a est ac tempor. Vivamus arcu sem, cursus ut varius sit amet, elementum quis enim. Integer porta metus nisl, at pretium arcu feugiat et. Pellentesque laoreet imperdiet accumsan. Morbi sit amet magna ligula. Vivamus id blandit augue. Maecenas quis arcu eget ex auctor euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce id purus aliquam, vehicula turpis et, commodo magna. Integer auctor purus ac felis vulputate eleifend sed et ex.

Text styles:

with ‘text-grey’ class: some text here
with ‘text-green’ class: some text here
with ‘text-black’ class: some text here
with ‘text-white’ class: some text here
with ‘text-uppercase’ class: some text here
with ‘text-light’ class: some text here
with ‘text-weight400’ class: some text here
with ‘text-weight600’ class: some text here
with ‘large’ class: some text here

Grid

Note the nesting wrapper with ‘row’ class to ensure the image aligns at both edges.

<div class="row">
<div class="row">
<div class="columns medium-3"><img class="alignnone wp-image-121 size-full" src="https://dev.doubletakedesign.com/wp-content/uploads/2017/08/dtd_socore_sign1.jpg" alt="SoCore Sign 1" width="536" height="446" /></div>
<div class="columns medium-3"><img class="alignnone wp-image-122 size-full" src="https://dev.doubletakedesign.com/wp-content/uploads/2017/08/dtd_socore_sign2.jpg" alt="SoCore Sign 2" width="536" height="446" /></div>
<div class="columns medium-3"><img class="alignnone wp-image-123 size-full" src="https://dev.doubletakedesign.com/wp-content/uploads/2017/08/dtd_socore_sign3.jpg" alt="SoCore Sign 3" width="536" height="446" /></div>
<div class="columns medium-3"><img class="alignnone wp-image-124 size-full" src="https://dev.doubletakedesign.com/wp-content/uploads/2017/08/dtd_socore_sign4.jpg" alt="SoCore Sign 4" width="536" height="446" /></div>
</div>
</div>

SoCore Sign 1
SoCore Sign 2
SoCore Sign 3
SoCore Sign 4

Use class “collapse” to eliminate the gutter.

<div class="row">
<div class="row collapse">
<div class="columns medium-3"><img class="alignnone wp-image-121 size-full" src="https://dev.doubletakedesign.com/wp-content/uploads/2017/08/dtd_socore_sign1.jpg" alt="SoCore Sign 1" width="536" height="446" /></div>
<div class="columns medium-3"><img class="alignnone wp-image-122 size-full" src="https://dev.doubletakedesign.com/wp-content/uploads/2017/08/dtd_socore_sign2.jpg" alt="SoCore Sign 2" width="536" height="446" /></div>
<div class="columns medium-3"><img class="alignnone wp-image-123 size-full" src="https://dev.doubletakedesign.com/wp-content/uploads/2017/08/dtd_socore_sign3.jpg" alt="SoCore Sign 3" width="536" height="446" /></div>
<div class="columns medium-3"><img class="alignnone wp-image-124 size-full" src="https://dev.doubletakedesign.com/wp-content/uploads/2017/08/dtd_socore_sign4.jpg" alt="SoCore Sign 4" width="536" height="446" /></div>
</div>
</div>

SoCore Sign 1
SoCore Sign 2
SoCore Sign 3
SoCore Sign 4

Buttons

These classes can be applied to a tag or button tag.

<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Secondary</a>
<a class="button success" href="#">Success</a>
<a class="button alert" href="#">Alert</a>
<a class="button warning" href="#">Warning</a>

Primary Secondary Success Alert Warning

<button class="hollow button" href="#">Primary</button>
<button class="hollow button secondary" href="#">Secondary</button>
<button class="hollow button success" href="#">Success</button>
<button class="hollow button alert" href="#">Alert</button>
<button class="hollow button warning" href="#">Warning</button>
<button class="hollow button" href="#" disabled>Disabled</button>

<a class="button tiny" href="#">So Tiny</a>
<a class="button small" href="#">So Small</a>
<a class="button" href="#">So Basic</a>
<a class="button large" href="#">So Large</a>
<a class="button expanded" href="#">Such Expand</a>
<a class="button small expanded" href="#">Wow, Small Expand</a>

So Tiny So Small So Basic So Large

Such Expand
Wow, Small Expand