Menu

Off-canvas

Open fullscreen 
<div>
  <div id="areasOfInterest" class="c-checkbox-group u-flow--m">
    <label class="c-label" data-off-canvas="header">Areas of interest</label>
    <div class="o-grid o-grid--of-three" data-off-canvas="main">
      <div>
        <input type="checkbox" class="c-checkbox" name="areasOfInterest" id="3D structure / imaging" value="3D structure / imaging"     />
        <label for="3D structure / imaging">3D structure / imaging</label>
      </div>
      <div>
        <input type="checkbox" class="c-checkbox" name="areasOfInterest" id="Binding affinity" value="Binding affinity"     />
        <label for="Binding affinity">Binding affinity</label>
      </div>
      <div>
        <input type="checkbox" class="c-checkbox" name="areasOfInterest" id="Binding kinetics" value="Binding kinetics"     />
        <label for="Binding kinetics">Binding kinetics</label>
      </div>
      <div>
        <input type="checkbox" class="c-checkbox" name="areasOfInterest" id="Chemical identification" value="Chemical identification"     />
        <label for="Chemical identification">Chemical identification</label>
      </div>
      <div>
        <input type="checkbox" class="c-checkbox" name="areasOfInterest" id="Contaminant detection and analysis" value="Contaminant detection and analysis"     />
        <label for="Contaminant detection and analysis">Contaminant detection and analysis</label>
      </div>
      <div>
        <input type="checkbox" class="c-checkbox" name="areasOfInterest" id="Crystal structure determination" value="Crystal structure determination"     />
        <label for="Crystal structure determination">Crystal structure determination</label>
      </div>
      <div>
        <input type="checkbox" class="c-checkbox" name="areasOfInterest" id="Elemental analysis" value="Elemental analysis"     />
        <label for="Elemental analysis">Elemental analysis</label>
      </div>
      <div>
        <input type="checkbox" class="c-checkbox" name="areasOfInterest" id="Elemental quantification" value="Elemental quantification"     />
        <label for="Elemental quantification">Elemental quantification</label>
      </div>
      <div>
        <input type="checkbox" class="c-checkbox" name="areasOfInterest" id="Enzyme kinetics" value="Enzyme kinetics"     />
        <label for="Enzyme kinetics">Enzyme kinetics</label>
      </div>
      <div>
        <input type="checkbox" class="c-checkbox" name="areasOfInterest" id="Epitaxy analysis" value="Epitaxy analysis"     />
        <label for="Epitaxy analysis">Epitaxy analysis</label>
      </div>
    </div>
    <button class="mp c-button o-off-canvas__update" data-off-canvas="footer" data-off-canvas-close="true" onclick="return false">Update</button>
  </div>
  <button class="mp c-button c-off-canvas__toggle" data-target="areasOfInterest" aria-controls="areasOfInterest" aria-expanded="false" aria-label="Toggle Areas of interest" onclick="return false">Add areas of interest</button>
</div>
{
  "target": {
    "id": "areasOfInterest",
    "button": {
      "text": "Update"
    }
  },
  "header": "Areas of interest",
  "toggle": {
    "text": "Add areas of interest"
  }
}