gabrielCAM®

Divider Demo Page

The purpose of dividers is to transition from one section background colour to the next background colour. This page showcases the various dividers available in the project. Each section transitions from black to white or vice-versa.

  • Showcase Divider One
  • Showcase Divider Two
  • Showcase Divider Three
  • Showcase Divider Four
  • Showcase Divider Down Arrow
  • Showcase Divider Layered Wave
  • Showcase Divider Layered Tilt
  • Showcase Divider Layered Triangle
  • Showcase Divider Layered Scattered Waves
  • Showcase Divider Layered Waves
  • Showcase Divider Five (Sandwich Effect)

Scroll down to see the transitions between sections using the different divider components.

Section Two - Divider One Used Above

The divider above is DividerOne. It creates a layered wave effect.

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.

Section Three - Divider Two Used Above

The divider above is DividerTwo. It features a smoother, single-layered wave.

Continuing the demo with DividerThree coming up next. These transitions help break up the page and add visual interest.

  • First item in a black section
  • Second item in a black section
  • Third item in a black section

Section Four - Divider Three Used Above

The divider above is DividerThree. It creates a multi-layered peak effect.

Demonstrating DividerFour below. This section uses the theme-light class to ensure text colours and backgrounds are correctly applied.

Section Five - Divider Four Used Above

The divider above is DividerFour. It's a simple, elegant curve.

Showing the DividerDownArrow next. This is often used to encourage scrolling and direct the user's eye downward.

Section Six - Divider Down Arrow Used Above

The divider above is DividerDownArrow. It's a sharp, geometric arrow pointing down.

Finally, we have the DividerLayeredWave which allows for an intermediate transition colour.

Section Seven - Divider Layered Wave Used Above

The divider above is DividerLayeredWave. It allows for an intermediate transition colour.

Next up is DividerLayeredTilt, which provides a sharper, more geometric transition betweenSections.

Section Eight - Divider Layered Tilt Used Above

The divider above is DividerLayeredTilt. It creates a modern, skewed transition with layered opacities.

The final divider in this demo is DividerLayeredTriangle, which provides a sharp geometric peak transition.

Section Nine - Divider Layered Triangle Used Above

The divider above is DividerLayeredTriangle. It features a sharp peak with layered shades of your primary colour.

Next we have DividerLayeredScatteredWaves, which creates a complex, organic layered wave transition.

Section Ten - Divider Layered Scattered Waves Used Above

The divider above is DividerLayeredScatteredWaves. It creates a multi-layered transition using secondary colours.

Finally, we have DividerLayeredWaves, which is a simpler rhythmic wave pattern.

Section Eleven - Divider Layered Waves Used Above

The divider above is DividerLayeredWaves. It's a simple rhythmic wave pattern.

Next, we'll demonstrate a "sandwich" effect using DividerFive. By using the same swooping divider both above and below a section, we can create a unique, encased container for content.

Section Twelve - Encased in Swoops

The sections above and below use DividerFive to create a container-like effect. This organic "sandwich" effect helps specific content blocks stand out from the rest of the page layout.

Because DividerFive is a single-layered swooping shape, it works perfectly when mirrored or repeated to frame content.

End of Demo

All dividers have been demonstrated, including the new "sandwich" technique using DividerFive. This layout showcases how they can be used to seamlessly transition between different coloured sections.