Follow

Built-in CSS Classes

CSS Helper Classes

The classes below will help you quickly add different structures to any website. They can be easily overwritten with CSS to customize them on a per site/use basis. The dev team will try to incorporate these into landing page codes where applicable.

Column Styles

This code supports 2, 3, and 4 column structures for use on any page. This code is  responsive. 

Use

  • Change dak-column-2 to 3 or 4 depending on how many columns you need.
  • Duplicate dak-column as many times as needed, they will automatically stack as expected.
  • You can place any content inside the dak-column, images, links, etc.

Example of columns with basic real estate 'lorem' text.

Example: 2 columns

<div class="dak-columns dak-column-2">
<div class="dak-column">
<p>Content</p>
</div>
<div class="dak-column">
<p>Content</p>
</div>
</div>

Example: 3 columns

<div class="dak-columns dak-column-3">
<div class="dak-column">
<p>Content</p>
</div>
<div class="dak-column">
<p>Content</p>
</div>
<div class="dak-column">
<p>Content</p>
</div>
</div>

Example: 4 columns

<div class="dak-columns dak-column-4">
<div class="dak-column">
<p>Content</p>
</div>
<div class="dak-column">
<p>Content</p>
</div>
<div class="dak-column">
<p>Content</p>
</div>
<div class="dak-column">
<p>Content</p>
</div>
</div>

You can also create 2 uneven columns. One allows for one third and two thirds, the other for 1 quarter and 3 quarters size. Use the following classes on the surrounding div (with the classes dak-columns and dak-column-2):

  • dak-column-third-left: Will have a smaller column on the left at 33% wide
  • dak-column-third-right: Will have a smaller column on the right at 33% wide
  • dak-column-quarter-left: Will have a smaller column on the left at 25% wide
  • dak-column-quarter-right: Will have a smaller column on the right at 25% wide

 

List Styles

This code supports 2, 3, and 4 column lists for use on any page. This code is  responsive. You can place these classes directly on an ordered or unordered list. List items will display from Left to Right, then wrap to the next row.

Use

  • Change dak-list-2 to 3 or 4 depending on how many columns you need.
  • Floated lists are meant to cinch up space for shorter list items.

Example: 2 columns

<ul class="dak-list dak-list-2">
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>

Buttons

This code supports 1 to 6 column lists for use on any page. This code is responsive. It pulls the default colors from the main colors of the website. This code is present on every site. Please note the class name change.

Use

  • Change dak-buttons-2 to 3-6 or remove depending on how many columns you need. Placing dak-buttons as a single class on the UL or OL will render a single column list of buttons.
  • This supports a single line in each button.
  • Using the class dak-button-full on an LI will make it full width. This class is best used only on the final button(s) as it will cause problems if used in the middle of a list.
  • This will only style buttons that have a link.

Example: 2 column button list

<ul class="dak-buttons dak-buttons-2">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

Example of buttons layout from 1-6. Some also have a full button at the bottom.

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Need Additional Support?

Our team is here to help.

Contact Us
Powered by Zendesk