A timeline is essential for managing a complex project and juggling dozens of dates. It allows you to quickly visualize the sequence of events in a project or event, and clearly convey the timing.

HTML Structure

              
                <ul class="timeline">
                  <li class="timeline-item timeline-icon-*color-palette* active">
                    <div class="timeline-time">Time here</div>
                      <h6 class="timeline-title">Title here</h6>
                      <p class="timeline-text">text here</p>  <-- /optional -->
                    <div class="timeline-content">Content here </div>  <-- /optional -->
                  </li>
                </ul>
              
            

Class	Description
.timeline	Works as wrapper for timeline
.timeline-item	Timeline items container
.timeline-icon-{color}	Timeline icon color.
.timeline-time	Timeline items time.
.timeline-text	Timeline items text.
.timeline-content	Timeline items content.
.timeline-item.active	Active timeline items will be heighlighted with border.

Type	URL
Template Page	https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/widgets.html

Messaging or the use of chat apps are surging in popularity these days as people prefer chat-based apps over text messages as it provides real-time interactions and gives them a personal touch experience.

HTML Structure

          
              <div class="widget-chat-container">
                <div class="chat-content">
                  <div class="chat"> <-- /sender message -->
                    <div class="chat-body">
                      <div class="chat-message">
                        <p>message here</p>
                        <span class="chat-time">Message Time here</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat chat-left"> <-- /receiver message -->
                    <div class="chat-body">
                      <div class="chat-message">
                        <p>message here</p>
                        <span class="chat-time">Message Time here</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          
        

Class	Description
.widget-chat-container	Works as wrapper for chat area
.chat-content	Chat container
.chat	Chat profile message wrapper
.chat.chat-left	Positions chat message to left.
.chat-body	Individual chat message container.
.chat-message	Chat message text.
.chat-time	Chat message time.

Type	URL
Template Page	https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/widgets.html