Follow

Built-in CSS Classes (Depricated)

CSS Helper Classes (Depricated)

NOTE: We have expanded the CSS classes to greatly increase individual page customization. Learn more about our utility classes.

 

For historic reference (or if you prefer life in the stone ages):

Column Styles (Pro tip: use dak-grids instead!)

Want even more customization, flexibility, and design power? Check out our fancy new GRIDS!

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.

Example: 2 columns

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

Buttons

 

We have expanded the button classes to allow more flexibility. Because of this, the buttons now have their own article. Learn more about the new buttons.

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

Need Additional Support?

Our team is here to help.

Contact Us
Powered by Zendesk