Visual Style

Grid

Our grid system is composed of 12 flexible columns with a gutter between columns of 30px.


1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

1/12

Grid Examples
One Half

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

One Half

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

One Third

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

One Third

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

One Third

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

One Fourth

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

One Fourth

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

One Fourth

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

One Fourth

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Breakpoints

For optimal user experience, Vishual design user interfaces should adapt layouts for the following breakpoint widths: 576, 768, 992, 1200

  • * Extra Large devices Desktops (≥1200px)
  • * Large devices Desktops (≥992px)
  • * Medium devices Desktops (≥768px)
  • * Small devices Tablets (≥576px)
  • * Extra small devices Phones (<576px)