Skip to main content

Layout Patterns

Common responsive layout patterns used in VLN products.

Dashboard Layout​

<div className="flex flex-col md:flex-row">
  <Sidebar className="w-full md:w-64" />
  <Main className="flex-1" />
</div>

Card Grid​

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <Card />
  <Card />
  <Card />
</div>

See Breakpoints for more details.