Box Shapes and Configurations

The web components are pretty straight forward. You can find a definition of all the web components in the Components page. However, the boxes can be aligned in a specific configurations based on their display. The size of the boxes is pre-defined based on the display you will choose.

The boxes offer 3 types of displays:

  • Portrait: The box has a vertical orientation. [red-bordered box in the image below]
  • Simple: The box has a small parallelogram shape [green-bordered boxes in the image below]
  • Landscape: The box has a horizontal orientation [blue-bordered boxes in the image below]

There are different configurations to format the boxes:

 

1 Portrait and 4 simple next to each other

 

Shows an example of how boxes can be shaped using settings

  1. Display: Portrait [red box]
  2. Display: Simple [green box]
  3. Display: Simple [green box]
  4. Display: Simple [green box]
  5. Display: Simple [green box]
  6. Display: Landscape [blue box]

In general if you start the section with a portrait and then place 4 simple the one after the other then you will have the format with the red and green boxes.

 

3 portraits in a row

Image showing how 3 boxes with display "portrait" render

The image above shows how 3 boxes with display: portrait would render if they were placed in a section. So the configuration would be:

  1. Display: Portrait
  2. Display: Portrait
  3. Display: Portrait

 

3 simple in a row

Image showing 3 boxes of display: simple in a row

In a similar way we can have 3 boxes of type simple in a row. 

  1. Display: Simple
  2. Display: Simple
  3. Display: Simple

 

Combinations of configurations

Every configuration can be placed in a separate section but you can also place them under one section, given that each unique configuration is correct.