Connector Elements

All block components include settings that place a connecting graphical element at the top and bottom (or both) to connect sectional content and guide the user’s eye.

Options include:

  • Wide centred chevron
  • Left or right sloping slant (top position only)
  • Small centred triangle (top position only)

The fill colour of each element can be set to the primary theme colours.

Depending on what may elements may come before or after, the component (or its adjacencies) may need to have their margin and padding settings adjusted to counter the sense of balance with whitespace and optical illusions.  All components have margin control, and most components have padding control.

If the connectors must sit overtop of images (as in the Image/Video row examples below) they are CSS position: absolute. Otherwise these elements sit within the natural document flow.

Top Chevron Example

PointClickCare Patient-Driven Payment Model white icon

At vero eos et accusamus et iusto


Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus

  1. Fist point
  2. Next point
  3. Third point

Bottom Chevron Example

PointClickCare Patient-Driven Payment Model white icon

At vero eos et accusamus et iusto


Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus

  1. Fist point
  2. Next point
  3. Third point

Slant Left

PointClickCare Patient-Driven Payment Model white icon

At vero eos et accusamus et iusto


Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus

  1. Fist point
  2. Next point
  3. Third point

Slant Right

PointClickCare Patient-Driven Payment Model white icon

At vero eos et accusamus et iusto


Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus

  1. Fist point
  2. Next point
  3. Third point

Triangle

PointClickCare Patient-Driven Payment Model white icon

At vero eos et accusamus et iusto


Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus

  1. Fist point
  2. Next point
  3. Third point