Configuring block layout & color

Setting block content container widths

Inset vs full width

For different blocks, you have the option to keep the content inset in the page container (the default), or extend the block to the full width of the browser. This will depend on the block you are using and the layout you are creating with that page.

  • Inset: For blocks and content that should appear in the container grid but not expand across the entire browser. This is the default.
  • Full width: The block selected will extend across the entire width of the browser. This is important for the hero component, and other blocks where you want to add a background color to create a band that extends full width.

How to set a block to full width

This setting can be adjusted per block. 

  1. Select the outermost or “parent” block (some blocks have multiple cards or other nested blocks). 
  2. Select the Align icon in the toolbar that shows above when you select the block.
  3. Select Full Width if you would like your block to extend the full width of the page rather than just inset within the content grid. 
Screenshot of Align option in the block toolbar, showing the option for Full width

Choosing block colors

Some blocks have options for setting the background color. These settings also apply changes to the color of text and cards, to align with accessibility guidelines and school/unit branding standards.

  1. In the page edit view, select the outermost block. Some blocks have other blocks nested within them, so you will want to use features like the list view to confirm the outermost containing block is selected.
  2. In the block settings in the right sidebar, select the Styles tab icon
  3. Select from the color scheme dropdown menus:
    • Component Color Scheme: Background and foreground colors for the overall component.
    • Card Color Scheme: Background and foreground colors for cards. This option is only available for components that contain cards.
  4. Once selected, the block editor preview will update with the color scheme you have selected.
  5. If the block is set to full-width, the background color will extend across the width of the page, creating a band. If it is kept at the default, the background color will be inset, and appear as more of a box of content.