Introducing Cavas Grid Components and Tab Focus Direction

Introducing Cavas Grid Components and Tab Focus Direction

Hello Enterprise Support Community,

Canvas layouts can provide exciting and responsive templates, however we understand how frustrating it can be to align elements like test boxes to prevent overlaps, fix negative space or making sure that the desired data stands out.

Canvas' grids are here to help!

Grids are containers that will help contain and organize your data and other elements. The grid containers include sections, tabs, flexes, tables and textboxes. These grids are sets of uniform cells that are measuring guides to place your data correctly.


  • Grid components will help position image, data, and other elements with any hassle.
  • Gutter spacing helps provide balance visually between elements added to the grid
  • The breakpoint width can make the design responsive.
    • With the breakpoint width enabled for the entire grid, the entire template will be responsive to various screen sizes.
    • You can add grids within a grid to set nested breakpoints
    • Use breakpoints to emphasize key data and make is accessible on any screen size.
Here is how a responsive template will look and respond.


NotesAlert
Grids allow you to simplify the design process and helps you deliver a clean yet adaptive user interface for your users.

Tab Focus Direction

When filling out a record with multiple fields a user can use the Tab key to navigate through each field. The tab key will move you through the layout in a single order, left to right or top to bottom based on your Browser settings. While this is helpful for filling out forms it can be a pain to go through all fields to reach the important fields.

Because of this we are introducing Tab Focus Direction!

You can apply the direction of top to bottom or left to right regardless of your browser settings for every container or for the entire template. Likewise you can use Shift + Tab to go back to a previous field.


Tab order using the parent component as the focus



Each section has a different Tab Focus



Alert
This feature is set to roll out in the next couple of weeks. If you would like early access please reach out to your enterprise support email and we can enable it for you.