Section

Sections are a main part of our UI. They exist in the left and right columns, and they can exist in the center column to help organize data.

Sections contain a header, a body, and an optional footer. The header can also be omitted for a plain section.

Expandable sections have a twisty to indicate expand/collapse state, but should be expandable and collapsible when you click anywhere on the section header.

For draggable sections, a drag handle shows up on hover over the section title. (The draggable version of this component contains onmouseover and onmouseout handlers for IE 6. However, the CSS is still in place for when we can drop IE 6 support.)

Sections are also used as portlet containers (an abbreviated version of an application that is used on a home page or mashup/portal type of page).

Draggable Section

Plain Section

Scrollable, Mini Portlet

Portlet

Classes

  • lotusSection2 - class assigned to the wrapping HTML5 section container
  • lotusSectionHeader, lotusInner - a double wrapper for the section header
  • lotusSubheader - the wrapping container for a subheader that can exist directly under the header or inside of the section body
  • lotusHeading - a class assigned to the main heading tag (typically an h2)
  • lotusHeading2 - a class assigned to the secondary heading tag (typically an h3)
  • lotusDragHandle - this class is for a drag handle that shows to the left of the section header.
  • lotusArrow, lotusTwistyOpen, lotusTwistyClosed - classes for the twisty arrows
  • lotusIcons - this class allows you to put multiple icons in a header
  • lotusIcon - class assigned to individual image icons in the header
  • lotusActionIcon - class assigned to the icon that pops up an action menu
  • lotusSectionBody - this class goes on a container around the body of the section (minus the header).
  • lotusSectionScroll - class assigned to a div that contains a scrolling arrow (up or down)
  • lotusSubsection - used when you have a subsection within a section. This goes on a div underneath a lotusSubheader.
  • lotusChunk - used for proper vertical spacing of content (leaves space in between adjacent chunks of elements)
  • lotusFirst, lotusLast - used for additional styling conditions (see implementation).
  • lotusSectionFooter - this class goes on an optional div after the lotusSectionBody container, to contain elements like paging controls.
  • lotusSectionPlain, lotusPortlet - additional classes along with the lotusSection class for section variations (see below).

Basic Implementation

Sections make use of html5 section and header elements, but will also work if these are marked up using divs.

Assign the lotusSection2 class to the section tag.

Assign the lotusSectionHeader class to the header tag. Inside of that tag, put a div assigned the class of lotusInner.

If your section will have a twisty arrow, place an a link tag, an image, and alternate text next in the code (see basic sample code in the code tab).

Place the heading tag next, assigned the class lotusHeading. If you aren't using a twisty, also assign the additional class lotusFirst. Use an h2 tag unless your page hierarchy requires a different level of tag. Wrap this in a link tag to make the section header clickable.

If you want an action icon or help icon, place those next (see code example).

If you want a general subheader, use a second heading tag with the class of lotusSubheader that wraps a heading tag with the class of lotusHeading2. If you have used an h2 tag for the main header, use an h3 tag here (or adjust accordingly).

The content, under the header, is wrapped in a div with the class of lotusSectionBody.

Sections can contain subsections. You would first create a lotusSubheading as described 2 steps above, then create a div with the class of lotusSubsection to wrap the content. Assign lotusLast to the last subsection to get rid of extra space at the bottom of the section.

lotusChunk is used on divs to create vertical space when needed.

Variations

If a section is draggable, the general .lotusDraggable class is applied to the lotusSectionHeader tag and a span that contains the drag handle is placed as the first element in the header tag. See the draggable section code sample.

If you don't want a "skin" on your section, you can apply the class lotusSectionPlain as an additional class to the same tag as lotusSection2. The plain section example on this page doesn't use a header, but your plain sections can use a header.

For a portlet, assign lotusPortlet as an additional class to the same tag as lotusSection2. There are two portlet examples on this page - one that typically would sit in the content area, and a mini-version that would typically sit in a sidebar. Portlets have a subtle drop-shadow because they are designed to sit on a non-white background.

Sections are styled differently when in columns.

Accessibility

Sections sometimes need the landmark role of complementary or the document structure role of region. If a section has role="region" it needs to have an aria-labelledby with the value of the id assigned to the heading element (h2 tag). Read the ARIA spec to determine which, if any, role is appropriate. Our examples (here and on the example pages) do not demonstrate these roles because they depend on context, which can vary per product.

If a section is draggable, add the attribute aria-grabbed="false" to the section element. This is also not demonstrated in the code snippets. Here is more information on how to implement ARIA drag and drop.

Only text (wrapped in a link) should be inside the h2 tag. Make sure your page doesn't skip any levels of heading tags and modify the h2 tag to another level (like h3) or use aria-level to indicate the heirarchy.

Put role="button" on the link that wraps the twisty expand/collapse arrow. Add an aria-expanded attribute and set it to true if the section is expanded, false if is is collapsed. Add an aria-controls attribute and set it to the ID of the lotusSectionBody div (this should be unique), which is the part of the section that is visible or hidden depending on the state of the arrow).

For the actions icon, put role="button," aria-haspopup="true," and aria-owns (set to id of the menu it will pop up) on the link surrounding the action icon.

When the state of the section changes, in addition to changing the classes used to display the proper "twisty" icon, change the innerHTML of the twisty's lotusAltText so the correct symbol is displayed in high contrast.

Examples

Sample HTML

Sample HTML - Draggable Section

Sample HTML - Plain Section

Sample HTML - Scrollable, Mini Portlet

Sample HTML - Portlet

CSS (section.css)

Theme CSS (sectionTheme.css)

Sections in the right column were not expandable and collapsible. Sections in the left column and main content area had the option of a twisty to expand and collapse. Now all sections can be expanded/collapsed.

Sections typically looked different depending on what column they were in. Now we have primary and secondary "widgets" which are built the same way and include the section code as a wrapper. (This is separate from our homepage widgets.)

Addition of drag handle on hover for draggable widgets.

May 2010: Removed cursor from header text. Wrap the header text in a link if you want it clickable (which will also trigger the cursor). Changed the draggable section to wrap the header text in a link.

6/11/09: Added high contrast open and closed arrows.

8/31/10: Sections and Widgets are consolidated into a new section component. What were previously widgets are now coded with the additional lotusPortlet class. The plain widget is deprecated and a plain section has taken its place. Accessibility fixes to use lotusHeading and lotusHeading2 classes to style h2 (header) and h3 (subheader) text. Added subheader to the sample. Changed lotusActionMenu class assigned to the action menu icon to lotusActionIcon, because lotusActionMenu is the class used for our action menu component.

January 2011: Updated code to be accessible and added accessibility documentation. Updated to the generation 3 styles. Added location-specific styles (in columns) and portlets are supposed to be on a non-white background.

June 26, 2012: Updated color contrast of the actions menu icon and section twisties to be accessible (large text 3:1 equivalent).