Page Structure

The parts of an app page: the title row, tabs between views, folded lists and panels for pages inside another tool.

Page Title Row

The page heading with an action on the right. They wrap onto two lines when there isn't room.

cmu-page-title

Tabs

Links between views of the same page, such as semesters. Mark the current one with aria-current="page". Use a div with role="navigation", not a nav: the template takes the borders off every link in a nav, including the underline that marks the current tab. To fold a long row, put the rest in a details.cmu-more.cmu-tabs-more at the end, like a folded list: a "2 More" link stays at the end of the first row, and when it opens, the rest wrap onto the next line and the link says Show Fewer. Keep the current tab out of the folded part, so it always shows.

cmu-tabs, cmu-tabs-more

Folded Lists

A <details> whose summary reads as a line of text ending in a template cta that turns red on hover. Closed, the link is the count of what's hidden ("6 More"); open, it says Show Fewer, and the whole list shows. It needs no script. Tabs fold the same way.

cmu-more, cmu-more-link, cmu-more-closed, cmu-more-open

Panels for Framed Pages

For pages inside another tool (body.cmu-framed): plain and left-aligned, since the host already frames them, with the actions at the bottom right.

cmu-panel, cmu-panel-header, cmu-panel-body, cmu-panel-footer