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
sub-header
Header
All services disabled
Complete
Interactive
class="icon-lock-closed"
aria-hidden="true"
aria-label="Secure [OR] unsecure"
>
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
class="grid-box"
style="--grid-gap:2rem; --grid-item-size:18rem; --grid-item-size-small-screens:16rem;"
>
sub-header
Header
All services disabled
Interactive
class="icon-lock-closed"
aria-hidden="true"
aria-label="Secure [OR] unsecure"
>
class="icon-shield-check"
aria-hidden="true"
aria-label="Safe [OR] unsafe"
>
sub-header
Header
All services disabled
Interactive
class="icon-lock-closed u-opacity-20"
aria-hidden="true"
aria-label="Secure [OR] unsecure"
>
class="icon-shield-check u-opacity-20"
aria-hidden="true"
aria-label="Safe [OR] unsafe"
>