Skip to main content

Flow Step

This guide provides a list of CSS classes you can use to style the Flow Step component in Experience Designer.

Questionnaire​

Leadgen​

zoovu-component-flow-step​

This class is used for styling the base component that represents a standalone flow step. It is used as a container for other components or content displayed to the user.

zoovu-component-question-and-answers​

A reusable class for styling a set of questions and their corresponding answers. It is used for styling a container for the question and its answers.

zoovu-component-question-text-and-image​

Style the container that holds the question title, question image, and additional text.

zoovu-component-question-title​

Style the title of a question inside a Flow Step component.

zoovu-component-question-description​

Used to style the description of a question inside a Flow Step component.

zoovu-component-question-image​

Used to style the image of a question inside a Flow Step component.

zoovu-component-question-layout​

Defines the layout structure for a question, organizing its content such as title and description. It is used to style the question container inside a Flow Step component.

zoovu-component-question-transition​

Handles transitions between questions. It is used to style the transition action between questions inside a Flow Step component.

zoovu-component-answers-container​

A container for grouping multiple answer options related to a question. It is used to style the container of the answer options.

zoovu-component-answers-element​

Used in the answer card type to style the container of an answer element. Represents a single answer option.

zoovu-component-answer-selected-element​

Used in the answer card type to style the container of a selected answer element. Represents a single selected answer option.

zoovu-component-answer-image​

Style the image of an answer inside a Flow Step component.

zoovu-component-answer-text​

Style the text (border, padding, margin, background) of an answer option.

zoovu-component-answer-text-selected​

Style the text of a selected answer option.

zoovu-component-answer-text-font​

Style the font properties (e.g. size, weight) of the answer text. It is used to style properties from the Font section.

zoovu-component-answer-description​

Style a description or explanation for an answer option.

zoovu-component-answer-dropdown-placeholder​

Style a placeholder for a dropdown answer option before a selection is made.

zoovu-component-selection-summary-item-answer​

Style a single answer in selection summary (and the answer separator for multiple choice questions by using ::after pseudoblock).

zoovu-component-leadgen-headline​

Style the leadgen question title.

zoovu-component-leadgen-choice-selection​

Style leadgen single/multiple choice selection data (e.g. padding, margin, font).

zoovu-component-leadgen-choice-selection-selected-element​

Style leadgen single/multiple choice selection data (e.g. padding, margin, font) for selected elements.

zoovu-component-leadgen-input​

Style the input element in a leadgen question.

zoovu-component-leadgen-text-area​

Style the text area element in a leadgen question.

zoovu-component-leadgen-field-upload​

Style the field upload element in a leadgen question.