Grid Item
To simplify complex cards, a grid item is used to position elements.
| Class | Type | |
|---|---|---|
grid-item-1
|
Grid Item | A class representing a grid item |
Positions
There are four positions within a grid item:
| Class | Type | |
|---|---|---|
grid-item-1-start-start
|
Top-Left | |
grid-item-1-start-end
|
Top-Right | |
grid-item-1-end-start
|
Bottom-Left | |
grid-item-1-end-end
|
Bottom-Right |
sub-header
Header
All services disabled
Complete
Interactive
<div class="card u-margin-auto">
<div class="grid-item-1">
<div class="grid-item-1-start-start">
<div class="eyebrow-heading-3">sub-header</div>
<h2 class="heading-level-6 u-margin-block-start-4">Header</h2>
<p class="u-flex u-cross-baseline u-gap-4 u-margin-block-start-16">
<span class="icon-exclamation u-color-text-warning" aria-hidden="true"></span>
<span class="u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50">
All services disabled
</span>
</p>
</div>
<div class="grid-item-1-start-end">
<div class="status is-complete">
<span class="status-icon"></span>
<span class="text">Complete</span>
</div>
</div>
<div class="grid-item-1-end-start">
<div class="u-flex u-gap-16 u-flex-wrap">
<div class="tag">
<span class="icon-duplicate" aria-hidden="true"></span>
<span class="text">Interactive</span>
</div>
</div>
</div>
<div class="grid-item-1-end-end">
<ul class="icons u-flex u-gap-8">
<li>
<span
class="icon-lock-closed"
aria-hidden="true"
aria-label="Secure [OR] unsecure"
></span>
</li>
<li>
<span class="icon-shield-check" aria-hidden="true" aria-label="Safe [OR] unsafe"></span>
</li>
</ul>
</div>
</div>
</div>
Multiple Grid Items
Display multiple grid items by using the wrapper class grid-box:
- sub-header
Header
All services disabled
Interactive - sub-header
Header
All services disabled
Interactive
<ul
class="grid-box"
style="--grid-gap:2rem; --grid-item-size:18rem; --grid-item-size-small-screens:16rem;"
>
<li>
<div class="card">
<div class="grid-item-1">
<div class="grid-item-1-start-start">
<div class="eyebrow-heading-3">sub-header</div>
<h2 class="heading-level-6 u-margin-block-start-4">Header</h2>
<p class="u-flex u-cross-baseline u-gap-4 u-margin-block-start-16">
<span class="icon-exclamation u-color-text-warning" aria-hidden="true"></span>
<span class="u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50">
All services disabled
</span>
</p>
</div>
<div class="grid-item-1-end-start">
<div class="u-flex u-gap-16 u-flex-wrap">
<div class="tag">
<span class="icon-duplicate" aria-hidden="true"></span>
<span class="text">Interactive</span>
</div>
</div>
</div>
<div class="grid-item-1-end-end">
<ul class="icons u-flex u-gap-8">
<li>
<span
class="icon-lock-closed"
aria-hidden="true"
aria-label="Secure [OR] unsecure"
></span>
</li>
<li>
<span
class="icon-shield-check"
aria-hidden="true"
aria-label="Safe [OR] unsafe"
></span>
</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="card">
<div class="grid-item-1">
<div class="grid-item-1-start-start">
<div class="eyebrow-heading-3">sub-header</div>
<h2 class="heading-level-6 u-margin-block-start-4">Header</h2>
<p class="u-flex u-cross-baseline u-gap-4 u-margin-block-start-16">
<span class="icon-exclamation u-color-text-warning" aria-hidden="true"></span>
<span class="u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50">
All services disabled
</span>
</p>
</div>
<div class="grid-item-1-start-end">
<div class="status">
<button class="tag" disabled><span class="text">Disabled</span></button>
</div>
</div>
<div class="grid-item-1-end-start">
<div class="u-flex u-gap-16 u-flex-wrap">
<div class="tag">
<span class="icon-duplicate" aria-hidden="true"></span>
<span class="text">Interactive</span>
</div>
</div>
</div>
<div class="grid-item-1-end-end">
<ul class="icons u-flex u-gap-8">
<li>
<span
class="icon-lock-closed u-opacity-20"
aria-hidden="true"
aria-label="Secure [OR] unsecure"
></span>
</li>
<li>
<span
class="icon-shield-check u-opacity-20"
aria-hidden="true"
aria-label="Safe [OR] unsafe"
></span>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>