Hacktron Design System

PageContainer

The wrapper that sets a page's maximum width and padding.

Page content 
<template>  <PageContainer>    <!-- page content -->  </PageContainer></template>

Props

Name Type Default

Slots

Name Description
defaultThe page's own content.

Guidelines

Do

  • Use it as the outermost wrapper for a page's body content - it centers content at max-w-6xl, the page width set by the Layout pattern.

Don't

  • Don't add your own horizontal padding inside it - that duplicates PageContainer's own px-5 and produces uneven double-padding at the edge.
  • Don't nest one PageContainer inside another - it's the outermost page wrapper, not a repeatable content block.