Milestones

Milestones are graphic markers used to organize information into hierarchies and synthesize content into main subjects.

Adding a milestone

You can add milestones to your story to create vertical timelines, track progress, or highlight key moments.
Milestones create points of interest in the story and are a great way to insert CTAs (calls-to-action) in your story.

1. Add Code Block anywhere in your story

2. Open your Code Block and insert the following code snippet to add the milestone functionality

  <div class="milestone-wrapper">
    <div class="icon-wrapper">
      <i class="fa fa-building"></i>
    </div>
    <div class="text-wrapper">
      <div class="title">
        <h4 style="text-align: left;">Enterprise Solutions</h4>
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a href="https://www.lipsum.com/">LEARN MORE</a>
    </div>
  </div>
  
  <style>
  div.milestone-wrapper {display: flex;}
  div.icon-wrapper {
    font-size: 28px;
    text-align: center;
    border: 2px solid #D7D9DE;
    color: #A5A7AD;
    width: 64px;
    height: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  div.icon-wrapper i:hover {color: #D7D9DE;}
  div.text-wrapper {font-size: 16px;padding-left: 20px;}
  </style>

3. This is how the milestone will look like in View mode (in the published story)

Enterprise Solutions

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

LEARN MORE

Already an experienced user?

See what else you can do to enhance your story.