Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Components


  • Alert
  • Anchor navigation
  • App layout
  • App layout toolbar
  • Attribute editor
  • Autosuggest
  • Badge
  • Board components
    • Board
    • Board item
    • Items palette
  • Box
  • Breadcrumb group
  • Button
  • Button dropdown
  • Button group
  • Calendar
  • Cards
  • Charts
    • Bar chart
    • Line chart
    • Area chart
    • Mixed line and bar chart
    • Pie and donut charts
  • Checkbox
  • Code editor
  • Code view
  • Collection preferences
  • Collection select filter
  • Column layout
  • Container
  • Content layout
  • Copy to clipboard
  • Date input
  • Date picker
  • Date range picker
  • Drawer
  • Expandable section
  • File uploading components
    • File dropzone
    • File token group
    • File input
    • File upload
  • Flashbar
  • Form
  • Form field
  • Generative AI components
    • Avatar
    • Chat bubble
    • Loading bar
    • Prompt input
    • Support prompt group
  • Grid
  • Header
  • Help panel
  • Icon
  • Input
  • Key-value pairs
  • Link
  • Live region
  • Modal
  • Multiselect
  • Pagination
  • Popover
  • Progress bar
  • Property filter
  • Radio group
  • S3 resource selector
  • Segmented control
  • Select
  • Side navigation
  • Slider
  • Space between
  • Spinner
  • Split panel
  • Status indicator
  • Steps
  • Table
  • Tabs
  • Tag editor
  • Text content
  • Text filter
  • Text area
  • Tiles
  • Time input
  • Toggle
  • Toggle button
  • Token group
  • Top navigation
  • Tutorial components
    • Annotation context
    • Hotspot
    • Tutorial panel
  • Wizard
  1. Cloudscape Design System
    • Components
    • Tutorial components
    1. Cloudscape Design System
    2. Components
    3. Tutorial components

    Tutorial components

    Hands-on tutorials are made up of three components that communicate and work together to teach users in an interactive way how to use a service.

    Published: August 27, 2021

    On this page

    1. Guidance on introducing hands-on tutorials
    2. Components
    3. How the components work together

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Guidance on introducing hands-on tutorials

    For information about how to you can help your users with the process of onboarding and how hands-on tutorials should be structured, see Onboarding and Hands-on tutorials.

    Components

    Annotation context

    The annotation context is an invisible layer on top of the interface. It tracks the progress of a launched tutorial and feeds dynamic content to the Tutorial panel in Hands-on tutorials. It also renders annotation popovers and hotspot icons.

    Hotspot

    In Hands-on tutorials, hotspots are invisible containers that mark the spots where hotspot icons should be placed. Hotspot icons are rendered by the Annotation context and are used to open and close annotation popovers.

    Tutorial panel

    The tutorial panel houses contextual Hands-on tutorials that help users learn how to use a service.

    How the components work together

    Hands-on tutorials consist of three components: Annotation context, Hotspot, and Tutorial panel. All three are interdependent and must be used together, as they send information among themselves to create the tutorial experience.

    The tutorial experience itself is comprised of static and dynamic content. Static content is provided by the tutorial panel, while dynamic content is provided by the annotation context to communicate information about a launched tutorial.

    The annotation context is an invisible layer on top of the interface, rendering annotation popovers and hotspot icons. It tracks the progress of a launched tutorial and feeds dynamic content to the tutorial panel.

    When a tutorial is launched, annotation popovers are used to provide step-by-step guidance to users. These annotation popovers are not a separate component but are rather rendered by the annotation context.

    The hotspot component is an invisible container that marks the locations in the interface where hotspot icons and their associated annotation popovers are rendered by the annotation context. When implemented in the interface, hotspots are invisible by default. After a tutorial is launched, the annotation context automatically renders hotspot icons for any hotspots that belong to that tutorial. When the tutorial is dismissed, the icons disappear.


    The tutorial panel houses all hands-on tutorials available in a service. Users can launch a hands-on tutorial from the tutorial panel. The tutorial panel consists of static and dynamic content. There are three states of the tutorial panel: tutorial list, tutorial launched, and tutorial completed.

    • The tutorial list state is shown when no tutorial is launched. Because the tutorial isn’t launched, the content is entirely static and the tutorial panel receives no information from the annotation context.

    • The tutorial launched state and tutorial completed state are a mix of static and dynamic content. For these states, think of static content as a template provided by the tutorial panel that structures the panel's information. Dynamic content is provided by the annotation context and fills the static template to provide guidance specific to a particular tutorial. Dynamic content in these states consists of the tutorial title, tasks, and steps. The tutorial panel renders this text to make it visible to users.

    1. Wrap an annotation context element around your application’s

      App layout. This allows the annotation context to provide a React context that is automatically consumed by the hotspot and tutorial panel components. All pages of your application must share the same annotation context element.
      For more information, see the development guidelines for the annotation context component.

    2. Place a tutorial panel element in your app layout’s tools slot. To show a Help panel in the tools slot together with the tutorial panel, use the Tabs component to wrap the two. For more information, see the development guidelines for the tutorial panel component.

    3. Place hotspots in places where annotation popovers can appear. Each hotspot must have an ID that is unique across all pages of your application. You can use a single hotspot across multiple tutorials. You don't need to render hotspots conditionally.
      For more information, see the development guidelines of the hotspot component.

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
    • About
    • Connect
    • Privacy 
    • Site terms 
    • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Made with love atAWS