Built in curves
The following custom blocks have built in curves: blue image block, sepia image block, four image grid, and carousel, image-color-split. You can view these on the custom blocks page
On the given block, check “use top curve”, “use bottom curve” or both. Curves are green, to improve visibility. Here is an example with green curves for visibility, followed be an example with cream curves so you can see how it’d actually be used
Using the curve block
The easiest way to use the curves block is to use the “Curve Template- Curves within main content” pattern.
By default, the pattern consists of a group, top and bottom curves, and a heading. You can set the background color of the section by changing the background color of the group block. You can the swap the default heading block out for any other content you’d like
Both the top and bottom curve have the “overlap current group” setting checked to prevent the curves from overlapping the text
This is the same layout with “overlap current group” unchecked on the top curve block, to demonstrate what that setting does
This is the same layout with “overlap current group” unchecked on the top curve block, to demonstrate what that setting does
Sometimes you will want to use the curve’s overlap feature.
Here the overlap is used to shape the image.
A purple curve is used to make this functionality more visible.
Here is an example with purple curves for visibility, followed by an example with cream curves so you can see how it’d actually be used
When using this feature, make sure to remove all margin from the group you want to overlap