Components

Container

Constrains content to a comfortable reading width and centres it. This page is inside one.

Sizes

Five widths. Medium is around 48rem, which keeps a line of prose near the 70-character mark that is comfortable to read.

Small · 30rem

Medium · 48rem

Large · 64rem

Extra large · 80rem

Full · no limit

razor

<VetoContainer Size="VetoContainerSize.Small">30rem</VetoContainer>
<VetoContainer Size="VetoContainerSize.Large">64rem</VetoContainer>
<VetoContainer Size="VetoContainerSize.Full">No limit</VetoContainer>

Padding

Horizontal padding keeps content off the viewport edge on small screens. It applies even at Full width, where there is no maximum.

Roomier padding

razor

<VetoContainer Size="VetoContainerSize.Small" Padding="VetoSpacing.Huge">
    Roomier padding
</VetoContainer>

Parameters

Parameter	Type	Default	Description
`Size`	`VetoContainerSize`	`Medium`	Small 30rem, Medium 48rem, Large 64rem, ExtraLarge 80rem, or Full.
`Padding`	`VetoSpacing`	`Large`	Horizontal padding, from the spacing scale.
`Centered`	`bool`	`true`	Whether the container is centred in the space available.