Wrapping a List of Content Elements

Create a simple Wrapper that can contain multiple content Elements.

Yaml (Sites/Vendor.Site/Configuration/NodeTypes.yaml)

'Vendor:Box':
  superTypes:
    'Neos.Neos:Content': TRUE
  ui:
    group: structure
    label: Box
    icon: icon-columns
    inlineEditable: true
  childNodes:
    column0:
      type: 'Neos.Neos:ContentCollection'

Fusion (Sites/Vendor.Site/Resources/Private/Fusion/NodeTypes.fusion)

prototype(Vendor:Box) < prototype(Neos.Neos:Content) {
        templatePath = 'resource://Vendor.Site/Private/Templates/FusionObjects/Box.html'
        columnContent = Neos.Neos:ContentCollection
        columnContent {
                nodePath = 'column0'
        }
}

Html (Sites/Vendor.Site/Private/Templates/FusionObjects/Box.html)

{namespace fusion=Neos\Fusion\ViewHelpers}

<div class="container box">
        <div class="column">
                <fusion:render path="columnContent" />
        </div>
</div>

Extending it to use an option

You can even simply extend the box to provide a checkbox for different properties.

Yaml (Sites/Vendor.Site/Configuration/NodeTypes.yaml)

'Vendor:Box':
  superTypes:
    'Neos.Neos:Content': TRUE
  ui:
    group: structure
    label: Box
    icon: icon-columns
    inlineEditable: TRUE
    inspector:
      groups:
        display:
          label: Display
          position: 5
  properties:
    collapsed:
      type: boolean
      ui:
        label: Collapsed
        reloadIfChanged: TRUE
        inspector:
          group: display
  childNodes:
    column0:
      type: 'Neos.Neos:ContentCollection'

Fusion (Sites/Vendor.Site/Resources/Private/Fusion/NodeTypes.fusion)

prototype(Vendor:Box) < prototype(Neos.Neos:Content) {
        templatePath = 'resource://Vendor.Site/Private/Templates/FusionObjects/Box.html'
        columnContent = Neos.Neos:ContentCollection
        columnContent {
                nodePath = 'column0'
        }
        collapsed = ${q(node).property('collapsed')}
}

Html (Sites/Vendor.Site/Private/Templates/FusionObjects/Box.html)

{namespace fusion=Neos\Fusion\ViewHelpers}

<f:if condition="{collapsed}">
        <button>open the collapsed box via js</button>
</f:if>
<div class="container box {f:if(condition: collapsed, then: 'collapsed', else: '')}">
        <div class="column">
                <fusion:render path="columnContent" />
        </div>
</div>