Tables

Vertical table

.vertical table

Ordinary vertical table, keys on the left, values or possibly actions on the right.

As almost everything else, these should be wrapped inside `.white-block`.

Key Ordinary text value
With action Lorem Ipsum 
<table class="vertical-table">
	<tbody>
		<tr>
			<th>
				Key
			</th>
			<td colspan="2">
				Ordinary text value
			</td>
		</tr>
		<tr>
			<th>
				With action
			</th>
			<td>
				Lorem Ipsum
			</td>
			<td class="operation">
				<svg class="icon icon-edit" aria-hidden="true"><use xlink:href="/docs/assets/style-guide/icons.svg#edit"></use></svg>
			</td>
		</tr>
	</tbody>
</table>

Dotted list

.dotted-list

Alternative do vertical tables.

As almost everything else, these should be wrapped inside `.white-block`.

  • Left side
    Right side
  • Icons on right side
  • Icons on right side with some random information.
    1 254 products 
<ul class="dotted-list">
	<li>
		<div class="side">Left side</div>
		<div class="side">Right side</div>
	</li>
	<li>
		<div class="side">Icons on right side</div>
		<div class="side">
			<svg class="icon icon-list" aria-hidden="true"><use xlink:href="/docs/assets/style-guide/icons.svg#list"></use></svg>
			<svg class="icon icon-edit" aria-hidden="true"><use xlink:href="/docs/assets/style-guide/icons.svg#edit"></use></svg>
		</div>
	</li>
	<li>
		<div class="side">Icons on right side with some random information.</div>
		<div class="side">
			<span>1 254 products</span>
			<svg class="icon icon-list" aria-hidden="true"><use xlink:href="/docs/assets/style-guide/icons.svg#list"></use></svg>
			<svg class="icon icon-edit" aria-hidden="true"><use xlink:href="/docs/assets/style-guide/icons.svg#edit"></use></svg>
		</div>
	</li>
</ul>