Browse Patterns
Card Grid
Card grid page layout for browsable collections like infrastructure dashboards, asset catalogs, or media galleries. Use with view-mode toggles for switching between grid and table presentations.
<nve-page>
<nve-page-header slot="header">
<nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
<h2 nve-text="heading" slot="prefix">Infrastructure</h2>
<nve-button selected container="flat">Link 1</nve-button>
<nve-button container="flat">Link 2</nve-button>
<nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
</nve-page-header>
<main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
<nve-search container="flat">
<input type="search" aria-label="search drives" />
</nve-search>
<nve-button-group container="rounded" behavior-select="single" orientation="horizontal">
<nve-icon-button icon-name="view-as-grid" pressed></nve-icon-button>
<nve-icon-button icon-name="table"></nve-icon-button>
<nve-icon-button icon-name="map"></nve-icon-button>
</nve-button-group>
<section nve-layout="grid span-items:3 gap:md">
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="grid span-items:6 gap:xs">
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
<nve-button>•︎•︎•︎•︎•︎•︎</nve-button>
</div>
</nve-card-footer>
</nve-card>
</section>
</main>
</nve-page>
Content Row
Use for browsable content lists with a horizontal card showing thumbnail, title, description, and icon button actions.
<nve-card role="listitem" container="full">
<nve-card-content>
<div nve-layout="grid align:vertical-center align:space-between gap:md">
<div nve-layout="span:4 row gap:md align:vertical-center">
<img
src="https://placehold.co/600x400"
alt="placeholder"
style="max-width: 100px; border-radius: var(--nve-ref-border-radius-sm)"
/>
<div nve-layout="column gap:sm">
<h2 nve-text="label medium">Activity Dashboard</h2>
<p nve-text="body sm muted">Last saved: Oct 19, 21 by Camru</p>
</div>
</div>
<p nve-text="body sm" nve-layout="span:5">
A dashboard displaying current project activity grouped by User, Host or IP
</p>
<div nve-layout="span:3 row gap:sm align:right">
<div nve-layout="row gap:xs">
<nve-icon-button icon-name="eye"></nve-icon-button>
<nve-icon-button icon-name="copy"></nve-icon-button>
<nve-icon-button icon-name="delete"></nve-icon-button>
</div>
<nve-divider orientation="vertical"></nve-divider>
<nve-button>Add Panel</nve-button>
</div>
</div>
</nve-card-content>
</nve-card>
Activity Dashboard
Last saved: Oct 19, 21 by Camru
A dashboard displaying current project activity grouped by User, Host or IP