---
{
  title: 'Patterns',
  description: 'Common UI patterns assembled from NVIDIA Elements components: dashboards, navigation, search, panels, and other building blocks.',
  layout: 'docs.11ty.js'
}
---

<style>
  a:has(nve-card) {
    text-decoration: none;
    
    nve-card {
      cursor: pointer;
    }
  }
</style>

# {{ title }}

Patterns are an essential component of creating a cohesive and consistent user experience. Patterns are pre-defined combinations of existing components that teams reuse across different parts of the platform to streamline development and ensure consistency in the UI. By grouping components into patterns, teams can create a more organized and maintainable UI, as well as provide a unified look and feel for all users.

<section class="pattern-links" nve-layout="grid gap:md span-items:12 &md|span-items:6 &xl|span-items:4 pad-top:lg">
  <a href="docs/patterns/authentication/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="lock"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Authentication</h2>
          <p nve-text="body sm muted">Login, authentication, and verification patterns.</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/browse/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="browser"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Browse</h2>
          <p nve-text="body sm muted">Browse collections or lists of content</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/editor/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="carets-closed-square"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Editor</h2>
          <p nve-text="body sm muted">Code and Content Editing Patterns</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/dashboard/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="rectangle-group"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Dashboard</h2>
          <p nve-text="body sm muted">Common dashboard layouts and patterns.</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/empty-states/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="question-mark-circle-stroke"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Empty States</h2>
          <p nve-text="body sm muted">Patterns and messaging for unavailable or missing data</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/heatmap/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="table"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Heatmap</h2>
          <p nve-text="body sm muted">Heatmap patterns and implementation examples</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/keyboard-shortcut/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="keyboard"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Keyboard Shortcuts</h2>
          <p nve-text="body sm muted">Common keyboard shortcut patterns</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/logging/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="terminal"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Logging</h2>
          <p nve-text="body sm muted">Common logging and timeline lists</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/media/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="video-camera"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Media</h2>
          <p nve-text="body sm muted">Media content patterns and layouts</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/navigation/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="map"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Navigation</h2>
          <p nve-text="body sm muted">Common navigation patterns and structure</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/onboarding/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="shapes"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Onboarding</h2>
          <p nve-text="body sm muted">Guided UX steps and processes</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/panel/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="dock-side"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Panel</h2>
          <p nve-text="body sm muted">In view context details and actions</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/responsive/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="transparent-box"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Responsive</h2>
          <p nve-text="body sm muted">Adaptive overflow with container queries</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/search/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="search"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Search</h2>
          <p nve-text="body sm muted">Search and progressive filtering</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/subheader/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:xs align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="heading"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Subheader</h2>
          <p nve-text="body sm muted">Common subheader navigation and actions</p>
        </div>
      </div>
    </nve-card>
  </a>
  <a href="docs/patterns/trend/">
    <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
          <nve-icon name="trend-up"></nve-icon>
        </nve-logo>
        <div nve-layout="column pad:xs gap:xs">
          <h2 nve-text="label medium">Trend</h2>
          <p nve-text="body sm muted">Simple data trend representations</p>
        </div>
      </div>
    </nve-card>
  </a>
</section>
