Organization

Panels and Cards are the two most common ways designers and engineers can group content within Sage.


Organizing within Sage

Within Sage, we aim to keep our content organized well while avoiding additional unsemantic markup. It is always preferable to use simple structures over complex ones and to use HTML tags as they are intended. When it comes to organizing markup such as div and the section tags, in particular, care should be taken to use each in its intended context. When in doubt, div is the preferred default organizer in order to avoid confuscating organization with the additional semantics and outlining features of the section tags.

Our grid setup and containers provide a baseline for sizing elements and displaying them in particular arrangements beside each other. But when it comes to visual effects that enhance grouping we have two core categories of grouping devices: Panels and Cards.

Panel

This is a basic panel filling the space available within this page's grid setup.

Card

This is a basic card filling the space available inside this panel.

Panels

Panels may be placed on the Stage and present a group of content within a raised white background with rounded corners.

Panels are very versatile with a number of inner elements useful for arranging content as desired. These are explained in full detail on the Panel Component page.

Cards

Cards are smaller sets of content placed within Panels that have a solid border, rounded corner treatment, and certain internal spacing rules.

Implementation of Cards are almost infinite, but formally codified configurations are found under Components such as Upload Cards, Data Cards, and Expandable Cards. For other one-off implementations, the Card Component can be used (assumedly within a panel).