group

Defines a section page group. A group is a series of one or more areas.

Syntax
<group
    name="NCName"
    root="(true|false)"?
  >
  ANY-FOREIGN-ELEMENT*
  <options>...</ct:options>?
  <area>...</area>+
</group>
Examples
  • This example shows a group that defines a simple two-column layout.

    <group name="two-col">
      <area name="left"/>
      <area name="right"/>
    </group>
  • This example shows a root group (a group that is used to define an entire page). Note the use of the ct:options element to associate alternative CSS settings with the group. The options are displayed in Content Studio, enabling editorial staff to select different page layouts.

    <group name="news" root="true">
      <ui:label>News</ui:label>
      <ct:options>
        <ct:field name="news-background-option" type="enumeration">
          <ui:label>Group background</ui:label>
          <ct:enumeration value="white">
            <ui:label>White</ui:label>
          </ct:enumeration>
          <ct:enumeration value="#CCCCCC">
            <ui:label>mourn</ui:label>
          </ct:enumeration>
          <ct:enumeration value="pink">
            <ui:label>Pink</ui:label>
          </ct:enumeration>
        </ct:field>
      </ct:options>
      <area name="header">
        <ui:label>Header</ui:label>
        <ui:description>Content added here will appear on top of page</ui:description>
        <ct:options>
          <ct:field type="enumeration" name="border">
            <ui:label>Style</ui:label>
            <ui:description>Changes the style of the header</ui:description>
            <ct:enumeration value="border: 1px solid black;">
              <ui:label>Border</ui:label>
            </ct:enumeration>
            <ct:enumeration value="border: 5px solid black;">
              <ui:label>Fat Border</ui:label>
            </ct:enumeration>
            <ct:enumeration value="background: #F55;">
              <ui:label>Red Background</ui:label>
            </ct:enumeration>
          </ct:field>
        </ct:options>
      </area>
      <area name="rightcolumn">
        <ui:label>Right Column</ui:label>
        <ui:description>Content placed here will appear in the right column</ui:description>
      </area>
      <area name="center">
        <ui:label>Center Column</ui:label>
        <ui:description>Content placed here will appear in the Center column</ui:description>
        <ref-group name="two-col"/>
        <ref-group name="three-col"/>
      </area>
    </group>
Attributes
name="NCName"

The name of the group element.

root="(true|false)" (optional)

If set to true, then this group can be used as the root group of a section page.