Advanced graphical profile (add-on)

If you want to customise the graphical profile instead of using the basic profile, Signicat helps you setting up the advanced graphical profile. Please, contact us by creating a support ticket in the Signicat Dashboard.

Before you contact Signicat

Please consider how you want to present the adjustable elements described in the following sub-sections. This will speed up the customisation process.

The advanced graphical profile affects the surrounding area (blue area) of the MitID box. It does NOT affect the MitID box itself (white area):

Adjust blue areas with advanced graphical profile

In this example, we have uploaded the Superbank logo to the top left, added a background image for the whole profile, a heading to the right with some welcome texts (help text) and two links to more information.

Advanced graphical profile

Recommendations for images and colours

Logos and background images are hosted by Signicat as web resources:

• Format: There are no limitations as long as you use formats suited to the web format, for example PNG, JPEG, GIF, SVG. PNG is generally recommended over JPEG since it is lossless. File formats are usually written with all-caps in natural language texts (png > PNG).
• Size: Consider the image size to balance the image quality with the time it takes to load. This recommendation is mostly relevant if you want to upload a background image (logos are relatively small anyway, see the next section for logo size). For most purposes, a JPG that is 1000-1200 pixels in width should be sufficient.

You can use all colour formats suited for web, for example RGB, RGBA, HEX.

Ensure you comply with WCAG

Be aware that you must comply with Web Content Accessibility Guidelines (WCAG) regarding contrast between font colours and other elements.

Logo

You can optionally upload your own logo:

• Location: Place it to the left in the header.
• Size: Maximum 150 pixels wide and 40 pixels high.
• Padding: Ensure your logo has enough padding/margin so it is not squished into the corner.

Here is a desktop example containing a logo from "Superbank":

Logo

Header

The header can be visible or hidden. When visible, it should always be on top. You can change the:

• Transparency: This can be useful if you have uploaded a background image that you want to display behind.
• Header colour: You can change this to fit your brand. You can use all colour formats suited for web, for example RGB, RGBA, HEX.

For an example, see the above Logo section showing a white header containing a logo from "Superbank":

The header is hidden on smaller devices

This is to ensure all elements of the MitID client is visible to the end-user.

Border

You can define a border around the centred piece of the profile, for example a drop-shadow or stroke.

This is not the same as the border around the MitID box, which you cannot change.

Here is an example on a border with drop-shadow:

Border drop-shadow

Here is an example on a border with stroke:

Border stroke

Background

On the background surrounding the MitID box, you can:

• Add a colour: Choose a background colour that suits your brand. You can use all colour formats suited for web, for example RGB, RGBA, HEX.
• Upload an image: This image will also cover the header area. You can then make the header transparent or hide it for the image to show. For size and format details, see Recommendations for images and colours.

Here is an example of an uploaded background image:

Background image example

Help text

You can add short texts to provide additional service information for the end-users. For example, it could give value-added information about your service.

You can also decide not to show such a text. If you have an empty body text, the links below will adjust nicely.

This text is not the same as the Help link in the MitID box, which provides specific MitID help.

Requirements for the text:

• Heading: You can only have one heading level
• Body text: Maximum 5 lines
• Paragraph styles: No other styles than heading and body text is allowed.
• Font: You cannot change the text font (IBM Plex Sans). However, you can change the font colour, but be aware of WCAG. For better contrast and compliance with WCAG, you might consider employing a semi-transparent box.

Here is an example of a help text to the right of the MitID box, starting with the heading, "Welcome to Superbank":

Help text example

Links

You can add links below the help text:

• It should be located right below the help text.
• Maximum 2 links.
• The link can be either a text link or a URL.
• If there is no help text (neither heading nor body text), the link is not displayed.
• Links in the footer are not supported.

For an example of added links, see the above Help text section.

Label

You can highlight information by inserting them into a grey label box.

• You can add a link inside the label.
• You can change the text inside the label.
• The grey box adapts to the text length.
• The label is optional to show.