Editor Notes

This page has details about editing the unityfoundation.io site — like changing basic page color and adding page sections.

Editors should feel free to add and change content here as needed!

Basic page structure and color

Each page of the site has this basic structure:

  1. An optional Page Header area that may contain special design patterns and layouts like a Hero element.
  2. A colored (blue or green) section that displays the basic page content. Page templates affect the layout of this section.
  3. An optional Page Footer area that may contain additional page sections or other special design patterns and layouts.

The color of the basic page content section is blue by default, but can be changed by doing the following:

  1. In the editor bar, go to Page Settings > Attributes > Basic
  2. Add the Page style class attribute
  3.  Choose either page-blue or page-green

Floated blocks

A floated block allows text to wrap around it. They can float to the left or right. A floated block has a maximum width of 1/3 of the width of area it is placed in. To float a block…

  1. Add the block above the text that will wrap around it.
  2. Click on the block in edit mode and choose the Design & Block Template option.
  3. Click on the gear icon.
  4. For Custom Classes, choose either pull-left or pull-right as desired.

Here's an example of a pull-left floated image:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis magna in nisl mattis eleifend quis in felis. Nam non eros ac diam vestibulum pretium. Fusce erat nisl, viverra sit amet molestie et, consequat vitae mauris. Morbi dapibus tortor a erat mollis, vitae bibendum felis maximus. Ut imperdiet vel nisl vel interdum. Curabitur ultrices ornare auctor. Praesent imperdiet sapien a ligula consectetur eleifend. Integer blandit, risus sit amet pellentesque ultricies, turpis nisl rutrum nisi, ut iaculis est justo a est. Pellentesque ultricies tincidunt nisl quis rutrum. Nullam finibus dignissim lectus, a pharetra ante hendrerit et. Aenean viverra, quam vel rutrum semper, metus quam consequat ex, a suscipit augue libero id mauris.

Video Message Hero

This container is used to display a video accompanied by a prominent text message.

  • The Video area should contain an HTML block with an HTML video element.
  • The Message area should contain a content block with a Heading 2 element.

Here's an example:

We envision a world in which individuals have equitable access to information regardless of socioeconomic status.