Grid/Positioning

The framework includes more than 15 different types of content, which we call chunks. Each chunk has a specific use and function. You can find a list of the chunks and how they should be used in the Web Style Guide.

The chunks can be arranged in different layouts using a section grid or chunk positioning. Using a grid is recommended for chunk types like stats, panels, and interactive panels. If you use a grid layout, it will ignore the chunk position (full, left or right) and automatically place the chunks in order in the grid. If you are not using a grid, you can position the chunk full-width, half, thirds, or two-thirds, to the left or right.

A section contains multiple chunks and by default each chunk is full width. You can arrange the chunks in a grid, either in halves or thirds. Each chunk in a grid row will have equal height. There can be multiple rows in a grid.

By default, a chunk is positioned to be the full width, but it can position right, left, or breakout even further left of the main content to draw attention.

If you position a chunk left or right, the size of the chunk can be:

• One Half
• One Third
• Two Thirds

You can wrap text around image chunks by positioning the image right (or left) and then creating a full-width text chunk after.