Search…
UI Customization
Customize the look and feel of the element to match your brand.
The UI for any Passage Element can be customized using CSS variables to modify the default configuration of the Passage Element. To use one or more CSS variables, you can add the variable declarations inside of a style block that will be loaded on the page. You may choose to scope the CSS variables in one of two ways:
1
/* Option 1 */
2
:root {
3
--passage-button-background-color: #27417e;
4
/* ... more variables ... */
5
}
6
​
7
/* Options 2 */
8
passage-auth {
9
--passage-button-background-color: #27417e;
10
/* ... more variables ... */
11
}
Copied!
All variables available for customization and their current default values are shown below:
1
​
2
passage-auth {
3
--passage-body-font-family: 'Roboto', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
4
'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
5
--passage-body-font-size: 16px;
6
--passage-body-font-weight: 400;
7
--passage-body-text-color: #22283a;
8
--passage-button-width: 100%;
9
--passage-button-active-background-color: #0f1930;
10
--passage-button-active-border-color: #0f1930;
11
--passage-button-active-color: #fff;
12
--passage-button-background-color: #27417e;
13
--passage-button-border-color: #27417e;
14
--passage-button-border-radius: 6px;
15
--passage-button-color: #fff;
16
--passage-button-font-weight: 400;
17
--passage-button-hover-background-color: #1b2d57;
18
--passage-button-hover-border-color: #1b2d57;
19
--passage-button-hover-color: #fff;
20
--passage-container-background: transparent;
21
--passage-container-margin: 16px auto;
22
--passage-container-max-width: 400px;
23
--passage-container-padding: 0;
24
--passage-control-background-color: #fff;
25
--passage-control-border-color: #dbdbdb;
26
--passage-control-border-radius: 6px;
27
--passage-control-border-width: 1px;
28
--passage-control-height: 2.5em;
29
--passage-control-text-color: #22283a;
30
--passage-error-color: #d72638;
31
--passage-header-font-family: 'Open Sans', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
32
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
33
--passage-header-font-weight: 600;
34
--passage-header-font-weight: 20px;
35
--passage-header-text-color: #22283a;
36
}
37
​
Copied!

Customization Examples

Example 1
Example 2
Code:
1
<style>
2
passage-auth {
3
--passage-body-text-color: black;
4
--passage-button-active-background-color: black;
5
--passage-button-active-border-color: black;
6
--passage-button-background-color: black;
7
--passage-button-border-color: black;
8
--passage-button-border-radius: 50px;
9
--passage-button-hover-background-color: gray;
10
--passage-button-hover-border-color: gray;
11
--passage-button-hover-color: white;
12
--passage-container-background: white;
13
--passage-container-margin: 0px auto;
14
--passage-container-max-width: 500px;
15
--passage-container-padding: 60px;
16
--passage-control-border-radius: 50px;
17
}
18
</style>
Copied!
​
Code:
1
<style>
2
passage-auth {
3
--passage-control-border-color: #27417e;
4
--passage-control-border-radius: 0px;
5
--passage-control-border-width: 3px;
6
}
7
</style>
Copied!
Last modified 21d ago
Copy link