This section is for users with CSS experience. If you encounter any challenges, please refer to the CSS documentation.
You can easily select any element within a flow by using its CSS class name.
Each step displays 2 containers: one with a light colour (the left one on desktop/bottom one on mobile), and one with a dark colour (the right one on desktop/top one on mobile).
- To target the light container:
.light {
...
}
- To target the dark container:
.dark {
...
}
Every draggable component in the light container is part of an HTML form container, that can be targeted with the following class:
.UP_formContainer {
...
}
- For a button with primary style:
.button.primary.submit {
...
}
- For a button with secondary style:
.button.secondary.submit {
...
}
- For the filled part of the progress bar:
.light > .UP_progressBarContainer > .meter > .progress {
...
}
- For the empty part of the progress bar:
.light > .UP_progressBarContainer > .meter > .empty-progress {
...
}
.UP_logoContainer {
...
}
form > .text-component {
...
}
form > a {
...
}
form > h1 {
...
}
form > h2 {
...
}
.spacer {
...
}
.content-cards {
...
}
form > img {
...
}
.form-input {
...
}
.form-names-input {
...
}
.form-select {
...
}
.nested-form-select {
...
}
.form-phone {
...
}
.multi-select-wrapper {
...
}
.file-uploader {
...
}
.card-group {
...
}
.button.primary.chargebee-button {
...
}
.button.primary.submit {
background-image: linear-gradient(to bottom right, rgb(217, 58, 224), rgb(96, 72, 243));
border: 0;
}
Easily customize your colours by simply adjusting the RGB values or inputting the desired colour hexcode.
.button.primary.submit {
width: 200px;
height: 100px;
}
.dark {
background-image: linear-gradient(to bottom right, rgb(217, 58, 224), rgb(96, 72, 243));
}
.progress {
background-image: linear-gradient(to bottom right, rgb(217, 58, 224), rgb(96, 72, 243));
}
.meter > .progress, .meter > .empty-progress {
border-radius: 0;
}