Table — Bar
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--start
or .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.
For interactivity, the JavaScript function targets a class of .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 .Bar__delete
Generic Bar Table
<div class="Bar js-bar">
<div class="Bar__row">
<div class="Bar__group Bar__group--start w-25">
First Column
</div>
<div class="Bar__group Bar__group--mid">
Middle Column
</div>
<div class="Bar__group Bar__group--mid">
Middle Column
</div>
<hr class="m-0 border-c-g200 border-bottom-dashed l-block l-none__l">
<div class="Bar__group Bar__group--end w-25">
<div class="p-3 p-0__l u-ws-nowrap m-left-auto">
<button class="js-drawer-on-click Button Button--dark bg-c-w100 t-c-g500 border-c-g300">Manage
Files</button>
</div>
</div>
</div>
<div class="Bar__drawer p-3">
<p>Hidden content</p>
</div>
</div>
<div class="Bar js-bar">
<div class="Bar__row">
<div class="Bar__group Bar__group--start w-25">
First Column
</div>
<div class="Bar__group Bar__group--mid">
Middle Column
</div>
<div class="Bar__group Bar__group--mid">
</div>
<div class="Bar__group Bar__group--end w-25 l-none l-block__l"></div>
</div>
<div class="Bar__drawer p-3">
<p>Hidden content</p>
</div>
</div>