Layout
Responsive UI
You can now build custom banking applications that look consistent and are responsive to desktop, tablet and mobile. Use our bootstrap framework and layout guidelines to get started.
Breakpoints
Fixed containers driven by the device width are used here. Use default Bootstrap breakpoints (XS, S, M, L) along with the container width, unless specified differently for a design. The page background is #EDEDED. The container background is #FFFFFF.
| Device width | Container width |
| (L) 1200px or higher | 1170px |
| (M) 992px to 1199px | auto |
| (S) 768px to 991px | auto (container flush to the edge of the device) |
| Less than 768px | auto (container flush to the edge of the device) |
Grid
Responsive UI follows Bootstrap 3's grid. Refer to the Bootstrap Grid system for details.
Padding
Primary Container / Panel
The primary container should follow the padding guidelines for each breakpoint. To maintain the correct top padding for each column, apply a class name "first" to the top "di-container" in each column. Failure to do so will result in content not aligning at the top of each column.
| Breakpoint | Padding (from the edge of the screen to content) |
| L, M | 30px top and sides, 40px at bottom |
| S, XS | 20px top and sides, 40px at bottom |
L 1200px or higer
M 992 - 1199px
S 768 - 991px
XS Less than 768px
Secondary Container / Panel
The secondary container is used to show additional information. It is placed to the right of the primary container on most pages at the L and M breakpoints. At the S and XS breakpoints, secondary container displays below the primary container.
| Breakpoint | Padding (from the edge the container to content) |
| L, M, S, XS | 20px top and sides, 30px at bottom |
Example
Page layouts
For each of four breakpoints for the Responsive UI (L, M, S and XS); we have common page layouts defined as shown below.
The global navigation has already been defined for each of the breakpoints and need not be a consideration when selecting a page layout. The navigation menu items can be customized.
3-column layout
Primarily used for the homepage for online banking.
L > 1200px
M 992 - 1199px
S 769 - 991px
XS 768 - 320 px
2-column layout
If there are three columns on L, you can either move the widgets from the third columns into the remaining columns, or simply hide those widgets.
Used typically when a page has primary content that needs to be in focus but there is additional contextual information not as important that can be placed in the second column.
L > 1200px
M 992 - 1199px
S 769 - 991px
XS 768 - 320 px
1-column layout
L > 1200px
M 992 - 1199px
S 769 - 991px
XS 768 - 320 px
Page patterns
Here are some examples of how the different page layouts can be used within online banking
Typical application page with a primary submit button shown
The buttons should be typically used if the page is a form.
Typical application page with a primary action shown
The button should be shown if there is only one primary button. Else should be shown on context of the content on the page. At XS, primary button becomes tertiary button and takes the full width of the device.
Step Wizard for complex flows
Layout Templates
Layout templates include four screen sizes L, M, S and XS.