Displays tabular information in a bar / card type of layout
The most common usecase for this component is to individually showcase a row of information that typically makes up a larger set of data. Generally, you would use a Bar component over a Table when you need extra functionality or interactivity for a single row item.
The Bar utilizes flexbox for layout. Each column in the Bar is created with a
.Bar__group class. To keep the first and last columns aligned between individual bar components a
.Bar__group--end class plus a width utility is required. A width utility class is not required if the child elements or content within
.Bar__group sets a defined width.
.js-bar at the root of the component. An element with the
.js-drawer-on-click class is used to reveal any information within the
.Bar__drawer element. Additionally, an element with a class of
.js-delete-mode-on-click will reveal a second drawer defined by the class
Generic Bar Table