Styling Appcues with Custom CSS
Most styling can be done without CSS by using our built-in controls in the Appcues styling tool. Learn about that here.
However, some advanced users or users looking for very special styling might want to use their own CSS. This is a guide to the Appcues-specific CSS selectors and classes that you can target. All of these selectors can also be seen in context within the browser inspector. If you're not comfortable exploring the browser inspector, we suggest you do not edit the CSS and do exercise caution if you decide to. If you do, please do not use
html tags in the HTML component while building your flows as it may cause your flow to break or not show when the flow has been pushed live.
Please note that our markup is subject to change. While we test our own styling operators across browser versions, we are unable to guarantee that your custom CSS will operate as expected. If you have any questions, don't hesitate to reach out at firstname.lastname@example.org.
This element wraps an entire flow.
A CSS progress bar that's updated as users complete each step.
This is where the main content lives. Feel free to assign styles here as necessary.
Button arrows are set using the CSS content attribute and unicode characters. You can remove/edit them by changing their CSS.
This is the background that covers the page during a "lights off" flow.
This the is where tooltip content lives.
appcues cue .apc-hero h1 and
appcues cue .apc-hero h2
The heading (h1) and subheading (h2) for the Hero heading component.