Small Medium Large offers the ability to build out pages using a variety of component blocks that fit into each other like Matryoshka Dolls, enabling a seemingly endless variety of layouts. Below are some layout examples to provide insight into the possibilities.

Each layout can be broken down into three levels:

1. L‑component: This is placed inside the page wrapper that is already present on the page template and forms the outer wrapper for each layout section.
   ‍
2. M‑component: Inside an L‑component, you can include as many M‑components as needed to build a layout, each forming a single column. For instance, the variant 4|2|1 means it holds a single column of a quarter width on desktop, half-width on tablet, and full-width on mobile.
   
   For example, you could use two M-components set to 4|2|1 and one set to 2|1|1. This will result in a desktop layout of a single row with two quarter-sized columns and one half-sized column. On a tablet, it will create two rows: the first with two half-sized columns and the second with one full-width column. On mobile, you will have three rows, each with a single full-width column.
   ‍‍
3. S‑components: Inside each M-component, there is a slot for S‑components, which holds all the visual content such as headlines, paragraphs, images, and buttons. These come with properties to change text, text size, and visibility. For headlines, you can also adjust the header levels (h1, h2, h3...).
   
   For more complex layouts, there is the S01 - Section component, which enables you to divide an M‑component with other M‑components. This allows for, for instance, three columns inside a two-column section.

While it can quickly become complex, remembering that M‑components form a single column in your layout will help you get the hang of it quickly.

Only when you are inside Webflow do empty slots appear as boxes with a red dotted line around them.