Grid Header
Grid header; Behave as flex container in big screens, and grid container in small screens.
Class | Type | |
---|---|---|
grid-header
|
Grid Header Container | Define Grid in small screen |
grid-header-col-1
|
Grid Header column 1 | Define Column 1 in small screen |
grid-header-col-2
|
Grid Header column 2 | Define Column 2 in small screen |
grid-header-col-3
|
Grid Header column 3 | Define Column 3 in small screen |
grid-header-col-4
|
Grid Header column 4 | Define Column 2 in small screen |
Databases
<header class="grid-header">
<h2 class="grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center">Databases</h2>
<div class="u-flex u-gap-16 u-contents-mobile">
<div class="grid-header-col-4 drop-wrapper">
<button class="button is-secondary" type="button">
<span class="icon-view-boards u-opacity-50" aria-hidden="true" aria-label="columns"></span>
<span class="text is-only-desktop">Columns</span>
<span class="inline-tag">4</span>
</button>
</div>
<div class="grid-header-col-3 toggle-button">
<ul class="toggle-button-list">
<li class="toggle-button-item">
<button class="toggle-button-element is-selected" aria-label="List View" type="button">
<span class="icon-view-list" aria-hidden="true"></span>
</button>
</li>
<li class="toggle-button-item">
<button class="toggle-button-element" aria-label="Grid View" type="button">
<span class="icon-view-grid" aria-hidden="true"></span>
</button>
</li>
</ul>
</div>
<button class="grid-header-col-2 button" type="button">
<span class="icon-plus" aria-hidden="true"></span>
<span class="text">Create database</span>
</button>
</div>
</header>