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>