NV NVIDIA Elements Catalog Starters Repo System Themes Getting Started Getting Started Installation CLI MCP Skills Lint Integrations Getting Started Angular Bundles CDN Custom Elements Eleventy Golang HTMX + Go Hugo Import Maps Lit Lit Library MCP Apps NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue About What’s New Changelog Metrics Support Accessibility Contributions Requests Migration Foundations Overview Typography Iconography Themes Design Tokens Size & Space Objects Interactions Support Status Color Animation Fonts Layers Custom Layout Horizontal Vertical Grid Popovers i18n Visualization View Transitions DESIGN.md Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Codeblock Color Combobox Copy Button Datagrid Getting Started Integrations Column Action Column Alignment Column Fixed Column width Container Card Display Settings Footer Heatmap Keynav Multi Select Pagination Panel Detail Panel Grid Performance Placeholder Row Action Row Groups Row Sort Scroll Height Single Select Stripe Date Datetime Dialog Divider Dot Drawer Dropdown Dropdown Group Dropzone File Format Bytes Format Datetime Format Number Format Relative Time Forms Getting Started Validation Actions Control Gauge Icon Icon Button Input Input Group Logo Markdown Markdown CSS Media Controller Pause Button Playback Rate Select Mute Button Seek Button Time Range Volume Range Full-screen Button Menu Month Monaco Input Diff Input Monaco Editor Diff Editor Problems Notification Page Page Header Page Loader Pagination Progressive Filter Chip Progress Bar Progress Ring Password Preferences Input Pulse Radio Range Resize Handle Search Select Skeleton Sort Button Sparkline Star Rating Steps Switch Tabs Tag Textarea Time Toast Toggletip Toolbar Tooltip Tree Week Patterns Authentication Browse Chat Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Navigation Onboarding Panel Responsive Search Subheader Trend Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness Agent Tooling Agent Ownership Documentation Examples TypeScript Testing Unit Testing Accessibility Testing Lighthouse Testing SSR Testing Visual Testing Troubleshooting Component Creation Internal Examples All Examples
Labs projects are experimental packages available for early feedback.

Responsive Layout - Viewport

By optionally importing the responsive viewport layout module, you extend the nve-layout system using CSS Media Queries for adaptive responsive design based on the browser viewport width rather than the container element's width.

Learn more about media queries in this Mozilla MDN documentation.

The responsive layout API applies conditional styling based on browser viewport width. Supported features include gap, padding, row vs column, reversing flex direction, and varying grid structure across defined pixel width breakpoints.

The following set of viewport breakpoint-values defines:

  • sm = 576px
  • md = 768px
  • lg = 1024px
  • xl = 1280px
  • xxl = 1440px

The at-symbol-based @breakpoint-size|... API adds the breakpoint size before the layout modifier.

Conditional gap sizing example: nve-layout="row @sm|gap:xs @md|gap:md @lg|gap:xxl". The size value after the : corresponds to one of the nine spacing/padding system values.

Viewport-based responsive layout responds to the browser window size, not the container size. Use Container Queries if you need container-aware responsive behavior.

Responsive Gap Sizing

The following media query breakpoints are available for gap, replace ... with one of the 9 gap spacing values:

  • @sm|gap:...
  • @md|gap:...
  • @lg|gap:...
  • @xl|gap:...
  • @xxl|gap:...

Responsive Padding

The following media query breakpoints are available for padding, replace ... with one of the 9 padding values:

  • @sm|pad:...
  • @md|pad:...
  • @lg|pad:...
  • @xl|pad:...
  • @xxl|pad:...

Breakpoints for Switching Flexbox Layout Direction

The following media query breakpoints are available for swapping flex direction:

Horizontally

  • @sm|row
  • @md|row
  • @lg|row
  • @xl|row
  • @xxl|row

Vertically

  • @sm|column
  • @md|column
  • @lg|column
  • @xl|column
  • @xxl|column

Reverse Direction

Also, you can use the following syntax for flipping the flex direction:

  • @...|row-reverse
  • @...|column-reverse

Responsive Grid

You can vary grid structure based on viewport size using the following syntax with nve-layout=grid...:

Or:

Responsive Grid Parent

Responsive Grid Items

Hiding Elements Based on Viewport Size

Since hiding elements only affects the display of the element itself and not the layout of its children, responsive visibility control uses the nve-display attribute.

Element visibility (hiding) uses the separate nve-display attribute rather than nve-layout. This distinction exists because visibility control only affects the element itself, while layout properties affect how the parent arranges children.

The following attributes are available for hiding elements at specific viewport breakpoints and below:

  • nve-display="hide"
  • nve-display="@sm|hide"
  • nve-display="@md|hide"
  • nve-display="@lg|hide"
  • nve-display="@xl|hide"
  • nve-display="@xxl|hide"

You may want to now show elements at smaller viewport widths. The following attributes are available for showing elements at specific viewport breakpoints and below:

  • nve-display="@sm|show"
  • nve-display="@md|show"
  • nve-display="@lg|show"
  • nve-display="@xl|show"
  • nve-display="@xxl|show"

Summary

The viewport query responsive system allows elements to adapt based on the browser window width using the @ prefix. Remember:

  • Layout properties (gap, padding, row/column, grid) use nve-layout
  • Visibility control (hide/show) uses nve-display
  • Viewport queries respond to the entire browser window
  • Breakpoints range from sm (576px) to xxl (1440px)

Example combining both: