Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Global
Primitives & components: Teva Global

Timeline Milestone

v0.0.0

A Timeline Milestone indicates a significant stage or event in the Timeline.

The Timeline Milestone shows one of the many variations of the Moment Image. Note that the selection the Moment Image will be controlled by the Timeline Era javascript.

1965

alt text

Blog gentrify mumblecore organic tilde.

Blue bottle carry pitchfork loko disrupt aesthetic. 3 wolf moon photo booth stumptown. Swag 90's 3 wolf moon cleanse lomo art party post-ironic. You probably haven't heard of them messenger bag butcher yuccie semiotics green juice viral franzen. Yr brooklyn master viral sriracha biodiesel microdosing. Slow-carb carry master ramps cray. Kinfolk austin vhs food truck.

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Timeline Milestone  -->
  <div class="vi-timeline-milestone">
    <div class="vi-timeline-milestone__box">
      <div class="vi-timeline-milestone__marker">
        <!-- Use h1-h6 depending page hierarchy -->
        <h3 class="vi-timeline-milestone__marker-label">1965</h3>
      </div>
      <div class="vi-timeline-milestone__visual">
        <!-- Moment Image -->
        <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-1">
          <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-1">
            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
          </div>
        </div>
      </div>
      <div class="vi-timeline-milestone__main">
        <div class="vi-timeline-milestone__content">
          <!-- Use h1-h6 depending page hierarchy -->
          <h4 class="vi-timeline-milestone__title">Blog gentrify mumblecore organic tilde.</h4>
          <div class="vi-timeline-milestone__body">
            <p>Blue bottle carry pitchfork loko disrupt aesthetic. 3 wolf moon photo booth stumptown. Swag 90's 3 wolf moon cleanse lomo art party post-ironic. You probably haven't heard of them messenger bag butcher yuccie semiotics green juice viral franzen. Yr brooklyn master viral sriracha biodiesel microdosing. Slow-carb carry master ramps cray. Kinfolk austin vhs food truck.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Reverse #

Use modifier --reverse to switch position of visual and text on larger devices. Note that the direction of the Timeline Milestone will be controlled by javascript when used together with Timeline Era.

1953

alt text

Mixtape tousled brooklyn truffaut iphone.

Chartreuse keffiyeh williamsburg ethical yolo kombucha fixie master. Sartorial before they sold out vinegar selvage thundercats twee everyday normcore. Tilde sustainable street tacos. Twee literally paleo. Offal skateboard sartorial meggings photo booth pug quinoa. Carry phlogiston iphone thundercats. Vegan etsy forage typewriter artisan gastropub tofu.

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Timeline Milestone (mods: --reverse) -->
  <div class="vi-timeline-milestone vi-timeline-milestone--reverse">
    <div class="vi-timeline-milestone__box">
      <div class="vi-timeline-milestone__marker">
        <!-- Use h1-h6 depending page hierarchy -->
        <h3 class="vi-timeline-milestone__marker-label">1953</h3>
      </div>
      <div class="vi-timeline-milestone__visual">
        <!-- Moment Image -->
        <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-3">
          <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-3">
            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
          </div>
        </div>
      </div>
      <div class="vi-timeline-milestone__main">
        <div class="vi-timeline-milestone__content">
          <!-- Use h1-h6 depending page hierarchy -->
          <h4 class="vi-timeline-milestone__title">Mixtape tousled brooklyn truffaut iphone.</h4>
          <div class="vi-timeline-milestone__body">
            <p>Chartreuse keffiyeh williamsburg ethical yolo kombucha fixie master. Sartorial before they sold out vinegar selvage thundercats twee everyday normcore. Tilde sustainable street tacos. Twee literally paleo. Offal skateboard sartorial meggings photo booth pug quinoa. Carry phlogiston iphone thundercats. Vegan etsy forage typewriter artisan gastropub tofu.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Minimized #

With modifier --minified only the time marker is displayed. This will be controlled by javascript when used together with Timeline Era

Toggle .vi-timeline-milestone--minified

1953

alt text

Williamsburg waistcoat tattooed wayfarers pug.

Yolo thundercats hella. Blue bottle marfa normcore small batch sriracha. Franzen quinoa semiotics yr. Heirloom +1 pour-over stumptown. Skateboard pitchfork chartreuse microdosing you probably haven't heard of them. Bicycle rights blog actually letterpress synth pinterest artisan vice. 90's cred wayfarers loko.

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <script>
    $(function() {
      $('#sg-9e5605').on('click', function(e) {
        e.preventDefault();
        var milestoneId = $(this).attr('href')
        $(milestoneId).toggleClass('vi-timeline-milestone--minified')
      })
    })
  </script>
  <!-- Button type: outline  -->
  <a id="sg-9e5605" href="#sg-82442d" class="vi-btn-outline vi-btn-outline--accent-1 vi-btn-outline--no-pointer vi-btn">Toggle .vi-timeline-milestone--minified</a>
  <!-- Timeline Milestone (mods: --minified) -->
  <div class="vi-timeline-milestone vi-timeline-milestone--minified" id="sg-82442d">
    <div class="vi-timeline-milestone__box">
      <div class="vi-timeline-milestone__marker">
        <!-- Use h1-h6 depending page hierarchy -->
        <h3 class="vi-timeline-milestone__marker-label">1953</h3>
      </div>
      <div class="vi-timeline-milestone__visual">
        <!-- Moment Image -->
        <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-8">
          <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-8">
            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
          </div>
        </div>
      </div>
      <div class="vi-timeline-milestone__main">
        <div class="vi-timeline-milestone__content">
          <!-- Use h1-h6 depending page hierarchy -->
          <h4 class="vi-timeline-milestone__title">Williamsburg waistcoat tattooed wayfarers pug.</h4>
          <div class="vi-timeline-milestone__body">
            <p>Yolo thundercats hella. Blue bottle marfa normcore small batch sriracha. Franzen quinoa semiotics yr. Heirloom +1 pour-over stumptown. Skateboard pitchfork chartreuse microdosing you probably haven't heard of them. Bicycle rights blog actually letterpress synth pinterest artisan vice. 90's cred wayfarers loko.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Video #

To create a video Milestone:

  • A special Moment Image is used. This Moment Image is also a Video Button.
  • The standalone Button points to the dom id of the Video Button.

2010

Intelligentsia pbr&b mumblecore banjo venmo.

Vice kogi kale chips tumblr lumbersexual kinfolk. Poutine raw denim whatever portland organic marfa squid. Flannel gluten-free intelligentsia humblebrag stumptown. Tumblr bespoke polaroid crucifix etsy.

Austin wolf 
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Timeline Milestone  -->
  <div class="vi-timeline-milestone">
    <div class="vi-timeline-milestone__box">
      <div class="vi-timeline-milestone__marker">
        <!-- Use h1-h6 depending page hierarchy -->
        <h3 class="vi-timeline-milestone__marker-label">2010</h3>
      </div>
      <div class="vi-timeline-milestone__visual">
        <!-- Moment Image -->
        <button class="vi-moment-image vi-moment-image--video vi-moment-image--video-timeline" data-video-id="xcJtL7QggTI" data-video-provider="youtube" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-modal-close-button-label="Video modal dialog, click to close, or navigate to the video clip playing." data-video-lazy="true" data-player-mode="button" id="sg-553d6d">
          <div class="vi-moment-image__visual vi-moment-image__visual--video vi-moment-image__visual--video-timeline">
            <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-540x540.jpg" srcset="/assets/images/static/test-540x540.jpg, /assets/images/static/test-1080x1080.jpg 2x"></div>
          </div>
        </button>
      </div>
      <div class="vi-timeline-milestone__main">
        <div class="vi-timeline-milestone__content">
          <!-- Use h1-h6 depending page hierarchy -->
          <h4 class="vi-timeline-milestone__title">Intelligentsia pbr&amp;b mumblecore banjo venmo.</h4>
          <div class="vi-timeline-milestone__body">
            <p>Vice kogi kale chips tumblr lumbersexual kinfolk. Poutine raw denim whatever portland organic marfa squid. Flannel gluten-free intelligentsia humblebrag stumptown. Tumblr bespoke polaroid crucifix etsy.</p>
            <!-- Button type: solid  -->
            <a href="#sg-553d6d" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-2 vi-btn"><!-- Icon video-play (mods: --button-left) -->
              <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-left" aria-label="video-play" width="12" height="12"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
              Austin wolf</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • 28 June 2022 - Fix scrollparent detector

Changed

  • Add PBS support
  • The Video Milestone is now using the Video Button instead of modal with a vendor player. The code predated the button mode of the video.
  • Accessibility: Allow h1-h6 for the year indicator.

Added

  • Initial draft