All of the following are global rules for working on any CamCom derived theme.

• It is unnecessary to set backgrounds the majority of the time – blocks are setup to not have backgrounds so they can be used on a blank template to give the card effect, or on a template that has a white background content column built-in.
• Do not give paragraphs background colors – create a group and then add a paragraph to the group, even if it’s just a single line or paragraph block needed.

Group two or more blocks together and give the group a background color – this will trigger the CSS class card to be extended to .wp-block-group.has-background.

The background color will be respected due to the color control classes built-in.

Placing a group block after another group block will add margin to subsequent groups so there’s a 20px gap between groups.

H1 – Used for section titles

H2 – Used for paragraph/text block titles

H3 – Used for sub-headings

H4 – Same size as H3 but with a heavier font weight

Any heading with a background

To set a heading to be a banner heading, with the background & Purista font, simply give it a background colour.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

• Duis aute irure dolor
• In reprehenderit in voluptate
• Velit esse cillum dolore eu fugiat nulla pariatur
• Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
• Lorem ipsum dolor sit amet

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

There are two types of images built into the site. Standard images, on the left, and images with a hover zoom effect, on the right.

To set an image as a hover zoom image, simply give the Rounded style from the block options sidebar.

Rounded images will grow to fill the available height of the parent element. Default images will maintain their natural aspect ratio.

Columns can have a background applied to them, and they will assume the CSS class rule card. Be aware that this will override the card styling of the individual columns, so it can only be used if working with something that fills the column – such as an image.

The media & text block is our “go-to” block and probably the most used block. It works well with product shots.

It is not setup to work with full-width & full-height poster images – use the CamCom Media & Text Promo block or Cover block instead.

Use an H3 heading in the content area and set the size to Large via the Block Options sidebar. The media & text block has a clear background by default.

To add a white background with rounded corners, set the background colour to White.

Note: The media & text block has a max-height of 500px.

The Cover block can be set up in a multitude of ways. It is essentially a card with a background image that can have an overlay applied to adjust the visibility of the overlayed content.

The first Cover has content centered and the background fixed; the block has had its height extended to 900px.

The second Cover has had a 50-50 Columns block added before inserting the content in the left hand column.