Group Box
A group box clusters a set of controls or information: it delineates which items belong together, and separates them from other content. Use the group box header when there is more than one group box within or across pages. Otherwise, the page header should suffice to label the group. To arrange elements within a screen area without using a group box, place them in groups or columns with headings, or separate them with lines or empty space.
Figure 1: Group box with footer
Header
Use the group box header to describe the content in the group box. Do not refer to the user interface (for example, avoid using words such as "Edit Activity" because the user can already see the layout), and use words that are informational (for example, use "Contact Information" instead of "Detail Information").
Footer
The footer is used to display a page number and paging links or icons.
- Page number is centered
- Prev link is not displayed on the first page
- Next link is not displayed on the last page
Dimensions
- Width: 100% of container (standard = 240 pix)
- Must include 11 pix space for scroll bar
- Header and footer height: 20 pix
- Space around and between icons: 1 pix
- Borders: 1 pix (1 pix away from margin)
Colors and Fonts
- Header background: Blue-gray #DCE3EC
- Header font: Bold black #000000
- Content background: White #FFFFFF
- Content font: Regular black #000000
- Borders: Blue #003366
