Coach Mark
Slider input, showing the current value and selectable range
Anatomy
Title title title
This is a paragraph of text description.
1/3
2
1
5
4
6
3
1: Title
Optional
2: Container
Used to carry guide content
3: Close button
Optional
4: Main text
Required, text used to describe the content
Step 5
Optional
6: Button Area
Required, the next step of the guide
type
Title title title
This is a paragraph of text description.
Done
Title title title
This is a paragraph of text description.
View More
Done
This is a paragraph of text description.
Done
Title title title
This is a paragraph of text description.
1/3
Title title title
This is a paragraph of text description.
2/3
Title title title
This is a paragraph of text description.
3/3
Done
No steps - Basic
Step-by-step - Start Step
With steps - Intermediate step
Has steps - End step
No steps - with title
No Steps-With Jump Button
Usage scenario
Title title title
This is a paragraph of text description.
Done
Layout adaptation
Title title title
Under the H5 page, when the screen width is smaller than the coach mark, it is suitable to be set to 80% of the screen width.
Done
H5 Page Adaptation
On H5 pages, the maximum width of the novice guide is adapted to 80% of the screen width, and the arrow pointing to the target area can be set to center the element.
Interaction
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.sed do eiusmod tempor incididunt ut.sed do
Done
Title title title
This is a paragraph of text description.
1/3
Title title title
This is a paragraph of text description.
1/3
Title title title
This is a paragraph of text description.
1/3
No steps
Step-by-step
Click to end the guide
No steps
When only a single guide is needed, click the action button to end the guide
Step-by-step
When multiple guides are required, the first step only displays a single "Next" action button, the intermediate steps display both "Next" and "Previous" buttons, and the final step displays "Previous" and "End" buttons. During this process, users can also click the close button in the upper right corner to exit the guide.
Label
Title title title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
3/3
Done
8
16
16
16
16
16
12
8
Multilingual adaptation
TitletitletitleTitletitletitleTitletitletitleTitletitletitleTitletitletitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1/3
View More
Title
Truncate with trailing ... when the content exceeds the length limit.
Body
The body text is limited to five lines. If you have a large amount of text/content to display, we recommend simplifying the copy and setting up a redirect button to show more content via a pop-up window or a new page.
Container
The maximum width of the container is limited to 420px, and the height adapts automatically to the text.
RTL
Title title title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
1/3
LTR
Address Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
March 1st
RTL
Usage
Title title title
This is a paragraph of text description.
1/3
Do
Title title title
This is a paragraph of text description.
1/3
Don't
Be sure to use the correct colors; guide colors cannot be customized.
Modal Title
❖
Replace me
Secondary
Primary
Do
Title title title
This is a paragraph of text description.
1/3
Caution
Guidance space is limited; image-text introductions are not recommended. When content requires images and extensive text descriptions, a centered pop-up window is recommended.