Container Component

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: Background images MUST come from the Digital Asset Manager (DAM) in order to appear properly when published. DO NOT upload an image directly to the component. It will not appear when the page is published though it may appear in Author.

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. The full viewport mode can also cause other problems. If you have a rail (right column) on the page, that content can overlap the full width container creating problems visible to users and making selecting content in the editor impossible. If you run into problems, the full-width option may not be a good choice and either that container or the right column should be removed. As always, test your pages at every viewport width between 320px wide and 1200px wide.

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>