NV Elements Catalog Starters Repo System Themes About Getting Started Changelog Metrics Support Accessibility Contributions Requests Migration Deprecations Integrations Installation MCP CLI Lint Angular Bundles Extensions Go Hugo Import Maps Lit NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue Foundations 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 Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Color Combobox Copy Button Datagrid 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 Forms Validation Actions Control Icon Icon Button Input Input Group Logo Menu Month Notification Page Page Header Page Loader Pagination Panel 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 Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Onboarding Panel Responsive Search Subheader Trend Code Codeblock Monaco Input Diff Input Editor Diff Editor Problems Markdown Markdown CSS Utility Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness 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

You can create fluid page layouts through the abstracted CSS flexbox and grid APIs, allowing pages built with nve-layout attributes to automatically grow and shrink with the browser viewport width.

But you can extend the layout system with true responsive capabilities using two different approaches, Container Queries and Viewport Queries.

Installation

The responsive layout modules layer on-top of the core Elements styles package:

Container Queries (& prefix)

Container queries respond to the width of the parent container, making them ideal for component-based responsive design. This approach allows components to adapt regardless of where they're placed on the page.

Learn more about container queries in this Google web.dev article and media queries in MDN documentation.

Breakpoints:

  • xs = 160px
  • sm = 320px
  • md = 480px
  • lg = 640px
  • xl = 800px
  • xxl = 960px

Pros:

  • Component-aware: Elements respond to their actual available space
  • Reusable: Same component works in different contexts (sidebar, main content, etc.)
  • Future-proof: Modern CSS approach for intrinsic web design
  • Broad support: Works in all modern browsers as of summer 2025
  • Flexible: More granular breakpoints (xs: 160px to xxl: 960px)

Cons:

  • Requires wrapper: Parent element needs container-type (automatically applied)
  • Newer technology: Limited support in older browsers
  • Learning curve: Different mental model than traditional responsive design

Learn more about the Container Query based system →

Viewport Queries (@ prefix)

Viewport queries respond to the browser window width, providing traditional responsive design behavior that most developers are familiar with.

Breakpoints:

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

Pros:

  • Familiar: Traditional responsive design approach developers know
  • Global consistency: All elements respond to the same viewport breakpoints
  • Broad support: Works in all modern browsers
  • Page-level control: Ideal for page layout decisions

Cons:

  • Less flexible: Elements can't adapt to their actual container size
  • Context-blind: Same breakpoint triggers regardless of element placement
  • Fewer breakpoints: Standard breakpoints (sm: 576px to xxl: 1440px)

Learn more about Viewport Query based system →

When to Use Which System

Use Container Queries (&) when:

  • Building reusable components
  • Component needs to work in different containers
  • Sidebar widgets, card layouts, form components
  • Component-driven development

Example: <nve-button nve-display="&sm|hide"> - Button hides when its container is wide enough

Use Viewport Queries (@) when:

  • Designing page layouts
  • All instances should respond to viewport
  • Navigation bars, page headers, global layout
  • Traditional responsive design

Example: <nav nve-display="@lg|hide"> - Navigation hides on large screens

Combining Both Systems

You can use both systems together for the most flexibility:

Learn more about combining container and media queries in this Google web.dev video and article.

Supported Features

Both responsive layout systems support conditional styling across defined pixel width breakpoints. Available features include:

  • Gap spacing: Responsive spacing between elements
  • Padding: Responsive internal spacing
  • Flex direction: Switch between row and column layouts
  • Direction reversal: row-reverse and column-reverse options
  • Grid structure: Varying grid column spans and layouts
  • Visibility control: Hide/show elements based on breakpoints

Important Note on Visibility Control

Hiding and showing elements uses the nve-display attribute instead of nve-layout. This separation exists because visibility control affects only the element itself, not the layout of its children. For example:

Layout vs Display Attributes

The responsive system uses two distinct attributes:

  • nve-layout: Controls layout properties that affect how the parent arranges children (gap, padding, flex direction, grid structure)
  • nve-display: Controls visibility of individual elements (hide/show)

This separation exists because hiding an element only affects its own display, not the layout of its children. By using nve-display for visibility control, the system maintains a clear distinction between layout utilities that affect child arrangement and display utilities that affect element visibility.