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).
For a working example, check out Template Examples.