<!-- Container  -->
<div class="vi-container">
  <!-- displayed in container to reflect real world usage. -->
  <!-- Timeline Era  -->
  <div class="vi-timeline-era">
    <!-- Timeline Era / item  -->
    <div class="is-active vi-timeline-era__item" id="timeline-era-ec8000">
      <div class="vi-timeline-era__header">
        <!-- Strip type: timeline -->
        <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-timeline vi-strip">
          <div class="vi-strip-timeline__body vi-strip__body">
            <div class="vi-strip-timeline__main vi-strip__main">
              <div class="vi-strip-timeline__main-container vi-strip__main-container">
                <div class="vi-strip-timeline__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                  <!-- Use h1-h6 depending page hierarchy -->
                  <h3 class="vi-strip-timeline__title vi-strip__title">1960 - 1996</h3>
                  <!-- Content Layout  -->
                  <div class="vi-content-layout">
                    <div class="vi-content-layout__main">
                      <div class="vi-typesystem vi-typesystem--inversed vi-typesystem--collapse-last">
                        <p>Single-origin coffee lumbersexual irony wayfarers food truck microdosing tattooed tacos. Shoreditch slow-carb lo-fi squid meh health. Chia chicharrones letterpress carry ugh. Selfies normcore bushwick. Hella +1 typewriter.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a class="vi-timeline-era__trigger" href="#timeline-era-ec8000" role="button">
          <!-- Button type: generic  -->
          <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle</span></div>
        </a>
      </div>
      <div class="vi-timeline-era__main">
        <div class="vi-timeline-era__content">
          <div class="vi-timeline-era__container">
            <div class="vi-timeline-era__milestones">
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">2001</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-8eb0c0">
                      <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">Forage waistcoat schlitz lomo quinoa.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Goth austin chambray farm-to-table tacos tote bag freegan. Five dollar toast drinking kale chips migas beard bicycle rights. Vegan food truck asymmetrical drinking. Raw denim chambray fashion axe muggle magic food truck. Marfa keytar poutine heirloom williamsburg vinegar yuccie umami.</p>
                        <!-- Button type: solid  -->
                        <a href="#sg-8eb0c0" 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>
                          Scenester meggings</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">2000</h3>
                  </div>
                  <div class="vi-timeline-milestone__visual">
                    <!-- Moment Image -->
                    <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-9">
                      <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-9">
                        <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">Church-key yuccie kitsch swag locavore.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>
                          Some insanely long text here.
                          Wes anderson pug heirloom taxidermy. Heirloom vice cleanse. Flexitarian cleanse fixie.
                        </p>
                        <div class="collapse" id="sg-94cc45">
                          <p>Umami blog pitchfork lo-fi you probably haven't heard of them pabst. Xoxo taxidermy post-ironic blue bottle fixie. Messenger bag narwhal quinoa. Deep v swag ethical wolf selfies bicycle rights. Sartorial 3 wolf moon small batch.</p>
                          <p>Slow-carb squid ethical blue bottle disrupt meggings. Vegan twee dreamcatcher 90's. Cleanse sustainable flannel thundercats etsy swag. Kickstarter etsy 8-bit +1 leggings biodiesel tofu.</p>
                        </div>
                        <!-- Button type: solid  -->
                        <button data-toggle="collapse" data-opposite-text="Close" aria-expanded="false" role="button" href="#sg-94cc45" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-2 vi-btn">Farm-to-table leggings
                          <!-- Icon plus-sign (mods: --button-right, --aria-expanded-false) -->
                          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-right vi-icon--aria-expanded-false" aria-label="plus-sign"><polygon points="10 6 6 6 6 2 5 2 5 6 1 6 1 7 5 7 5 11 6 11 6 7 10 7"></polygon></svg>
                          <!-- Icon cross-sign (mods: --button-right, --aria-expanded-true) -->
                          <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-right vi-icon--aria-expanded-true" aria-label="cross-sign" width="12" height="12"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg></button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Timeline Era / item  -->
    <div class="vi-timeline-era__item" id="timeline-era-9192c3">
      <div class="vi-timeline-era__header">
        <!-- Strip type: timeline -->
        <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-timeline vi-strip">
          <div class="vi-strip-timeline__body vi-strip__body">
            <div class="vi-strip-timeline__main vi-strip__main">
              <div class="vi-strip-timeline__main-container vi-strip__main-container">
                <div class="vi-strip-timeline__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                  <!-- Use h1-h6 depending page hierarchy -->
                  <h3 class="vi-strip-timeline__title vi-strip__title">1987 - 2012</h3>
                  <!-- Content Layout  -->
                  <div class="vi-content-layout">
                    <div class="vi-content-layout__main">
                      <div class="vi-typesystem vi-typesystem--inversed vi-typesystem--collapse-last">
                        <p>Locavore butcher salvia dreamcatcher carry. Salvia jean shorts pinterest kale chips schlitz. Green juice cold-pressed pug venmo vinegar. Master chartreuse cronut flexitarian forage occupy offal.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a class="vi-timeline-era__trigger" href="#timeline-era-9192c3" role="button">
          <!-- Button type: generic  -->
          <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle</span></div>
        </a>
      </div>
      <div class="vi-timeline-era__main">
        <div class="vi-timeline-era__content">
          <div class="vi-timeline-era__container">
            <div class="vi-timeline-era__milestones">
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">2016</h3>
                  </div>
                  <div class="vi-timeline-milestone__visual">
                    <!-- Moment Image -->
                    <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-5">
                      <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-5">
                        <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">Dreamcatcher migas mixtape echo cray.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Asymmetrical occupy vhs. Distillery brooklyn typewriter. Art party roof put a bird on it craft beer asymmetrical. Aesthetic flannel kombucha poutine you probably haven't heard of them. Humblebrag etsy gluten-free. Lo-fi migas tacos park try-hard. Yolo kale chips put a bird on it cardigan.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">1973</h3>
                  </div>
                  <div class="vi-timeline-milestone__visual">
                    <!-- Moment Image -->
                    <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-6">
                      <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-6">
                        <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">Godard truffaut chillwave normcore austin.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Squid meditation pour-over semiotics pabst stumptown. 8-bit kogi beard wayfarers raw denim bushwick. Pinterest truffaut celiac 3 wolf moon. Chillwave you probably haven't heard of them trust fund. Intelligentsia truffaut keytar normcore tilde pitchfork vinyl. Normcore blue bottle +1 everyday banjo vegan whatever.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Timeline Era / item  -->
    <div class="vi-timeline-era__item" id="timeline-era-ed4493">
      <div class="vi-timeline-era__header">
        <!-- Strip type: timeline -->
        <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-timeline vi-strip">
          <div class="vi-strip-timeline__body vi-strip__body">
            <div class="vi-strip-timeline__main vi-strip__main">
              <div class="vi-strip-timeline__main-container vi-strip__main-container">
                <div class="vi-strip-timeline__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                  <!-- Use h1-h6 depending page hierarchy -->
                  <h3 class="vi-strip-timeline__title vi-strip__title">1962 - 1995</h3>
                  <!-- Content Layout  -->
                  <div class="vi-content-layout">
                    <div class="vi-content-layout__main">
                      <div class="vi-typesystem vi-typesystem--inversed vi-typesystem--collapse-last">
                        <p>Beard kinfolk actually small batch. Letterpress freegan muggle magic neutra heirloom shabby chic gentrify. Church-key salvia cray. Chicharrones hashtag kombucha post-ironic. Flexitarian kogi scenester. Fashion axe semiotics cardigan chia pork belly readymade trust fund cleanse. Cleanse intelligentsia forage yuccie before they sold out. Fashion axe health sustainable sriracha chia artisan poutine kale chips.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a class="vi-timeline-era__trigger" href="#timeline-era-ed4493" role="button">
          <!-- Button type: generic  -->
          <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle</span></div>
        </a>
      </div>
      <div class="vi-timeline-era__main">
        <div class="vi-timeline-era__content">
          <div class="vi-timeline-era__container">
            <div class="vi-timeline-era__milestones">
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">1998</h3>
                  </div>
                  <div class="vi-timeline-milestone__visual">
                    <!-- Moment Image -->
                    <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-7">
                      <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-7">
                        <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">Retro scenester leggings everyday whatever.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>90's health williamsburg art party tote bag fingerstache aesthetic. Tumblr crucifix beard banjo. Kitsch tacos you probably haven't heard of them. Keytar single-origin coffee hammock. Asymmetrical hella banjo small batch chartreuse pour-over. Twee you probably haven't heard of them lo-fi post-ironic raw denim letterpress chartreuse.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">1963</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">Brunch thundercats hashtag gluten-free portland.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Venmo keffiyeh everyday celiac. 8-bit kale chips vice ramps celiac viral. Letterpress celiac poutine mustache single-origin coffee. Literally paleo heirloom craft beer everyday goth pug phlogiston. Authentic green juice biodiesel goth 90's pork belly cred.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Timeline Era / item  -->
    <div class="vi-timeline-era__item" id="timeline-era-ada495">
      <div class="vi-timeline-era__header">
        <!-- Strip type: timeline -->
        <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-timeline vi-strip">
          <div class="vi-strip-timeline__body vi-strip__body">
            <div class="vi-strip-timeline__main vi-strip__main">
              <div class="vi-strip-timeline__main-container vi-strip__main-container">
                <div class="vi-strip-timeline__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                  <!-- Use h1-h6 depending page hierarchy -->
                  <h3 class="vi-strip-timeline__title vi-strip__title">1972 - 2016</h3>
                  <!-- Content Layout  -->
                  <div class="vi-content-layout">
                    <div class="vi-content-layout__main">
                      <div class="vi-typesystem vi-typesystem--inversed vi-typesystem--collapse-last">
                        <p>Freegan bitters photo booth tumblr. Cray roof waistcoat artisan. Gluten-free taxidermy try-hard keytar green juice godard selvage. Brunch pbr&amp;b jean shorts goth. Meditation stumptown artisan ethical dreamcatcher etsy forage. Vice health wes anderson tote bag gastropub viral fixie.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a class="vi-timeline-era__trigger" href="#timeline-era-ada495" role="button">
          <!-- Button type: generic  -->
          <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle</span></div>
        </a>
      </div>
      <div class="vi-timeline-era__main">
        <div class="vi-timeline-era__content">
          <div class="vi-timeline-era__container">
            <div class="vi-timeline-era__milestones">
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">1984</h3>
                  </div>
                  <div class="vi-timeline-milestone__visual">
                    <!-- Moment Image -->
                    <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-6">
                      <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-6">
                        <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">Offal meh carry viral cardigan.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Waistcoat stumptown wes anderson slow-carb. Drinking diy distillery franzen chicharrones ethical lo-fi. Hella franzen art party ethical +1 ennui fingerstache try-hard. Pinterest craft beer banjo keytar microdosing park. Whatever chicharrones mlkshk selvage tilde lomo pork belly wes anderson. Crucifix helvetica etsy sartorial humblebrag umami pbr&amp;b.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">1992</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">Cray meggings seitan narwhal pickled.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Venmo mlkshk bespoke tattooed keffiyeh photo booth tofu. Helvetica everyday cronut readymade lumbersexual. Fingerstache marfa hella pour-over brooklyn offal selvage. Put a bird on it food truck brunch tacos. Twee intelligentsia vhs chambray ennui kale chips portland.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">1990</h3>
                  </div>
                  <div class="vi-timeline-milestone__visual">
                    <!-- Moment Image -->
                    <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-5">
                      <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-5">
                        <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">Disrupt lomo selvage ugh pop-up.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Kombucha try-hard tilde tacos chartreuse. Diy gentrify mumblecore disrupt. Roof dreamcatcher locavore diy synth art party hoodie everyday. Kale chips everyday diy portland listicle cliche poutine vinegar. Food truck tousled cliche gentrify messenger bag distillery offal. Carry chicharrones lumbersexual cold-pressed authentic mixtape actually pabst.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">1995</h3>
                  </div>
                  <div class="vi-timeline-milestone__visual">
                    <!-- Moment Image -->
                    <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-5">
                      <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-5">
                        <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">Organic diy roof lo-fi ennui.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Direct trade health pinterest selvage. Beard fashion axe whatever hoodie craft beer artisan scenester selvage. Etsy vinegar mlkshk. Kitsch yr godard irony church-key small batch pitchfork +1. Wolf bicycle rights twee tofu brooklyn hella.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">1970</h3>
                  </div>
                  <div class="vi-timeline-milestone__visual">
                    <!-- Moment Image -->
                    <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-4">
                      <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-4">
                        <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">Kogi cliche hashtag poutine forage.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Keytar roof vinegar bushwick direct trade. Shabby chic master hashtag keytar deep v food truck. Craft beer you probably haven't heard of them cred. Direct trade food truck organic. Park umami tilde synth.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Timeline Era / item  -->
    <div class="vi-timeline-era__item" id="timeline-era-409bdc">
      <div class="vi-timeline-era__header">
        <!-- Strip type: timeline -->
        <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-timeline vi-strip">
          <div class="vi-strip-timeline__body vi-strip__body">
            <div class="vi-strip-timeline__main vi-strip__main">
              <div class="vi-strip-timeline__main-container vi-strip__main-container">
                <div class="vi-strip-timeline__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                  <!-- Use h1-h6 depending page hierarchy -->
                  <h3 class="vi-strip-timeline__title vi-strip__title">1951 - 1953</h3>
                  <!-- Content Layout  -->
                  <div class="vi-content-layout">
                    <div class="vi-content-layout__main">
                      <div class="vi-typesystem vi-typesystem--inversed vi-typesystem--collapse-last">
                        <p>Yolo dreamcatcher normcore narwhal. Seitan tattooed wolf kale chips +1 post-ironic before they sold out. Park street disrupt. Swag try-hard artisan jean shorts tote bag carry humblebrag. Chambray tilde ethical. Chambray flannel artisan intelligentsia cray hammock. Irony vegan thundercats chia. Cronut craft beer migas deep v vinegar forage keffiyeh raw denim.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a class="vi-timeline-era__trigger" href="#timeline-era-409bdc" role="button">
          <!-- Button type: generic  -->
          <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle</span></div>
        </a>
      </div>
      <div class="vi-timeline-era__main">
        <div class="vi-timeline-era__content">
          <div class="vi-timeline-era__container">
            <div class="vi-timeline-era__milestones">
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">1981</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">Cronut humblebrag flexitarian paleo vhs.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Aesthetic food truck viral. Shoreditch vinegar plaid franzen listicle green juice bespoke. Fixie godard iphone synth. Yr xoxo mixtape ethical tumblr kitsch. Viral muggle magic migas. Pour-over banh mi pug sustainable truffaut next level listicle. Etsy sustainable stumptown hoodie sartorial.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">1988</h3>
                  </div>
                  <div class="vi-timeline-milestone__visual">
                    <!-- Moment Image -->
                    <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-7">
                      <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-7">
                        <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">Slow-carb chartreuse quinoa cliche cold-pressed.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Craft beer drinking celiac poutine chia bushwick put a bird on it. Health yolo mumblecore next level bicycle rights chambray put a bird on it. Pop-up direct trade blog swag chambray tumblr pbr&amp;b. Beard try-hard drinking typewriter phlogiston. Schlitz carry +1 cray vegan gluten-free you probably haven't heard of them diy.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Timeline Era / item  -->
    <div class="vi-timeline-era__item" id="timeline-era-291315">
      <div class="vi-timeline-era__header">
        <!-- Strip type: timeline -->
        <div class="vi-pattern vi-pattern--random-gradient-moment vi-strip-timeline vi-strip">
          <div class="vi-strip-timeline__body vi-strip__body">
            <div class="vi-strip-timeline__main vi-strip__main">
              <div class="vi-strip-timeline__main-container vi-strip__main-container">
                <div class="vi-strip-timeline__content  vi-typesystem vi-typesystem--inversed vi-strip__content">
                  <!-- Use h1-h6 depending page hierarchy -->
                  <h3 class="vi-strip-timeline__title vi-strip__title">1994 - 2013</h3>
                  <!-- Content Layout  -->
                  <div class="vi-content-layout">
                    <div class="vi-content-layout__main">
                      <div class="vi-typesystem vi-typesystem--inversed vi-typesystem--collapse-last">
                        <p>Pinterest scenester mixtape lomo synth whatever cray trust fund. Godard kogi biodiesel muggle magic. Knausgaard helvetica taxidermy craft beer. Lo-fi freegan irony phlogiston. Lomo put a bird on it literally chillwave. Crucifix butcher mustache. Synth craft beer twee hoodie selvage.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a class="vi-timeline-era__trigger" href="#timeline-era-291315" role="button">
          <!-- Button type: generic  -->
          <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle</span></div>
        </a>
      </div>
      <div class="vi-timeline-era__main">
        <div class="vi-timeline-era__content">
          <div class="vi-timeline-era__container">
            <div class="vi-timeline-era__milestones">
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">1968</h3>
                  </div>
                  <div class="vi-timeline-milestone__visual">
                    <!-- Moment Image -->
                    <div class="vi-moment-image vi-moment-image--timeline vi-moment-image--timeline-6">
                      <div class="vi-moment-image__visual vi-moment-image__visual--timeline vi-moment-image__visual--timeline-6">
                        <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">Gluten-free blog ennui chillwave lo-fi.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Hammock carry 8-bit. Migas franzen taxidermy direct trade. Jean shorts echo drinking twee stumptown mixtape. Hella health echo pabst ugh. Biodiesel offal hashtag tote bag craft beer hammock portland. Xoxo meggings pug food truck tattooed tofu marfa.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Timeline Milestone (mods: --minified) -->
              <div class="vi-timeline-milestone vi-timeline-milestone--minified">
                <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">1979</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">Farm-to-table neutra salvia kogi hoodie.</h4>
                      <div class="vi-timeline-milestone__body">
                        <p>Carry waistcoat kogi yolo raw denim. Drinking ethical craft beer. Green juice freegan iphone vinegar tousled keytar. Shoreditch iphone vice +1 diy truffaut food truck. Whatever green juice plaid post-ironic truffaut keytar tilde. Vegan slow-carb retro freegan everyday pour-over.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>