22

✏️ Editing: timeline.md

---
layout: page
title: Timeline Component
---

The timeline component displays an event history. You can use it for descriptions of events that occurred in a particular time section.

##### Default

```html

<div class="timeline">
  
  <div class="time-label">
    <span class="bg-green">23 Aug. 2019</span>
  </div>
  <div>
  
    <i class="fas fa-envelope bg-blue"></i>
    
    <div class="timeline-item">
    
      <span class="time"><i class="fas fa-clock"></i> 12:05</span>
      
      <h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
      
      <div class="timeline-body">
        Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
        weebly ning heekya handango imeem plugg dopplr jibjab, movity
        jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
        quora plaxo ideeli hulu weebly balihoo...
      </div>
      
      <div class="timeline-footer">
        <a class="btn btn-primary btn-sm">Read more</a>
        <a class="btn btn-danger btn-sm">Delete</a>
      </div>
    </div>
  </div>
  
  <div>
    <i class="fas fa-clock bg-gray"></i>
  </div>
</div>
```
{: .max-height-300}

##### Extra style

There is an additional class for styling. It darkens the elements, highlighting it against the general background.
You can use it with adding `.timeline-inverse` to `.timeline`.

```html
<div class="timeline timeline-inverse">
  
</div>
```

MR SKB