Multiple conditions

Binding multiple modules on a single element

Both the Clock and Zoom module are active on the element below.

<div data-module='["ui/Clock","ui/Zoom"]'> ... </div>

Binding multiple conditioned modules on an element

The Clock below will always be active and will be accompanied by a Zoom control when the page is wider than 35ems.

There's two ways of defining multiple modules, a JSON notation or an Array notation, the later is shorter and easier to read.

Using Array notation

<div data-module='[["ui/Clock",{"time":false}],["ui/Zoom","media:{(min-width:35em)}"]]'> ... </div>

Using JSON notation

<div data-module='[{"path":"ui/Clock","options":{"time":false}},{"path":"ui/Zoom","conditions":"media:{(min-width:35em)}"}]'> ... </div>