Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Tabbed containers

Purpose: This document provides usage and guidance on typography, links, headings, images, and more.

Category: Typography, content

Related jiras: UXI-402 - Data cannot be retrieved due to an unexpected error

Process Phase:

  • UXI JIRA Created (insert link above)
  • Component Specification draft complete
  • UXI code review complete
  • Reconcile with UIM and KRAD existing designs
  • Conduct user testing (if needed)
  • Routed for review with Kuali UX Working Group and UX/KRAD Working Group
  • Reviewed with KAI
  • Rice JIRA Created (in KULRICE Project)
  • KRAD Implementation complete
  • Component released (insert rice release version below)

Version: 1.0



Typography makes up a key aspect of using the web or online applications. The content you read, how it's laid out, the contrast between fore and background, clarity between what's a link and what's not - all of this are things to consider when creating content. In short, typography is as important, if not more important, than the actual content.


The standard accordion allows for only one panel to be open at any given time. Opening one panel will shut the others. These are the base for the Rollup style accordion container.

Progressive disclosure

These types of accordion containers allow multiple panels to be open any any given time and often include buttons to "expand all" or "collapse all". A popular example of this would be Gmail's conversation view. This style also works well with nested containers as often found in the Conflict of Interest module in Kuali.


The Rollup style functions like the Standard style and allows only one container to be open at any given time. The difference here is that these typically function in a linear fashion. A good example of this would be a checkout process. The first panel might be an order summary, followed by shipping information, followed by billing information, followed lastly with a confirmation.

The license could not be verified: License Certificate has expired!

  • No labels