Silver School of Social Work, New York University Skip to Content Skip to Search Skip to Navigation Skip to Sub Navigation

Box

Description

Using the Box component standardizes the HTML output of components and gives the author much needed flexibility when authoring content. The box standardizes component headers, footers, styles and offers special formatting. It is used in two different ways:

As a component template

Some components use Box as a template by default. For example, the Text Box and Image component uses the box to standardize the way text is placed on the page. This way, the user experience is standardized for the authors and the code is standardized for the developers. Developers can base new templates on Box and reuse its code.

As a container for multiple components

When dropped on a page, the Box component acts as a container for other components (it has it’s own parsys system). This is useful for grouping related content under one header. For example, if a list, an image, a chart and a paragraph contain related information, the author can group those together in a Box, give it a title and a footer to click for more information. An added advantage is that that Box can now be referenced as a whole via the Reference component.

Parameters Input By Author

  • Title
    • Header
    • Header Size
    • Style Override (e.g. padding:0)
  • Footer (open text)
  • Box Admin
    • Box Style
    • Parent
    • Box Class
    • Box ID
    • Box Name
    • Box Body Style
    • Box Pre

Usage

  1. Drag the Box component onto the page.
  2. Enter Title, Size, and optionally Style Override.
  3. In the Footer tab, enter footer content.
  4. In the Box Admin tab, enter Design, Class, Style, ID, Name, and Body Style (all optional). 
  5. Click on OK.
  6. Drag components into the box if desired.

Note

OPTIONS (Box Admin)

Styles: Different styles can be applied to each box. Currently only the “Deck” style is available, but more can be added with ease.

Parent: Boxes can contain other boxes (called nesting), checking this option will tell the code to close the parent box after the child box. This allows styling to be preserved.

Box CSS and Class, Box Body Style: To provide extra flexibility when needed, these options allow for direct input of css styles and classes to the box. For example, if extra margins are needed around a box, or if no padding is needed in the body area of the box, the author or developers can include that code without involving a code push.

Box Name and ID: Allows an author to set these HTML name and ids explicitly. If a name is specified, an a tag with the corresponding name is placed above the box. Names must be used in conjunction with the Page Links component.

NOTE: NO SPACES SHOULD BE USED IN EITHER FIELD. There is currently no validation for this.

Screen Shots

Configuration dialog

 

Results