Styling Mollie Components

Mollie Components can be fully styled to ensure a smooth blend-in with your checkout. Check out what is possible in our Components Examples repository.

How to style a component

https://assets.docs.mollie.com/_images/components-layout@2x.png

Most of the styling should be applied to the injected .mollie-component container. The <div class="mollie-component" /> container lives completely in your own environment and thus will give the most flexible way of styling. To see how this works please visit our Components Examples repository for examples.

  • .mollie-component Will always be present. You can use this class to style border and background properties.
  • .mollie-component--<component name> The component will be identified on the component name itself. This can be used to target one specific component.

We also set some dynamic classes to reflect the state of the component as the user interacts with it:

  • .is-touched This class is set when the component receives focus for the first time. You may use this class in combination with another class to style error states.
  • .is-valid This class is set when the input contents are valid. You may use this class to give feedback to the user before submitting the form.
  • .is-invalid This class is set when the input contents are invalid. You may use this class to give feedback to the user before submitting the form.
  • .has-focus This class is set when the component has received focus and removed when the element has lost focus. You may use this class to outline the field so the user knows the component is interactive.

Example

Javascript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 var options = {
   styles : {
     base: {
       color: '#eee',
       fontSize: '10px',
       '::placeholder' : {
         color: 'rgba(68, 68, 68, 0.2)',
       }
     },
     valid: {
       color: '#090',
     }
   }
 };

 var cardNumberEl = mollie.createComponent('cardNumber', options)