Page Comparison

<div class="my-composite-panel">
    <div class="subpanel-1-container"></div>
    <div class="subpanel-12-container"></div>
</div>

preference1: {
    "type": "fluid.prefs.preference1",
    "panel": {
        "type": "fluid.prefs.panel.subpanel1",
        // Reference to the selector defined in the composite panel template for subpanel1
        "container": ".subpanel-1-container",
        "template": "%prefix/subpanel1.html",
        "message": "%prefix/subpanel1.json"
    }
},
preference2: {
    "type": "fluid.prefs.preference2",
    "panel": {
        "type": "fluid.prefs.panel.subpanel2",
        // Reference to the selector defined in the composite panel template for this subpanel2
        "container": ".subpanel-2-container",
        "template": "%prefix/subpanel2.html",
        "message": "%prefix/subpanel2.json"
    }
},
groups: {
    composite1: {
        "container": ".my-composite-1",
        "template": "%prefix/composite1.html",
        "message": "%prefix/composite1.json",
        "type": "fluid.prefs.panel.composite1",
        "panels": ["preference1", "preference2"]
    }
}