Client size and document size

Frame mode

The BankID client supports three frame modes which affects its size:

iframe
The client is loaded in an iframe inside a browsing context, normally an iframe embedded directly in the current page of a merchant application. The client makes use of and adapts to the space it is allocated.
window
The client is loaded in a separate browser tab or window (depending on how the browser is configured). The client makes use of and adapts to the full window size.
redirect
The browsing context is redirected to a centrally hosted BankID-branded landing page with the client embedded as an iframe. The iframe is resizeable and the client behaves as that for iframe (above). See an example.

Document display mode

When presenting documents to be signed, the BankID client supports three document display modes. The display mode affects how much space that is available for the document.

interior
The document is displayed inside the client, still displaying the clients header and footer UI elements.
Examples:
overlay
The document to be signed is displayed full-screen overlaid on the initial client dialog. This mode gives more space to present the document.
Examples:
window
The document to be signed is displayed in a separate reader window. Note that the design and layout of this mode is otherwise the same as for overlay.

Combinations of frame and document display mode

Figure: the possible combinations of frame and display modes.

The BankID client runs in an iframe on the merchant website (or app) and will use and adapt to the space it is allocated.

We recommend that the merchant provides the user with an experience adapted to the screensize of the device.

	Recommended¹²	Minimum¹
¹ All sizes are in pixels. ² Recommended size or bigger. ³ For mobile devices it is recommended that the client makes use of all available space.
Mobile portrait	Grant all viewport space³	320 × 150
Mobile landscape	Grant all viewport space³
Desktop / tablet	396 × 280
3D-secure	370 × 204

Responsive behavior

Width

When the client width is below 396 pixels we apply measures to maintain horizontal space.

Text "Menu" on menu-button is removed
Merchant/Personname gets truncated when necessary.
Inputfield and next button scales from 350 pixels down to available width.

Height

When the client height is 250 pixels (or lower) we apply measures to maintain vertical space.

Header, input and next-button, footer, menu and tables in popover is reduced from 40 to 35px height.
Borders on buttons in header and footer is removed, but visible on hover and active-states.
Text size on header, title, certificate helptext and Merchant/Personname is reduced (se font-size table).

Animation

The client makes use of subtle animations adding to the user experience by indicating progress or origin of messages. Animations are CSS3-based and graceful degradation applies.

When the user has completed input and clicks next, the arrow will be replaced with a spinner indicating that the client is waiting for a reply (from COI).

If the response is positive the current content slides to the left and fades out. At the same time new content fades in and slides from right to center. Note that this feature is not accessible in the UDD Viewer.

If the response is negative an error message fades in and shakes slightly over the input field where the error occured.

Dialog

When the user clicks help, views long passwords, or switches BankID device, a dialog slides in from bottom to center and fades in. When a dialog is closed it fades out.

Popovers

Popovers for certificates, history (last used/last attempt), broadcast messages, and warning/error messages, slides in over the button while fading in. The same animation applies to the menu popover except it slides in from the top placing itself under the menu button. When a popover is closed it fades out.

Info pages

Info pages for certificates and broadcast messages slides in from the bottom, placing itself on top of the current screen, while fading in. When an info page is closed it fades out (revealing the previous screen). Note that this feature is not accessible in the UDD Viewer.

Colors

	#000000 Screen title, Menu text, popover-text, introduction and copy.
	#55555 Icons, logo, help-text, window-title, popover-title, certificate-name.
	#BBBBBB Borders and dividers in the client
	#EEEEEE Header background on popovers and dialog.
	#FBFBFB Client background
	#0078BD Screen icons, next-button, links. BankID profile-blue
	#BADBEB 2px underline on links
	#E9F1F4 Backgroundcolor, active in a list and menu.
	#FFFFFF Backgroundcolor in a list, menu and dialog.

Icons

	User-ID
	One-time code
	Personal password
	Next
	Select in list
	Back
	BankID on Mobile
	PDF
	Info (Broadcast)
	Certificate
	Last used
	Last attempted used
	Close popover, dialog and big window
	Dialog indicator
	Menu
	Invalid password
	Valid password
	Typing password
	Zoom
	Read more
	Important error

Fontsizes

18/16 px	* Header og screen title
16 px Bold	Copy introduction
16 px	Copy
14 px	Links
14 px	Help-text in dialog
14/13 px	* Merchant- and User/Employee-name
12 px	Helptitle Merchant- and User/Employee-certificates
* Regular/minimode fontsize.

Other

5 px	Minimum inner margin
3 px	Corner radius
55 px	Next button width
40/35 px	* Height of input, next-button, menu items and rows in a table
30 px	Dialog and popover header height
* Regular/minimode heights.