Organizational Chart
An organizational chart is a special kind of tree component that shows the heirarchy of an organization.
Classes
- lotusTree lotusOrgChart - these two classes go on the outermost ul tag of the nested lists.
- lotusOrgChartTop - goes on the link tag inside the first li tag in the chart
- lotusOrgChartBottom - goes on the last li tag in the list
Basic Implementation
Use a series of nested lists to create the org chart, using the classes as described above.
Variations
There are styles in place to support a div version of this component, but it is recommended to use the list version of the component, which is semantically correct.
Examples
Sample HTML
CSS (tree.css)
Theme CSS (treeTheme.css)
The org chart is the only version of the tree that has been prototyped as part of a design. There is a separate tree component, but we have no examples of it yet.