<section class="section docs-section" id="timeline">
                  <h2 class="section-title">Timeline</h2>
                  <p class="docs-section-description">Timeline и Activity Log показывают историю событий, audit trail, job updates и системные изменения.</p>
                  <div class="block">
                    <ol class="timeline">
                      <li class="timeline-item timeline-item-success">
                        <span class="timeline-marker"><i class="ph ph-check-circle"></i></span>
                        <div class="timeline-content">
                          <article class="timeline-card">
                            <div class="timeline-header">
                              <h3 class="timeline-title">Build completed</h3>
                              <time class="timeline-time" datetime="2026-04-11T22:24:00">22:24</time>
                            </div>
                            <p class="timeline-text">Production bundle finished without warnings.</p>
                            <div class="timeline-meta">
                              <span class="chip chip-success">Done</span>
                              <span class="chip">CI</span>
                            </div>
                          </article>
                        </div>
                      </li>
                      <li class="timeline-item timeline-item-warning">
                        <span class="timeline-marker"><i class="ph ph-warning"></i></span>
                        <div class="timeline-content">
                          <article class="timeline-card">
                            <div class="timeline-header">
                              <h3 class="timeline-title">Review requested</h3>
                              <time class="timeline-time" datetime="2026-04-11T22:18:00">22:18</time>
                            </div>
                            <p class="timeline-text">Design tokens changed and need one visual pass before release.</p>
                            <div class="timeline-meta">
                              <span class="chip chip-warning">Review</span>
                            </div>
                          </article>
                        </div>
                      </li>
                      <li class="timeline-item">
                        <span class="timeline-marker"><i class="ph ph-git-commit"></i></span>
                        <div class="timeline-content">
                          <article class="timeline-card">
                            <div class="timeline-header">
                              <h3 class="timeline-title">Commit pushed</h3>
                              <time class="timeline-time" datetime="2026-04-11T22:10:00">22:10</time>
                            </div>
                            <p class="timeline-text">Component documentation and demo examples were updated.</p>
                          </article>
                        </div>
                      </li>
                    </ol>
                  </div>
                  <div class="block">
                    <div class="activity-log">
                      <div class="activity-log-row">
                        <time class="activity-log-time" datetime="2026-04-11T22:24:00">22:24</time>
                        <span class="activity-log-title">Build completed</span>
                        <span class="badge badge-success">Done</span>
                      </div>
                      <div class="activity-log-row">
                        <time class="activity-log-time" datetime="2026-04-11T22:18:00">22:18</time>
                        <span class="activity-log-title">Review requested</span>
                        <span class="badge badge-warning">Pending</span>
                      </div>
                      <div class="activity-log-row">
                        <time class="activity-log-time" datetime="2026-04-11T22:10:00">22:10</time>
                        <span class="activity-log-title">Commit pushed</span>
                        <span class="badge badge-secondary">Info</span>
                      </div>
                    </div>
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Timeline HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;ol class="timeline"&gt;
  &lt;li class="timeline-item timeline-item-success"&gt;
    &lt;span class="timeline-marker"&gt;&lt;i class="ph ph-check-circle"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;div class="timeline-content"&gt;
      &lt;article class="timeline-card"&gt;
        &lt;div class="timeline-header"&gt;
          &lt;h3 class="timeline-title"&gt;Build completed&lt;/h3&gt;
          &lt;time class="timeline-time" datetime="2026-04-11T22:24:00"&gt;22:24&lt;/time&gt;
        &lt;/div&gt;
        &lt;p class="timeline-text"&gt;Production bundle finished without warnings.&lt;/p&gt;
      &lt;/article&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ol&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Activity Log HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="activity-log"&gt;
  &lt;div class="activity-log-row"&gt;
    &lt;time class="activity-log-time" datetime="2026-04-11T22:24:00"&gt;22:24&lt;/time&gt;
    &lt;span class="activity-log-title"&gt;Build completed&lt;/span&gt;
    &lt;span class="badge badge-success"&gt;Done&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
</section>