USPTO Design

Tours

Purpose

Users need to a guided overview of functionality that they may not be familiar with yet.

Description

  • Tours can appear in the center of the screen or next to a related element
  • Tours can contain text, forms, images, or videos
  • Optional step indicators can be added to indicate where the user is within the tour
  • An optional close (x) button can be added if the user is able to skip the tour
  • The background can optionally be grayed out while highlighting a related element

Welcome! ×

Any images placed within /app/images will be automatically copied to the build/images directory. If running gulp prod, they will also be compressed via imagemin.

  1. Step 1
  2. Step 2
  3. Step 3

Searching for documents ×

Any images placed within /app/images will be automatically copied to the build/images directory. If running gulp prod, they will also be compressed via imagemin.

Learn more

  1. Step 1
  2. Step 2
  3. Step 3

Ready to sign up? ×

Signing up lets you save your searches for later. You can also opt-in for email alerts whenever your search results change.

  1. Step 1
  2. Step 2
  3. Step 3 
<div class="popover left">
    <div class="arrow"></div>
    <h3 class="popover-title">Add note</h3>
    <div class="popover-content">
        <textarea placeholder="Enter note here" class="form-control" name="" id="" rows="3"></textarea>
    </div>
    <div class="popover-toolbar">
        <button class="btn btn-hover btn-icon-only"><i class="icon icon-image"></i><span class="sr-only">Add image</span></button>
        <button class="btn btn-hover btn-icon-only"><i class="icon icon-chain"></i><span class="sr-only">Add link</span></button>
        <button class="btn btn-primary pull-right">Add</button>
    </div>
</div>