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}'
}
},
}
}
})