This guide will walk you through the UI customization of Hanko Auth and Profile components.
hanko-auth
and hanko-profile
elements to your needs. A list of all CSS variables including default values can be found below
::part
selector to customize the styles of various elements.
Please note that shadow parts only function when the web components are attached to the shadow DOM, which is the default behavior. You can enable the shadow DOM for the components using the following code snippet
Name | Description |
---|---|
container | the UI container |
headline1 | the “h1” headlines |
headline2 | the “h2” headlines |
paragraph | the paragraph elements |
button | every button element |
primary-button | the primary button |
secondary-button | the secondary button on the email login page |
input | every input field |
text-input | every input field not used for passcodes |
passcode-input | the passcode input fields |
link | the links in the footer section |
error | the error message container |
error-text | the error message |
divider | the horizontal divider on the login page |
divider-text | the divider text |
divider-line | the line before and after the divider-text |
form-item | the container of a form item, e.g. an input field or a button |
hanko-auth
component fields verticallyhanko-auth
component to stack vertically. The ::part(form-item)
selector targets the form-item
shadow part within the hanko-auth
component, which is applied using the tag name.
headline1
shadow part. The .hankoComponent::part(headline1)
selector applies the styles to the headline1
shadow part within elements that have the hankoComponent
class.
hanko-auth
componentbutton
shadow part of the hanko-auth
component when hovering over it. The #hankoAuth::part(button):hover
selector targets the button shadow part within the hanko-auth
component using the ID selector #hankoAuth
and applies the styles when the :hover
pseudo-class is active.