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¶
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, 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..mollie-component--is-loading
Indicates that the component is still loading. It will disappear after the component is loaded.
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.