Skip to main content link. Accesskey S

Components Overview

Pages are made up of components. Use the navigation area on the left to see information about a specific component. The table below contains a summary of the components.

Component name When/where used Status
For a list of general helper classes, see here.
Action bar Above a table/list of data. Contains action buttons and/or view controls. Also might contain the search tab, which allows you to search table data. Stable
Action menu This is a menu that is popped up by another element on the page, like a more actions link. Action menu code is placed in the popups section of the page. Stable
Breadcrumbs Element that shows the user where they are in the navigational hierarchy. If it exists, it sits at the top of the lotusContent column. Stable
Buttons There are 3 types of buttons - action buttons (green), buttons used for forms (blue) and other special occasions, and regular buttons (gray). They exist throughout the UI. Stable
Caption This can sit on top of a list of data that doesn't use paging controls. Stable
Comments We have a comment bubble used to indicate a person's status. We have plain comments that can be used to respond to various content, like a blog posting. And we have comments that are used for discussions. Stable
Customize Palette The customize palette allows you to add/remove content on your page. Beta
Grid A grid view of the data Stable
Summary/Details table Presents a summary and/or details view of the data. Stable
Vertical table Presents information in a vertical table format, with labels to the left and data to the right. Stable
Information Table Used to highlight things like announcements. Usually found at the top of the lotusContent section, and dismissible. Stable
Lists These typically show up in sections in the left and right columns. There is an editable version that allow the user to delete entries from the list.
Dialog This is a popup element and is placed in the popup area of the page, usually along with the lightbox overlay, which will gray out the page below the dialog, when it appears. Stable
Display Controls These are a set of controls that allows the user to toggle how they want to view the data. They sit flush right in an action bar. Stable
Feeds This is a control that links you to an RSS feed and sits at the bottom of the lotusContent column. Stable
Forms These occur as inline elements (that appear when you click on an action link, like edit, or log in). They can also appear in the lotusContent area of the page as stand-alone form. Stable
Header This goes at the top of the lotusContent section, right under breadcrumbs, if they exist. The H1 tag for the page. Stable
Help This is a popup element that goes in the popup section of the page and is launched when the user clicks on a help icon in the UI Stable
Menu This is the third level of navigation and sits at the top of the left column, if it is needed. Stable
Messages These generally sit at the top of the page, under the header, to give the user feedback. Stable
Orgchart A tree control that show where a person fits in his/her organization. Usually sits in the right column of a profiles page. Stable
Paging These components sit at the top and bottom of a table of data to allow the user to page through the data Stable
Person card (vcard) This is a popup component that is coded in the popups section of the page. It is popped up from a person link. (We currently use a hover link to pop up the person card, but this is probably going away. (See the profiles example page) Stable
Search Part of the layout, but an abbreviated version is also found in some sections in the left nav Stable
SearchTab This is a find-in-table search control that is part of an action bar Stable
Section The main containers for data on the page. H2 tags are used for their headers. Stable
Sort This control goes underneath the paging controls and above a table of data. Sort is also integrated into the grid data view as table headers. Stable
Tabs Part of layout (in the title bar) but also used in the lotusContent column to organize data. Stable
Tag cloud An alternate view of tags, which shows the relationship of tags to each other (used in place of the list view of tags) Stable
Tips Tips are information boxes that are used to display inline help and are usually dismissible. Stable
Tree A nested list structure to show the hierarchy of information. Typically used for navigation (as in folder navigation). Stable
Widget This is a container for data. They are typically found on a home page / dashboard / portal. Stable
Banner Part of the layout - the top of the page with application and utility links. Stable
Footer Part of the layout - the bottom of the page with table of links Stable
Legal Part of the layout - the legal code at the very bottom of a page, underneath the footer. Stable
Placebar Part of the layout - sits under the titlebar and helps identify your location. Stable
Title bar Part of layout - contains the global search controls and secondary navigation. Stable

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.