Skip to content

Row Separators

Row Separators

The shapes shown in the sections below are included options in every row that holds content.
These separators are visually pleasing ways to transition between rows and help blend two content sections together.

  • Arrow

  • Curve

  • Big Triangle

  • Triangle Left

  • Cloud

  • Curve Right

  • Half Circle

  • Grass

  • Slime

  • Stamp

  • Tilt Left

  • Pine Tree

  • Round Split

  • Water

  • Wave Slide

Arrow

This separator can be pointed inward facing or outward facing. It can be placed on the top of the row, the bottom of the row, or both. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "arrow" separator is shown at the bottom of this row.

Curve

This separator always points inward. It can be placed on the top of the row, the bottom of the row, or both. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "curve" separator is shown at the bottom of this row.

Big Triangle

This separator always points outward. It can be placed on the top of the row, the bottom of the row, or both. "Big triangle reverse" separator points inward for an opposite effect. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "big triangle" separator is shown at the bottom of this row.

Big Triangle Left

This separator only points outward. It can be placed on the top of the row, the bottom of the row, or both. There is also an option called "big triangle right" for the same effect pointed towards the right side of the row instead of the left. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "big triangle left" separator is shown at the bottom of this row.

Cloud

This separator is only points outward. It can be placed on the top of the row, the bottom of the row, or both. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "cloud" separator is shown at the bottom of this row.

Curve Right

This separator only points outward. It can be placed on the top of the row, the bottom of the row, or both. There is also an option called "curve left" for the same effect pointed towards the left side of the row instead of the right. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "curve right" separator is shown at the bottom of this row.

Half Circle

This separator only points outward when used at the top of a row, and inward when placed at the bottom. It can be placed on the top of the row, the bottom of the row, or both. The background color of the row separator should be set to the color of the row below/above for seamless blending. This separator is ideal for using a circular "image separator" module placed in between rows. The "half circle" separator is shown at the bottom of this row.

Grass

This separator only points inward. It can be placed on the top of the row or at the bottom; however, it is best suited to the bottom of rows since that's how it looks its best. There is also an option called "grass bend" for the same effect on a curve instead of being on a flat horizontal plain. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "grass" separator is shown at the bottom of this row.

Slime

This separator only points inward. It can be placed on the top of the row, the bottom of the row, or both. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "slime" separator is shown at the bottom of this row.

Stamp

This separator only points inward. It can be placed on the top of the row, the bottom of the row, or both. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "stamp" separator is shown at the bottom of this row.

Tilt Left

This separator can be placed on the top of the row, the bottom of the row, or both. There is also an option called "tilt right" for the same effect pointed towards the right side of the row instead of the left. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "tilt left" separator is shown at the bottom of this row.

Pine Tree Bend

This separator only points inward. It can be placed on the top of the row or at the bottom; however, it is best suited to the bottom of rows since that's how it looks its best. There is also an option called "pine tree" for the same effect on a flat horizontal plain instead of being on a curve as seen. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "pine tree bend" separator is shown at the bottom of this row.

Round Split

This separator only points outward. It  can be placed on the top of the row, the bottom of the row, or both. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "round split" separator is shown at the bottom of this row.

Water

This separator can be placed on the top of the row, the bottom of the row, or both. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "water" separator is shown at the bottom of this row.

Wave Slide

This separator can be placed on the top of the row, the bottom of the row, or both. The background color of the row separator should be set to the color of the row below/above for seamless blending. The "wave slide" separator is shown at the bottom of this row.

Scroll To Top