Container

Container component used for wrapping content in a centralized and manageable way. It centers content horizontally and provides a consistent maximum width and padding across all blocks of app layout.

Props

Prop	Type	Default	Description
`as`	`String`	`div`	HTML tag to be used for the container
`padded`	`Boolean`	`true`	If `true`, container will have horizontal padding

Slots

Slot	Description
`default`	Content to be displayed in the `Container`.

Design Tokens

tokens.config.ts

import { defineTheme } from 'pinceau'

export default defineTheme({
   docux: {
      layout: {
         container: {
            maxWidth: '80rem',
            padding: {
               initial: '{space.4}',
               xs: '{space.4}',
               sm: '{space.6}',
               xl: '{space.8}'
            }
         },
      }
   }
})

Edit this page on GitHub

LayoutDocs LayoutA layout used for Nuxt Content Document-driven mode.LayoutContainer SectionA wrapper around Container, that helps to create consistent and semantic sections of page content streight from markdown.