Default block

Block title

This is a default block, with very simple markup. It can take anything as content, with or without padding.

<div class="block">
	<h3 class="block-title">Block title</h3>
	<div class="with-padding">

		<!-- content here -->

	</div>
</div>

With controls

Edit

... and also embed any element you need, such as buttons.

<div class="block">
	<div class="block-title">
		<h3>Block title</h3>
		<div class="button-group absolute-right compact">
			<a href="#" class="button icon-pencil">Edit</a>
			<a href="#" class="button icon-gear with-tooltip" title="Other actions"></a>
			<a href="#" class="button icon-trash with-tooltip confirm" title="Delete"></a>
		</div>
	</div>
	<div class="with-padding">

		<!-- content here -->

	</div>
</div>

Details blocks

Required plugin

This feature requires the plugin file js/libs/jquery.details.min.js

Detail summary

Details look pretty much like blocks, but they may be closed or opened simply by clicking on the title.

They use the HTML5 <details> element, with polyfill support for older browsers.

<details class="details margin-bottom" open>
	<summary>Title</summary>
	<div class="with-padding">

		<!-- content here -->

	</div>
</details>

Add or remove the attribute open to change how the detail element is by default.

Accordion

First section: First section content

The accordion plugin may also equalize the sections' height, just by adding the class same-height - as for this example.

Give it a try!
Second section: Second section content
Third section: Third section content

<dl class="accordion same-height">
	<dt>First section</dt>
	<dd>
		<div class="with-padding">

			<!-- content here -->

		</div>
	</dd>

	<dt>Second section</dt>
	<dd>
		<div class="with-padding">

			<!-- content here -->

		</div>
	</dd>

	...
</dl>