Components
Used to contain elements to a fixed width as the browser width grows.
| Variant | CSS Class Modifier | Description |
|---|---|---|
| Extra small container | is-size-xs | 608px max width |
| Small container | is-size-s | 784px max width |
| Medium container | is-size-m (default) | 1040px max width |
| Large container | is-size-l | 1568px max width |
| Container with no padding | has-space-none | 0 inline padding |
| Left align container | is-align-start | Aligns container to the left |
| Right align container | is-align-end | Aligns container to the right |
Always aim to make your pages easy to interpret and adjust the size of your containers accordingly. If you’re having a hard time designing a small interface in a large content area, use a smaller container. If you have many charts and graphs that would benefit from a larger content area, try the next size up. Always experiment with the tools available and look at how other Foundry applications utilize the container component.
The medium container is the default container and will most likely be the most common container within your application.
The large container is used whenever the content of your page contains many charts or graphs, or large tables that require the extra space to increase legibility.
If your content area isn’t very high density, then is the container to use. For example, if the page you are working on only contains 1 form used to edit profile info, then having a unnecessary wide content area will decrease legibility and decrease the user experience. Here is an example of a page that benefits greatly from using a smaller content area. The page you are looking at is also using an extra small container.
This container is useful whenever your content contains a lot of text and requires a smaller container, but the extra small container is too small.