Styling Mollie Components¶
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-componentWill 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-loadingIndicates 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-touchedThis 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-validThis 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-invalidThis 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-focusThis 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.