Components
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 |