Porsche Design System

Canvas 🧪

The p-canvas is an experimental layout component for productive web applications.

The canvas component provides a CSS utility class which comes with a basic 12 columns CSS grid and CSS container-type. The utility class can be used in default or footer slot to align its content.

.-p-canvas-grid // experimental, might be removed in a future release

The canvas component has some values which can be overwritten by CSS Variables.

--p-canvas-sidebar-start-width: 220px;
--p-canvas-sidebar-end-width: 180px;

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-canvas>
  <a slot="title" href="#">App Name</a>

  <p-button
    slot="header-end"
    icon="configurate"
    variant="ghost"
    compact="true"
    hide-label="true"
    onclick="document.querySelector('p-canvas').sidebarEndOpen = true;"
    >Open sidebar
  </p-button>

  <div class="-p-canvas-grid">
    <p-text class="-col-span-full-1">Content</p-text>

    <div class="tile -col-span-4">Grid span 4x</div>
    <div class="tile -col-span-4">Grid span 4x</div>
    <div class="tile -col-span-4">Grid span 4x</div>

    <div class="tile -col-span-full-1">12 Grid columns</div>
    <div class="tile -col-span-full-2">10 Grid columns</div>
    <div class="tile -col-span-full-3">8 Grid columns</div>
  </div>

  <div slot="footer" class="-p-canvas-grid">
    <p-text class="-col-span-full-1">Footer</p-text>
    <div class="tile -col-span-full-1">12 Grid columns</div>
  </div>

  <div slot="sidebar-start">
    <p-text>Sidebar Start</p-text>
  </div>

  <p-heading slot="sidebar-end-header" tag="h2" size="small">
    Sidebar End Header
  </p-heading>

  <div slot="sidebar-end">
    <p-text>Sidebar End</p-text>
  </div>
</p-canvas>

<style>
  .-col-span-full-1 {
    grid-column: 1 / -1;
  }

  .-col-span-full-2 {
    grid-column: 2 / -2;
  }

  .-col-span-full-3 {
    grid-column: 3 / -3;
  }

  .-col-span-4 {
    grid-column: span 4;
  }

  .tile {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: lightpink;
  }
</style>
<script>
  document.querySelector('p-canvas').addEventListener('sidebarStartUpdate', (e) => {
    e.target.sidebarStartOpen = e.detail.open;
  });
  document.querySelector('p-canvas').addEventListener('sidebarEndDismiss', (e) => {
    e.target.sidebarEndOpen = false;
  });
</script>
</body>
</html>