Designing a content block with two sides of information.

An interactive, dual-sided block can be useful to help defer complexity for users, allowing access to deeper information only when needed.

Designating a block to 'spin' with two sides of content is a fairly straightforward process of adding two instances of the HTML Wrap Macro (one for each side) within one block. The content desired for each side of the block is added inside each of the macros. 

Example

A Spinning Block

Looking for a visually interesting and effective way to present dense information? Consider a spinning block!

Add a block to a page

Add two instances of the HTML Wrap Macro within that block

Add a class to the first macro

In the CSS Class field, enter the following class:

block-front

Add a class to the second macro

In the CSS Class field, enter the following class:

block-back

Save the edits

Click the spinner icon to give your block a test run.

VARIATIONS

Want to rotate horizontally instead?

Add the following two classes to the second HTML Wrap macro:

block-back flip-up

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the Steps block above to narrow the gap between the two blocks.

Settings at both the page-level (block options) as well as the macro level can be adjusted to suit your design needs. In the example above, padding and margin, as well as background color, have been added to the page-level block settings:

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.