Timeline

Goodkit Exclusive

Timeline component for complex ordered lists.

The color of the timeline component can be controlled with the .timeline-{color} utility classes. You can also specify the breakpoint at which the timeline component becomes uncollapsed via .timeline-expand-{breakpoint} utility classes.

  1. Activation

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In urna lectus, mattis non accumsan in, tempor dictum neque.

    Activation Triggers

  2. Engagement

    In urna lectus, mattis non accumsan in, tempor dictum neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Feedback Loops

  3. Retention

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In urna lectus, mattis non accumsan in, tempor dictum neque.

    Churn Minifiers
<ol class="timeline timeline-expand-xl timeline-warning mb-0">
  <li class="timeline-item active">

    <!-- Heading -->
    <h2>
      Activation
    </h2>

    <!-- Text -->
    <p class="text-muted mb-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In urna lectus, mattis non accumsan in, tempor dictum neque.
    </p>

    <!-- Link -->
    <a class="h4 font-sans-serif" href="#!">
      Activation Triggers <i class="fe fe-chevron-right ms-1"></i>
    </a>

  </li>
  <li class="timeline-item active">

    <!-- Heading -->
    <h2>
      Engagement
    </h2>

    <!-- Text -->
    <p class="text-muted mb-4">
      In urna lectus, mattis non accumsan in, tempor dictum neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>

    <!-- Link -->
    <a class="h4 font-sans-serif" href="#!">
      Feedback Loops <i class="fe fe-chevron-right ms-1"></i>
    </a>

  </li>
  <li class="timeline-item active">

    <!-- Heading -->
    <h2>
      Retention
    </h2>

    <!-- Text -->
    <p class="text-muted mb-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In urna lectus, mattis non accumsan in, tempor dictum neque.
    </p>

    <!-- Link -->
    <a class="h4 font-sans-serif" href="#!">
      Churn Minifiers <i class="fe fe-chevron-right ms-1"></i>
    </a>

  </li>
</ol>