Documentation

Everything you need to start with Bulma-extensions.

Timeline

Display a vertical timeline, in different colors, sizes, and states

View on Github
NPM Package 3.0.4
Colors Yes
Sizes No
Javascript No
Variables Yes

Default layout

Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End 
<div class="timeline">
  <header class="timeline-header">
    <span class="tag is-medium is-primary">Start</span>
  </header>
  <div class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <p class="heading">January 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-marker is-image is-32x32">
      <img src="https://bulma.io/images/placeholders/32x32.png">
    </div>
    <div class="timeline-content">
      <p class="heading">February 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-primary">2017</span>
  </header>
  <div class="timeline-item">
    <div class="timeline-marker is-icon">
      <i class="fa fa-flag"></i>
    </div>
    <div class="timeline-content">
      <p class="heading">March 2017</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <div class="timeline-header">
    <span class="tag is-medium is-primary">End</span>
  </div>
</div>

Colors #

You can use color modifiers on timeline-marker to change its color

Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End 
<div class="timeline">
  <header class="timeline-header">
    <span class="tag is-medium is-primary">Start</span>
  </header>
  <div class="timeline-item">
    <div class="timeline-marker is-primary"></div>
    <div class="timeline-content">
      <p class="heading">January 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-marker is-warning is-image is-32x32">
      <img src="https://bulma.io/images/placeholders/32x32.png">
    </div>
    <div class="timeline-content">
      <p class="heading">February 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-primary">2017</span>
  </header>
  <div class="timeline-item">
    <div class="timeline-marker is-danger is-icon">
      <i class="fa fa-plus"></i>
    </div>
    <div class="timeline-content">
      <p class="heading">March 2017</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-medium is-primary">End</span>
  </header>
</div>

You can use color modifiers on timeline-item to change the line color

Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End 
<div class="timeline">
  <header class="timeline-header">
    <span class="tag is-medium is-primary">Start</span>
  </header>
  <div class="timeline-item is-primary">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <p class="heading">January 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <div class="timeline-item is-warning">
    <div class="timeline-marker is-image is-32x32">
      <img src="https://bulma.io/images/placeholders/32x32.png">
    </div>
    <div class="timeline-content">
      <p class="heading">February 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-primary">2017</span>
  </header>
  <div class="timeline-item is-danger">
    <div class="timeline-marker is-icon">
      <i class="fa fa-flag"></i>
    </div>
    <div class="timeline-content">
      <p class="heading">March 2017</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-medium is-primary">End</span>
  </header>
</div>

You can use them together

Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End 
<div class="timeline">
  <header class="timeline-header">
    <span class="tag is-medium is-primary">Start</span>
  </header>
  <div class="timeline-item is-primary">
    <div class="timeline-marker is-primary"></div>
    <div class="timeline-content">
      <p class="heading">January 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <div class="timeline-item is-warning">
    <div class="timeline-marker is-warning is-image is-32x32">
      <img src="https://bulma.io/images/placeholders/32x32.png">
    </div>
    <div class="timeline-content">
      <p class="heading">February 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-primary">2017</span>
  </header>
  <div class="timeline-item is-danger">
    <div class="timeline-marker is-danger is-icon">
      <i class="fa fa-flag"></i>
    </div>
    <div class="timeline-content">
      <p class="heading">March 2017</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-medium is-primary">End</span>
  </header>
</div>

Positions #

You can use the is-centered modifiers on timeline

Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End 
<div class="timeline is-centered">
  <header class="timeline-header">
    <span class="tag is-medium is-primary">Start</span>
  </header>
  <div class="timeline-item is-primary">
    <div class="timeline-marker is-primary"></div>
    <div class="timeline-content">
      <p class="heading">January 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <div class="timeline-item is-warning">
    <div class="timeline-marker is-warning is-image is-32x32">
      <img src="https://bulma.io/images/placeholders/32x32.png">
    </div>
    <div class="timeline-content">
      <p class="heading">February 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-primary">2017</span>
  </header>
  <div class="timeline-item is-danger">
    <div class="timeline-marker is-danger is-icon">
      <i class="fa fa-flag"></i>
    </div>
    <div class="timeline-content">
      <p class="heading">March 2017</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-medium is-primary">End</span>
  </header>
</div>

You can use is-rtl modifiers on timeline

Start

January 2016

Timeline content - Can include any HTML element

February 2016

Timeline content - Can include any HTML element

2017

March 2017

Timeline content - Can include any HTML element

End 
<div class="timeline is-rtl">
  <header class="timeline-header">
    <span class="tag is-medium is-primary">Start</span>
  </header>
  <div class="timeline-item is-primary">
    <div class="timeline-marker is-primary"></div>
    <div class="timeline-content">
      <p class="heading">January 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <div class="timeline-item is-warning">
    <div class="timeline-marker is-warning is-image is-32x32">
      <img src="https://bulma.io/images/placeholders/32x32.png">
    </div>
    <div class="timeline-content">
      <p class="heading">February 2016</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-primary">2017</span>
  </header>
  <div class="timeline-item is-danger">
    <div class="timeline-marker is-danger is-icon">
      <i class="fa fa-flag"></i>
    </div>
    <div class="timeline-content">
      <p class="heading">March 2017</p>
      <p>Timeline content - Can include any HTML element</p>
    </div>
  </div>
  <header class="timeline-header">
    <span class="tag is-medium is-primary">End</span>
  </header>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$timeline-marker-background-color $white
$timeline-marker-border .1em solid $grey-light
$timeline-line .1rem solid $grey-light
$timeline-content-padding 1em 0 0 2em
$timeline-icon-size $size-5
$timeline-header-width 4em
$dimensions 16 24 32 48 64 96 128