area

Defines an area. An area is a series of ref-group elements in any order.

Syntax
<area
    name="NCName"
  >
  ANY-FOREIGN-ELEMENT*
  <options>...</ct:options>*
  <ref-group/>*
  <allow-content-types>...</allow-content-types>?
</area>
Examples
  • This example shows an area element. Note the use of the ct:options element to associate alternative CSS settings with the area. The options are displayed in Content Studio, enabling editorial staff to select different area layouts.

    <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>
  • This example shows an area containing two groups.

    <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>
Attributes
name="NCName"

The name of the area element.