The Box

<box-n max-width="1000px">... </box-n>

The box component, is literally a box for you to put some content.

It allows you to define a max width, and if you do, its width won't depend on the content width.

max-width : define the max-width of the box.

Examples

In this example, we didn't gave a max-width to the box, so as you can see, the box width is based on its content.

<stack-n gap="1" class="box-red" py="1">
  <box-n>
    <p p="1" class="box-green">My parents width is based on my size</p>
  </box-n>
  <box-n>
    <p p="1" class="box-green">Mine too</p>
  </box-n>
</stack-n>

My parents width is based on my size

Mine too

Here we have 2 box with a max-width defined.

<stack-n gap="1" class="box-red" py="1">
  <box-n max-width="300px">
    <p p="1" class="box-green">My parents width isn't based on my size</p>
  </box-n>
  <box-n max-width="500px">
    <p p="1" class="box-green">Mine either</p>
  </box-n>
</stack-n>

My parents width isn't based on my size

Mine either