patterns

Layouts

We use specific layout structures, containers, and patterns to group information and create consistent experiences in our products.

Page Layouts Layout Containers Layout Patterns

The following are foundational page layouts. We build on these layouts by adding containers and patterns.

Primary Layout with Navigation

This is the primary layout structure for each product. At minimum, it features the main navigation, the app bar, a page header with a title, and a content area with a title.

An example of a primary layout with navigation from Planning & Self-Study.
View Navigation Component
An example of a horizontal primary navigation from Faculty Success.
  • Use as a landing page of main navigation items
  • Provide users with easy access to the main navigation
  • Containers that can be used within:

    Cards, tables, side panels, flyouts, dialogs, modals, full page panels, and snackbars.

  • Patterns that can be used within:

    Tabs, toolbars, forms.

  • Do not use if navigating to another page would compete with the user’s current task or experience

Immersive Layouts

Immersive layouts are used to dive deeper into a particular product area. By removing the app bar and main navigation, they allow users to be fully focused and absorbed in an experience.

There are two main immersive layout types, one to display extensive details about a specific product area, and the other to collect complex, multi-faceted information from users through multiple tasks and actions. Immersives may or may not have a unique URL.

  • Use to prevent users from navigating away to a different page through the main navigation
  • Use for contained flows with details, multiple tasks, and multiple actions related to one objective
  • Containers that can be used within:

    Cards, tables, side panels, flyouts, dialogs, modals, and snackbars.

  • Patterns that can be used within:

    Tabs, toolbars, forms, steppers.

  • Avoid if users need to access other areas of the system through the main navigation

Dark Immersive

An example of an immersive layout with tabs showing extensive details for a product area.
View Component in Figma (dark immersive layout link opens in new window)
  • Display focused views of information

    These views are launched from primary layouts and should focus the user on specific information or as a launch point to complete tasks.

  • Use as a launching point to other related pages

    Other pages from this view should relate to the main immersive tasks.

  • Break up these views with common patterns

    These views can be broken down further by using tabs, cards, side panels, modals, and flyouts.

  • Use breadcrumbs to indicate hierarchy location

    Dark immersives can go more than one level, but it is not reccomended to go more than two levels.

  • Can use a primary action, but not required

    Primary actions could be “Done” or “Close” to return to the previous screen. Always include a back option next to the title.

  • Not used to complete tasks

    Use light immersives to complete single tasks. Dark immersives can be used to launch light immersives.

Light Immersive

An example of a light immersive layout with a breadcrumb and “save & close” primary action.
View Component in Figma (light immersive layout link opens in new window)
  • Complete focused singular tasks

    These views can be launched from the primary layout or dark immersive layouts.

  • Break up workflow

    Other pages from this view should relate to the main immersive tasks.

  • Use breadcrumbs to indicate hierarchy location

    Breadcrumbs can be used to indicate where this view came from, but is not required.

  • Must use a primary action to complete the task

    Primary actions on the right are required to complete the task and close the view. Also use the close “x”, rather than a back arrow, on the left to close and return to the previous view.

  • Do not navigate to other pages

    These views are to complete singular tasks and do not navigate to other views.

The following are layout containers that present groups of information, tasks, or actions.

Card

Cards are containers of information and guide users to further actions and details by organizing and breaking up content.

They may display information using a combination of text and data visualization, and use buttons and links for additional information and actions. Cards are variable in width and height. Multiple cards may appear in a content area as a stacked list, or side-by-side in a grid layout.

An example of a card with a chart in Planning & Self Study
View Example on CodePen (card link opens in new window)
  • Use to provide a high level overview of information
  • Use to group information on a page or in a dashboard view
  • Use to present list items and related details in separate containers
  • Actions inside cards may trigger other components on a page level

    These actions can open side panels, flyouts, dialogs, modals, full page immersives, and snackbars.

  • Patterns that can be used within:

    Tabs, forms, and steppers.

  • Containers that can be used within:

    Only table containers can be used within cards.

Table

Tables are containers that present large amounts of data with multiple rows and columns. A table may be paired with filtering and sorting, expand/collapse functionality in rows to view and hide information, status labels, and actions related to each listed item.

An example of a table with actions in Planning & Self Study
View Component in Figma (data table link opens in new window) View Example on CodePen (data table link opens in new window)
  • Use for comparing data or displaying lists of information
  • Helps users find relevant information for a specific item
  • Actions inside cards may trigger other components on a page level

    These actions can open side panels, flyouts, dialogs, modals, full page immersives, and snackbars.

  • Patterns that can be used within:

    Toolbars.

  • Do not open additional containers within tables

Side Panel

A side panel is a container that pushes into and lives side-by-side with the main content area so that important information can be seen in one view.

Responsiveness

As the available screen width decreases, a side panel at a fixed width will cover an increasingly larger area while leaving less space available for the content area. We recommend either having the information in the panel below the content area or utilizing a flyout on smaller screens.

An example of a left side panel in Planning & Self Study
View Component in Figma (side panel link opens in new window)
  • Use to show supplementary or helpful information related to items in the content area
  • Use when the user is expected to reference or interact with information in the content area while completing or reviewing a task in the side panel
  • Can open from the right or left

    Open the side panel from the left if it includes navigational actions that affect the main content. Other types of actions within side panels can either be on the left or right depending on what makes sense for your use case.

  • Actions can trigger dialogs, modals, and snackbars
  • Containers that can be used within:

    Only table containers can be used within side panels.

  • Patterns that can be used within:

    Tabs and forms.

  • Avoid if the user does not need to reference information from the main content area

    Consider using flyouts instead to focus the user’s attention.

Flyout

A flyout is a container that slides in from the right and lives on top of a page.

Flyouts can be multiple sizes depending on the content, and become full screen on smaller devices. All flyouts have a close option in the top right, unless they are full width in which case the close option is on the top left. They can have action buttons in the bottom right but it is not required. Always include a title. Subtitles can be above and below the title to help provide more context but are optional.

An example of a medium flyout in Planning & Self Study
View Component in Figma (flyout link opens in new window)
  • Use to provide supplementary information and collect information without navigating away from the context of the underlying page or flow
  • Allows users to complete single tasks without navigating away
  • Always opens from the right
  • Actions can trigger dialogs, modals, and snackbars
  • Containers that can be used within:

    Only table containers can be used within side panels.

  • Patterns that can be used within:

    Forms, breadcrumbs, and pagination.

  • Avoid if there is a lot of content to display in one view

    Consider using white immersive views to provide more information in a full page.

Modal

A modal is a container that appears on top of a page and requires the user to complete a specific task. Modals disable the main page content underneath until the user interacts with the modal by either completing the task or exiting.

An example of a modal.
View Live Component
  • Use to collect or edit information in order to complete a task
  • Use to focus the user focused on a singular, self-contained task
  • Can trigger another modal, but use caution

    The primary action can open an additional modal, but the first modal’s task must be completed and closed first.

  • Can trigger snackbars when action is complete and modal closes
  • Always include a primary action button

    The primary action closes the modal and completes the task.

  • Patterns that can be used within:

    Forms, toolbar, steppers, and pagination.

  • Avoid if there is a lot of content to display in one view

    Consider using a flyout or white immersive view to provide more room for information.

  • Do not trigger other layout containers

    Flyouts and side panels cannot be triggered to open from a modal.

  • Do not use more than one primary action

    If more than one action can be taken, consider breaking up the workflow into individual modals or use another pattern.

Tabs

Tabs are used to divide and organize content into separate page sections.

Responsiveness

Tabs transform into a dropdown when horizontal space becomes less than the width of the tabs.

An example of tabs.
View Live Component
  • Use short labels, usually 1-2 words
  • All tabs should be visible on one row

    If you have too many tabs to fit in one view, consider simplifying or using another pattern.

  • Can be used in most containers and pages:

    Primary pages, immersive layouts, flyouts, and side panels.

  • Do not use as primary navigation

Stepper

Steppers are used to show progress through a sequence of numbered steps.

Steppers can be horizontal or vertical. Transform a horizontal stepper into a vertical one on smaller screens.

An example of a stepper.
View Pattern in Figma (stepper link opens in new window) View Example on CodePen (stepper link opens in new window)
  • Generally keep between 2-5 steps

    There is no set limit to the amount of steps, but it is recommended to use the least amount of steps that make most sense for your use case.

  • Steps are required but can be selected to tab through steps

    Allow users to tab through steps so they can preview content within each step unless the step is dependent on information from the previous step. Trigger error messages if they move past a required step without completing all the required information.

  • Use buttons in addition to the steps being selectable to navigate through the steps

    Include buttons to move forward (and backward if applicable) through steps. These buttons can be above within an immersive header, or below the form. Do whatever makes sense for your use case and layout.

  • Can be used in immersive pages and most containers to break up tasks into steps

    Immersive layouts, flyouts, side panels, and modals.

  • Do not use steppers as tabs

    Steppers should only be used during the completion of a single task. Once the user is complete with the task, use another pattern to display the information.

Breadcrumb

Breadcrumbs display the navigation structure of a site and enable the user to navigate to the previous level in the hierarchy. Use breadcrumbs in any area that the user navigates.

An example of a breadcrumb.

Responsiveness

If the breadcrumb becomes long and has at least three levels listed, you can use an ellipses to collapse the middle hierarchy. Keep the first and current level visible. Selecting the ellipses will expand the breadcrumb to display the entire breadcrumb.

An example of a collapsed breadcrumb.
View Example on CodePen (breadcrumb link opens in new window)
  • Layouts and containers that can use breadcrumbs:

    Primary layouts, Immersive layouts, side panels, and flyouts.

Toolbar

Toolbars offer controls and actions for filtering, searching, editing or reorganizing data inside a page or container.

An example of a filtering toolbar above a table.
  • Most layouts and containers that can use toolbars:

    Primary layouts, Immersive layouts, tables, side panels, modals, and flyouts.

Drag and Drop

Drag and drop features can provide a streamlined experience for users by allowing elements to be selected and dragged to another location.

An example of drag and drop functionality in Planning & Self Study.
View Pattern in Figma (drag and drop link opens in new window)
  • Always include an icon to indicate a container is draggable

    Once the user selects and holds the icon or container, the cursor should change to a grab cursor.

  • Always indicate the area where the container will be placed

    Highlight the area using a different color than the background.

  • The drag area can be limited to either the icon or entire container

    If there are multiple actions within the container being dragged, you may want to limit the click and drag area to just the icon to avoid interfering interactions.

  • Do not use multiple layers of drag and drop elements

    Do have drag and drop areas within other draggable elements. They should be limited to single areas where the same type of element is interacted with.
Back to Top