ε Caption

Structure

Cell: In bars we have repeating objects that are organized into cells. This could be a single element like a graphic, or multiple objects (graphic, with multiple caption rows) that are combined to form the cell. Cells do NOT have visual borders around its contents.

Card: A container similar to a Cell but with a visually defined edge and padding between the edge and its contents. Cards and cells function the same and just carry different padding and visual appearance.

Caption Rows: We divide the cell/cards caption into vertically stackable rows. These rows can then be added/subtracted from the caption area depending on the use case. Inside each caption row we have three columns, the leading, primary, and trailing content collections.

Each of the Caption Rows are further divided into their general purpose (Title, Description, Support) and divided into columns of content, the same as we have in other areas like the App Bar and ListItem. They are as follows:

Leading Style: The left most column in a caption row to contain things like icons, avatars, adaptions, graphics, labels, or even nothing at all. You can learn more here.

Primary: The primary content being displayed within a row, this is usually text copy but not always. You can learn more here.

Trailing Style: The far right column in the caption row used to contain things like actionable or visual icons, buttons, labels or nothing at all. You can learn more here.