Panels & Cards
The two most common ways for designers and engineers to 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).