This is an H2 element.
H2 is the biggest header that should be in the page content, since the H1 will always be the page title (which is either the section title for landing pages, or the visible title for all content pages).
The pages are created using "layout blocks" like this one, which consist of "rows" and "cells".
This first layout block uses the "content-container" class on the row, which gives it a white background, some padding, and constrains it to the page's container. This is what's used to achieve the box-overlaying-image effect and should always be the first row of the page.
This is bold text.
This is italic text.
This is an H3 element.
This is good for headings beneath an H2 element, like subheadings.
This is a new layout block.
If you want to have multiple sections that have the same row style, you can simply create one row and then add multiple layout blocks to it. That way you can keep your content organized in the backend while looking like one continuous page on the front end.
Important Page Settings
There are a few page settings worth mentioning:
"Page Template" on the right in a box controls the template. There's "Landing Page", which this page uses. This causes the page title to be the white section title at the top, and removes the breadcrumb/page title from the content area. The "Default Page" template is almost the same, but it has the white section title at the top, and in the content area it has the page title and the breadcrumbs.
"Featured Image" on the right below Page Template allows you to set the featured image for that page, which is used as the top image. This image should be 1920x700, which allows it to be the proper height to create the overlapping effect and width to cover most full-width monitors. If you don't set a background, the header area defaults to a dark grey, which allows the white text to stand out just as much as they would normally. Ideally the important part of the image should be within the center, because the sides will get cut off as screen size shrinks. (On mobile frequently the image will be quite small anyway, but a good rule of thumb is that if the part of the image you want users to see is outside the container on your desktop, it should be resized or changed somehow.)
This is another H2 element.
This element uses the "content-fullwidth" class on the row, and the "container" class on the cell. This causes it to have a full width background, but still keep the content contained in the middle of the page.
There are several options for colors for full-width elements, this one is using green. You simply need to add the "green" class next to "content-fullwidth" on the row.
This layout block is using the "large-text" class, which allows large text to draw attention to information.
This is an H3 element.
This row is using "content-fullwidth" and "white" classes. This gives it a brighter white background than the default gray, as well as making it full width. It also changes the full width white default text color to black for the light background.
This layout block is using the "med-text" class, to give it slightly larger text than the default size, while not as large as the "large-text" class.
This is an H4 element.
This row is using the "content-fullwidth" and "blue" classes, which gives it a blue background.
This layout block doesn't have any special styles applied to it, so this is the normal text size.
The content rows by default add some spacing to separate them (which you can see between the full width sections above this one), but if you want them to run together (because they're multiple solid colors like these) you can change the "Bottom Margin" to 0 on the row.
This is an H4 element.
This row is using the "content-fullwidth" and "brown" classes, which gives it a brown background.
This layout block doesn't have any special styles applied to it, so this is the normal text size.
This is an H2 element.
This is a split row, which uses the "content-container" class on the row, and is split into two with an image, a headline, and some text.
This is an H2 element.
This is a split row, which uses the "content-container" class on the row, and is split into two with an image, a headline, and some text.
This is a sample of a Contributor Card.
The image section of the card (in white) is 350px by 350px. Image logos can be 250px by 150px. In any case, the CSS will always fit the logo within the box, maintaining its aspect ratio and centering it.