<article class="spanX data-block">
	<header>
		<h2>Headline</h2>
	</header>
	<section>
		Content
	</section>
	<footer>
		Footer
	</footer>
</article>

First grid layer is built with .data-block cells. Second one works inside of data blocks. You can remove <footer> and <header> if needed or turn whole block into more complex widget.

Each block header can be enchanted with buttons, dropdown, tabs, search bar or loeading notification. Use .data-header-actions or .header-search class for proper styling. See the examples on this page.

You can choose from 8 different colors for each data block. Simply add color class .red or other to change color of your data block.

Each data block comes with header, content section and footer which are also optional and removeable.

Check following blocks on the right side for example configuration.

This is default data-block style.

Use .widget-block class to turn data-block into a widget.

Follow the structure below so you can easily customize widget-block content.

<a class="spanX data-block widget-block">
	<section>
		<span>Icon</span>
		<strong>Text</strong>
	</section>
</a>

Data blocks with .plan-block class applied allows you to create blocks with more specific information. Simply follow the structure below.

<article class="spanX data-block plan-block">
	<section>
		<span>Icon</span>
		<h3>Headline</h3>
		<p>Text</p>
		<a class="btn">Button</a>
	</section>
</article>

Nice floating accordion style can be achieved with .accordion-block class.

When creating to-do list, do not forget to include .todo-block class for data block.