Zenbox

The zenboxes allow for small content sections to be highlighted by providing a gray background and a colorful header. You can achieve these by utilizing this code:

<div class="zenbox">
 <h3>This is a zenbox header</h3>
 <p>Content</p>
	<ul>
	 <li>Item 1</li>
	 <li>Item 2</li>
	 <li>Item 3</li>
	</ul>
</div>

The colors can be controlled by adding an extra class name. For a full list of approved colors and their associated class names, check out the Content Box Styling resources.

Creating zenboxes with show/hide capabilities

With a couple of extra steps, you can make any zenbox show/hide (the content slides up and down. When closed, only the H3 is visible).

<script type="text/javascript">
	WDN.initializePlugin('zenbox');
</script>
<div class="zenbox showHide">
    <h3>This is you header which will have the color</h3>
    <p>Content</p>
</div>

Notice the class name of 'showHide' and the added JavaScript.

For a working example, check out Template Examples.