Info Step

Display General Info

Info steps are used to display information with no available further actions or buttons required from the user.

settings.json

{
  "steps": {
    "info_step_name": {
      "title": "An info step component",
      "type": "info",
      "description": "This is an info step component",
      "img": "mockup1.jpeg"
    }
  }
}

Schema Overview

type required	string Value: "info"
description	string
img	string
title	string The title of the step which is the first text content on the top of the step view. The title should describe the current step in a short and concise way.
can_skip	boolean When set to false the step is required to be answered before moving on to the next step. When set to true the user can skip answering the step.
class	string Adds a custom CSS class name to the step to allow for easy CSS selection and modifications at the step level.
layout	string (AppState.ILayout) Enum: "cards" "list" There are two available layouts for single select steps; cards and list. The cards layout consists of selectable retangular cards that are displayed in a single row grid format. Navigating between card options is handled by a horizontal carousel. Cards contain text and/or images. The list layout is a list of selectable items with a vertical scroll. List items may also contain text and/or images. The list layout is better suited for smaller images such as icons while the cards layout is better suited to larger images.

{

• "can_skip": true,
• "class": "My-Info-Step-Custom-Class-Name",
• "description": "Hey there! Welcome to our quiz.",
• "img": "mockup.png",
• "subtitle": "Setster Product Survey",
• "title": "Welcome",
• "type": "info"

}

Full Schema

Loading ....

Example

type required	string Value: "info"
description	string
img	string
title	string The title of the step which is the first text content on the top of the step view. The title should describe the current step in a short and concise way.
can_skip	boolean When set to false the step is required to be answered before moving on to the next step. When set to true the user can skip answering the step.
class	string Adds a custom CSS class name to the step to allow for easy CSS selection and modifications at the step level.
layout	string (AppState.ILayout) Enum: "cards" "list" There are two available layouts for single select steps; cards and list. The cards layout consists of selectable retangular cards that are displayed in a single row grid format. Navigating between card options is handled by a horizontal carousel. Cards contain text and/or images. The list layout is a list of selectable items with a vertical scroll. List items may also contain text and/or images. The list layout is better suited for smaller images such as icons while the cards layout is better suited to larger images.

{

• "can_skip": true,
• "class": "My-Info-Step-Custom-Class-Name",
• "description": "Hey there! Welcome to our quiz.",
• "img": "mockup.png",
• "subtitle": "Setster Product Survey",
• "title": "Welcome",
• "type": "info"

}