​
CSS Variables

CSS variables can be used to style the hanko-auth and hanko-profile elements to your needs. A list of all CSS variables including default values can be found below

hanko-auth,
hanko-profile {
  /* Color Scheme */
  --color: #333333;
  --color-shade-1: #8f9095;
  --color-shade-2: #e5e6ef;

  --brand-color: #506cf0;
  --brand-color-shade-1: #6b84fb;
  --brand-contrast-color: white;

  --background-color: white;
  --error-color: #e82020;
  --link-color: #506cf0;

  /* Font Styles */
  --font-weight: 400;
  --font-size: 16px;
  --font-family: sans-serif;

  /* Border Styles */
  --border-radius: 8px;
  --border-style: solid;
  --border-width: 1px;

  /* Item Styles */
  --item-height: 34px;
  --item-margin: 0.5rem 0;

  /* Container Styles */
  --container-padding: 30px;
  --container-max-width: 410px;

  /* Headline Styles */
  --headline1-font-size: 24px;
  --headline1-font-weight: 600;
  --headline1-margin: 0 0 1rem;

  --headline2-font-size: 16px;
  --headline2-font-weight: 600;
  --headline2-margin: 1rem 0 0.5rem;

  /* Divider Styles */
  --divider-padding: 0 42px;
  --divider-visibility: visible;

  /* Link Styles */
  --link-text-decoration: none;
  --link-text-decoration-hover: underline;

  /* Input Styles */
  --input-min-width: 14em;

  /* Button Styles */
  --button-min-width: max-content;
}

​
CSS Shadow Parts

In addition to CSS variables, you can utilize the ::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

register("https://hanko.yourdomain.com", { shadow: true });

// equals
register("https://hanko.yourdomain.com");
NameDescription
containerthe UI container
headline1the “h1” headlines
headline2the “h2” headlines
paragraphthe paragraph elements
buttonevery button element
primary-buttonthe primary button
secondary-buttonthe secondary button on the email login page
inputevery input field
text-inputevery input field not used for passcodes
passcode-inputthe passcode input fields
linkthe links in the footer section
errorthe error message container
error-textthe error message
dividerthe horizontal divider on the login page
divider-textthe divider text
divider-linethe line before and after the divider-text
form-itemthe container of a form item, e.g. an input field or a button

​
Examples

The following examples demonstrate how to apply styles to specific shadow parts

​
Stacking hanko-auth component fields vertically

This example demonstrates how to force the input fields and buttons within the hanko-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.

<style>
  hanko-auth::part(form-item) {
    /* Force the input fields and buttons are on top of each other */
    min-width: 100%;
  }
</style>
<hanko-auth></hanko-auth>

​
Modifying the main headlines for hanko components

This example shows how to adjust the main headlines for all hanko components by targeting the headline1 shadow part. The .hankoComponent::part(headline1) selector applies the styles to the headline1 shadow part within elements that have the hankoComponent class.

<style>
  .hankoComponent::part(headline1) {
    /* Adjust the main headlines for all hanko components */
    font-size: 1.3em;
    font-weight: 400;
  }
</style>

<hanko-auth class="hankoComponent"></hanko-auth>
<hanko-profile class="hankoComponent"></hanko-profile>

​
Applying box shadow on button of hanko-auth component

In this example, a box shadow is applied to the button 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.

<style>
  #hankoAuth::part(button):hover {
    box-shadow: 3px 3px 2px #888;
  }
</style>

<hanko-auth id="hankoAuth"></hanko-auth>

For more examples and design inspiration, check out our blog post, Make Hanko Components Shine.