The Container component gives site creators the ability to add <DIV> containers to the page. The container can contain one or more other components but the real power is in added backgrounds, classes, and any CSS-specific styles to the page.

vt container title and options

Use the tool icon to pull up options for the component. The first panel can be used to set title, add CSS classes, set a background image, and invoke a full browser width mode.

Note that in "Full Browser Width" you'll need to select the component in the natural size. To select, click the light blue bar near the middle. If you experience problems, reloading the page may help.

vt container css options

The second panel allows the setting of CSS height, CSS text color, CSS margins shorthand, CSS padding shorthand, CSS background-color,  and custom CSS styling rules which will be added as element-level styling.

Example of HTML generated by the component:

<div class="vtcontainer parbase section">
  <div class="vt-vtcontainer vt-added vtclasses" style="background-image: url(/content/dam/ensemble_cms_vt_edu/autism-angela.jpg); height: 605; color: #f00; margin: 5px; padding: 10px; background-color: #00f; anyproperty: anyvalue;" data-emptytext="Container">
      <div class="vt-vtcontainer-content"> ... </div>