Cards, Panels, & Dialogs

Use a card to display content and actions on a single topic. Cards should be easy to scan for relevant and actionable information. Elements like text and images should be placed on cards in a way that clearly indicates hierarchy.

Basic

Although the examples show only text, cards may include any type of content.

With Action

If a card contains a call to action, it can be located in the top right corner.

Collapsible/Accordion

When vertical space is limited, consider giving users the option to collapse cards so that just the heading is shown.

Collapsible/Accordion No Indent

Normally, the content of a collapsible card indents to align with the left side of the heading. You can remove this if space is at a minimum or you need to center the content.

Layout and Behavior

Card Layout
Cards should have 20px of space between cards. They can span the full width of the content area or be stacked into grids of equal or differing widths, depending on the content and hierarchy of the page.

Card Behavior on Mobile Devices (viewport less than 710px wide)

Cards should expand to 100% of the viewport width, and maintain their 20px margin between the card edge and the content within.

Side Panels

Side panels are container elements that are pinned to either the left or right side of the viewport, butted underneath the Achieve Course Header or Activity Header, and extending all the way down to the bottom of the viewport. The width can either be fixed or adjustable, depending on the use case.

Panels on the left side of the screen are generally reserved for navigation elements, such as e-book TOCs and the Achieve Side Menu.

Panels on the right side are used for content and controls that supplement or support the main task of a screen.

Examples of right side panels (TK find examples here):

• Hint panel in Assessment
• Drafting Tools and Writer's Help in Writing
• E-book in LC and LCRP

Expansion Panels

Expansion Panels (also known as accordions) allow the design to hide useful but not immediately necessary information until the user chooses to display it, simplifying the display and reducing cognitive overload by applying the principle of progressive disclosure.

The content contained within an accordion can be any kind of element, including text , images, and cards.

Dialogs

Dialogs focus the user on a specific task without taking them away from the current page.

Basic dialogs are ideal for confirmation by providing the user a clear set of choices.

Dialog with Title

Adding a title to a dialog can help users quickly understand the intention of the message. Just remember that might be the only part they read.

Dialog with Overflow

Dialog Backgrounds

Dialog backgrounds should be dimmed at 50% black.

/* prose tokens - 🚧 WIP */
:root {
  --prs-dialog-backdrop: rgb(0 0 0 / .5);
}

/* css example */
.dialog-backdrop { background-color: var(--prose-dialog-backdrop); }

Dialog Layout and Behavior

Dialogs can be any size, from a minimum of 280px wide up to 90% of the viewport width.

• Do
  Convey urgent information to users that they must understand before moving forward in their task. - Convey information that doesn't require a specific choice. - Use for information that is longer than would be appropriate to provide in a notification.

• Don't
  Use a Dialog when it is not essential that users read or respond to the information before continuing their task. If this friction is not necessary, use an Alert or Notification instead. - Use a Dialog to notify users of a change in state. Use an Alert or Notification instead. - Use a Dialog if the content in the card requires scrolling. Use a new full page screen instead.

Dialog Accessibility

Keyboard focus

• When the dialog displays, move keyboard focus to the first focusable item in the dialog. In CDL dialogs this is almost always the close icon in the top right corner.
• When there are additional focusable elements, tab through them in DOM order. This will typically move from Close icon to Primary action to Secondary action
• Restrict keyboard focus changes to within the dialog until it is closed. (Only tab within the dialog until it's closed.)
• Allow for closing the dialog with the Escape key, follow the same closing procedure as if a user chose a Cancel button
• When the dialog closes, set keyboard focus on the element that was used to open the dialog.

Color Contrast

For an accessible contrast ratio, the close X button should be dark gray: #686868. This is true for all variations of the dialog that include a close icon.