Post Timeline

This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.

Usage

To use this include in your Jekyll theme, add the following line to your template:

<div class="mt-md-7 mb-9 mb-md-12">
  <div class="container-xl mx-auto p-responsive-blog">
<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html">
            Showcase Your Content with the Jekyll Timeline Feature
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Aug 08, 2024</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">news</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">includes</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Showcase Your Content with the Jekyll Timeline Feature" />
        </div>
        <div class="summary"> <p>In the world of web design, presentation is everything. Whether you’re a blogger, a developer, or a business owner, how you display your content can make a huge difference in engaging your audience. That’s where our Jekyll theme’s timeline feature comes in handy. Let’s dive into how this versatile tool can enhance your website and explore some exciting use cases.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/12/14/video.html">
            Empty post with video
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Dec 14, 2023</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div id="Timeline-video-container" class="image-container">
          <iframe id="Timeline-video" src="https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf" frameborder="0" height="inherited"
            width="inherited"></iframe>
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/11/21/empty.html">
            Empty post with image
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 21, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">sidebar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://www.allisonthackston.com/assets/img/cover-1920.jpg" width="800" height="425" alt="Empty post with image" />
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html">
            Post with custom background
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 20, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">background</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Post with custom background" />
        </div>
        <div class="summary"> <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html">
            This is a appbar post style
          </a>
        </div>
        <div class="authors-wrap text-bold mb-2 mr-3 ">George P. Burdell</div>
        <div class="text-gray mb-2 ws-normal">Nov 10, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">appbar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/10/hero-light.jpg" width="800" height="425" alt="This is a appbar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-sidebar.html">
            This is a sidebar post style
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">sidebar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png" width="800" height="425" alt="This is a sidebar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-sidebar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-stacked.html">
            This is a stacked post style
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">stacked</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png" width="800" height="425" alt="This is a stacked post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-stacked.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-topbar.html">
            This is a topbar post style
          </a>
        </div>
        <div class="authors-wrap text-bold mb-2 mr-3 ">George P. Burdell</div>
        <div class="text-gray mb-2 ws-normal">Jul 16, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">topbar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/10/hero-light.jpg" width="800" height="425" alt="This is a topbar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/07/16/post-topbar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2019/01/29/hello-world.html">
            Welcome to Jekyll!
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jan 29, 2019</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Welcome to Jekyll!" />
        </div>
        <div class="summary"> <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/examples/2019/01/29/hello-world.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html">
            Syntax highlighter
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Jan 29, 2019</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Syntax highlighter" />
        </div>
        <div class="summary"> <p>Below are some languages and their represntative styles.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

  </div>
</div>

Parameters

You can customize the behavior of this include by passing the following parameters:

Parameter	Default	Description
`collection`	`site.posts`	The collection of posts to display
`index`	None	The URL for the “View all” link
`limit`	None	Number of posts to display

Example with parameters:

<div class="mt-md-7 mb-9 mb-md-12">
  <div class="container-xl mx-auto p-responsive-blog">
<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html">
            Showcase Your Content with the Jekyll Timeline Feature
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Aug 08, 2024</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">news</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">includes</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Showcase Your Content with the Jekyll Timeline Feature" />
        </div>
        <div class="summary"> <p>In the world of web design, presentation is everything. Whether you’re a blogger, a developer, or a business owner, how you display your content can make a huge difference in engaging your audience. That’s where our Jekyll theme’s timeline feature comes in handy. Let’s dive into how this versatile tool can enhance your website and explore some exciting use cases.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/2024/08/08/timeline.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/12/14/video.html">
            Empty post with video
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Dec 14, 2023</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div id="Timeline-video-container" class="image-container">
          <iframe id="Timeline-video" src="https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf" frameborder="0" height="inherited"
            width="inherited"></iframe>
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/examples/2023/11/21/empty.html">
            Empty post with image
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 21, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">sidebar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://www.allisonthackston.com/assets/img/cover-1920.jpg" width="800" height="425" alt="Empty post with image" />
        </div>
        <div class="summary"> 
</div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html">
            Post with custom background
          </a>
        </div>
        <div class="text-gray mb-2 ws-normal">Nov 20, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">background</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="/assets/img/default.png" width="800" height="425" alt="Post with custom background" />
        </div>
        <div class="summary"> <p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/custom/2023/11/20/background.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

<div class="TimelineItem flex-wrap">
  <div class="col-12 col-md-5 position-relative">
    <div class="TimelineItem-title mt-5 position-sticky d-flex">
      <div class="TimelineItem-badge"><svg height="16" class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></div>
      <div class="title">
        <div class="h2">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html">
            This is a appbar post style
          </a>
        </div>
        <div class="authors-wrap text-bold mb-2 mr-3 ">George P. Burdell</div>
        <div class="text-gray mb-2 ws-normal">Nov 10, 2023</div>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">style</span>
        <span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">appbar</span>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-7">
    <div class="pb-5 pt-0 py-md-7 ml-5 border-bottom">
        <div class="image-container">
          <img class="rounded-2" src="https://github.blog/wp-content/uploads/2023/10/hero-light.jpg" width="800" height="425" alt="This is a appbar post style" />
        </div>
        <div class="summary"> <p>Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.</p>
</div>
        <div class="more">
          <a href="/jekyll-theme-profile/style/2023/11/10/post-appbar.html" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
            Contiue
            <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16"
              viewBox="0 0 16 16" fill="none">
              <path fill="currentColor"
                d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
              </path>
              <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
            </svg>
          </a>
        </div>
    </div>

  </div>
</div>

  </div>
  <div class="container-xl mx-auto p-responsive-blog mt-6 mt-md-8 ">
    <div class="d-flex gutter-spacious">
      <div class="col-12 col-md-7 offset-md-5">
        <a href="/jekyll-theme-profile/articles/"
          class="Link--primary arrow-target-mktg text-semibold btn ml-5">View all <svg height="16" class="octicon octicon-chevron-right" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a>
      </div>
    </div>
  </div>
</div>

Functionality

The include sets up initial variables based on the provided parameters or default values.
It sorts the collection by date in reverse order (newest first).
It creates a container for the timeline posts.
It iterates through the specified collection (limited by limit if set) and includes a post-timeline-card.html for each post.
If there are more posts in the collection than the displayed limit, it adds a “View all” link at the bottom.

Dependencies

This include file depends on:

post-timeline-card.html: Another include file that should define how each post card is displayed.
Octicons: The GitHub icon set, used for the chevron-right icon in the “View all” link.

Customization

To customize the appearance of the timeline:

Modify the CSS classes in this file to change the layout and spacing.
Edit the post-timeline-card.html include to change how individual posts are displayed.
Adjust the “View all” link text and styling as needed.

Notes

The collection parameter defaults to site.posts if not specified.
The limit parameter is optional. If not set, all posts in the collection will be displayed.
The index parameter is required for the “View all” link to function properly.
The relative_url filter is used for the “View all” link, which is a Jekyll filter for generating correct URLs in different site configurations.
The layout uses responsive design classes (container-xl, p-responsive-blog, etc.) for optimal display on various screen sizes.