Create a spinning block
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) and doing so within one block. The content desired for each side of the block is added inside each of the macros.
Example
Add a block to a page
Add two instances of the HTML Wrap Macro with 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
[[screenshot please]]
Save the edits
VARIATIONS
Want to rotate horizontally instead?
Add the following two classes to the second HTML Wrap macro:
block-front flip-up
If using:
- Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
- Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.