Every Box components and even the whole main page dimension may be resized with the styling attributes:

• width
• and height.

The width attributes supports the following values:

• length - a length (in pixel, percentage, or other length unit)
• fit-content - the width of the text.

Example: a note will take all the space by default, if you want to constraint the box to a lower size, apply the width attributes.

<note warning width="200px" align="center">
=== A constrained warning note ===
I'm a note being constraint in a box with a maximum width of 200 pixels.
</note>

If you want to constraint a whole page, you can use a container

<container width="700px">
====== Page title ======
A page that is centered and constraint in width
===== Section =====
Lorem ipsum
</container>

The height attribute is also a style shortcut that will apply a maximum weight.

Example: a note will take all the space by default, if you want to constraint the box to a lower size, apply the width attributes.

<note important width="200px" height="100px" align="center">
=== A constrained note in height ===
I'm a note being constraint in a box with a maximum height of 100 pixel.
</note>