Timeline

Timelines can be used to display a series of events in a chronological order. They can be used to convey information about a project, a process, or a sequence of events.

Design Hints

Timelines are useful for displaying a series of events in a chronological order. They can be used to convey information about a project, a process, or a sequence of events. Timelines can be used to show the progress of a project, the timeline of a process, or the sequence of events that occurred over time.

Note: The timeline components below assume that the data sent as props is sorted beforehand. The timeline will work even otherwise, but it may not be as effective in conveying chronological information to the user.

Simple Timeline

A simple vertical time line with a list of events.

May 20, 2024
v1.0.0 Full Changelogs
- Added a new feature
- Fixed a bug
- Improved performance
Apr 10, 2024
v0.9.0 Full Changelogs
- Added a new feature
- Improved performance
Mar 11, 2024
v0.8.0 Full Changelogs
- Fixed a bug
Feb 10, 2024
v0.0.1 Full Changelogs
- Initial Release
- Fully Tested
- Documentation
- Ready for Production

<div
  class="flex w-full flex-wrap items-start justify-start justify-items-start px-5 py-2 text-gray-900 dark:text-gray-100"
>
  <div class="flex w-full flex-wrap">
    <ol class="w-full">
      <li class="relative flex items-center justify-center py-4">
        <div class="w-1/6 pl-2 pr-3 text-end">
          <time datetime="2024-05-20">May 20, 2024</time>
        </div>
        <div
          class="absolute left-[calc(100%/6)] top-1/2 flex h-[calc(60%)] w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="relative z-10 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900"
        ></div>
        <div
          class="ml-3 flex flex-grow flex-col rounded-lg border border-gray-400 p-4 dark:border-zinc-700"
        >
          <h2 class="mb-1 text-sm font-medium tracking-wider">
            v1.0.0
            <a
              class="ml-1 text-blue-600 hover:text-blue-700 dark:text-blue-400"
              href="#"
              >Full Changelogs</a
            >
          </h2>
          <div class="leading-relaxed">
            <ul class="list-inside list-disc text-sm md:text-base">
              <li>Added a new feature</li>
              <li>Fixed a bug</li>
              <li>Improved performance</li>
            </ul>
          </div>
        </div>
      </li>
      <li class="relative flex items-center justify-center py-4">
        <div class="w-1/6 pl-2 pr-3 text-end">
          <time datetime="2024-04-10">April 10, 2024</time>
        </div>
        <div
          class="absolute left-[calc(100%/6)] top-1/2 flex h-[calc(60%)] w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="absolute bottom-1/2 left-[calc(100%/6)] flex h-[calc(60%)] w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="relative z-10 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900"
        ></div>
        <div
          class="ml-3 flex flex-grow flex-col rounded-lg border border-gray-400 p-4 dark:border-zinc-700"
        >
          <h2 class="mb-1 text-sm font-medium tracking-wider">
            v0.9.0
            <a
              class="ml-1 text-blue-600 hover:text-blue-700 dark:text-blue-400"
              href="#"
              >Full Changelogs</a
            >
          </h2>
          <div class="leading-relaxed">
            <ul class="list-inside list-disc text-sm md:text-base">
              <li>Added a new feature</li>
              <li>Improved performance</li>
            </ul>
          </div>
        </div>
      </li>
      <li class="relative flex items-center justify-center py-4">
        <div class="w-1/6 pl-2 pr-3 text-end">
          <time datetime="2024-03-11">March 11, 2024</time>
        </div>
        <div
          class="absolute left-[calc(100%/6)] top-1/2 flex h-[calc(60%)] w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="absolute bottom-1/2 left-[calc(100%/6)] flex h-[calc(60%)] w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="relative z-10 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900"
        ></div>
        <div
          class="ml-3 flex flex-grow flex-col rounded-lg border border-gray-400 p-4 dark:border-zinc-700"
        >
          <h2 class="mb-1 text-sm font-medium tracking-wider">
            v0.8.0
            <a
              class="ml-1 text-blue-600 hover:text-blue-700 dark:text-blue-400"
              href="#"
              >Full Changelogs</a
            >
          </h2>
          <div class="leading-relaxed">
            <ul class="list-inside list-disc text-sm md:text-base">
              <li>Fixed a bug</li>
            </ul>
          </div>
        </div>
      </li>

      <li class="relative flex items-center justify-center py-4">
        <div class="w-1/6 pl-2 pr-3 text-end">
          <time datetime="2024-02-10">February 10, 2024</time>
        </div>
        <div
          class="absolute bottom-1/2 left-[calc(100%/6)] flex h-[calc(60%)] w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="relative z-10 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900"
        ></div>
        <div
          class="ml-3 flex flex-grow flex-col rounded-lg border border-gray-400 p-4 dark:border-zinc-700"
        >
          <h2 class="mb-1 text-sm font-medium tracking-wider">
            v0.0.1
            <a
              class="ml-1 text-blue-600 hover:text-blue-700 dark:text-blue-400"
              href="#"
              >Full Changelogs</a
            >
          </h2>
          <div class="leading-relaxed">
            <ul class="list-inside list-disc text-sm md:text-base">
              <li>Initial Release</li>
              <li>Fully Tested</li>
              <li>Documentation</li>
              <li>Ready for Production</li>
            </ul>
          </div>
        </div>
      </li>
    </ol>
  </div>
</div>

---
const timelineData = [
  {
    date: "2024-05-20",
    version: "v1.0.0",
    changelogUrl: "#",
    changes: ["Added a new feature", "Fixed a bug", "Improved performance"],
  },
  {
    date: "2024-04-10",
    version: "v0.9.0",
    changelogUrl: "#",
    changes: ["Added a new feature", "Improved performance"],
  },
  {
    date: "2024-03-11",
    version: "v0.8.0",
    changelogUrl: "#",
    changes: ["Fixed a bug"],
  },
  {
    date: "2024-02-10",
    version: "v0.0.1",
    changelogUrl: "#",
    changes: [
      "Initial Release",
      "Fully Tested",
      "Documentation",
      "Ready for Production",
    ],
  },
];
/**
To accept these as props you can use the following syntax:

interface TimelineEntry {
  date: string;
  version: string;
  changelogUrl: string;
  changes: string[];
  }
  interface TimelineData {
    timelineData: TimelineEntry[];
  }
  const { timelineData } = Astro.props as TimelineData;

  To call the component you can use the following syntax:
  ---
  import SimpleTimeline from "path/to/components/SimpleTimeline.astro";
  // Fetch data from a file or API. Or use a static array of data similar to the one above.
  ---
  <SimpleTimeline timelineData={timelineData} />
 */
---

<div
  class="flex w-full flex-wrap items-start justify-start justify-items-start py-2 text-gray-900 md:px-5 dark:text-gray-100"
>
  <div class="flex w-full flex-wrap">
    <ol class="w-full">
      {
        timelineData.map((item, index) => (
          <li class="relative flex items-center justify-center py-4">
            <div class="w-1/6 pl-2 pr-3 text-end text-sm md:text-base">
              <time datetime={item.date}>
                {new Date(item.date).toLocaleDateString("en-US", {
                  day: "numeric",
                  month: "short",
                  year: "numeric",
                })}
              </time>
            </div>
            {index !== timelineData.length - 1 && (
              <div class="absolute left-[calc(100%/6)] top-1/2 flex h-[calc(60%)] w-3 items-center justify-center">
                <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900" />
              </div>
            )}
            {index !== 0 && (
              <div class="absolute bottom-1/2 left-[calc(100%/6)] flex h-[calc(60%)] w-3 items-center justify-center">
                <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900" />
              </div>
            )}
            <div class="relative z-10 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900" />
            <div class="ml-3 flex flex-grow flex-col rounded-lg border border-gray-400 p-4 dark:border-zinc-800">
              <h2 class="mb-1 text-sm font-medium tracking-wider">
                {item.version}
                <a
                  class="ml-1 text-blue-600 hover:text-blue-700 dark:text-blue-400"
                  href={item.changelogUrl}
                >
                  Full Changelogs
                </a>
              </h2>
              <div class="leading-relaxed">
                <ul class="list-inside list-disc text-sm md:text-base">
                  {item.changes.map((change) => (
                    <li>{change}</li>
                  ))}
                </ul>
              </div>
            </div>
          </li>
        ))
      }
    </ol>
  </div>
</div>

Timeline with Collapsible Event Descriptions

A simple timeline with collapsible event descriptions.

May 20, 2024
v1.0.0
- Added a new feature
- Fixed a bug
- Improved performance
Full Changelogs
Apr 10, 2024
v0.9.0
- Added a new feature
- Improved performance
Full Changelogs
Mar 11, 2024
v0.8.0
- Fixed a bug
Full Changelogs
Feb 10, 2024
v0.0.1
- Initial Release
- Fully Tested
- Documentation
- Ready for Production
Full Changelogs

<div
  class="flex w-full flex-wrap items-start justify-start justify-items-start px-5 py-2 text-gray-900 dark:text-gray-100"
>
  <div class="flex w-full flex-wrap">
    <ol class="w-full">
      <li class="relative flex items-center justify-center py-4">
        <div class="w-1/6 pl-2 pr-3 text-end text-sm md:text-base">
          <time datetime="2024-05-20">May 20, 2024</time>
        </div>
        <div
          class="absolute left-[calc(100%/6)] top-1/2 flex h-[calc(60%)] w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="relative z-10 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900"
        ></div>
        <details
          class="group ml-3 flex flex-grow flex-col overflow-hidden rounded-lg border border-gray-400 dark:border-zinc-800"
          name="collapseTimeline"
        >
          <summary
            class="flex cursor-pointer items-center justify-between bg-gray-100 px-3 py-3 text-zinc-900 group-open:bg-gray-200 dark:bg-zinc-950 dark:text-zinc-300 dark:group-open:bg-zinc-900"
          >
            <span class="text-base font-semibold">v1.0.0</span>
            <svg
              class="h-5 w-5 shrink-0 group-open:-rotate-180 motion-safe:transition motion-safe:duration-300"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              ></path>
            </svg>
          </summary>
          <div class="px-4 py-3 leading-relaxed">
            <ul class="mb-2 list-inside list-disc text-sm md:text-base">
              <li>Added a new feature</li>
              <li>Fixed a bug</li>
              <li>Improved performance</li>
            </ul>
            <a
              class="text-sm text-blue-600 hover:text-blue-700 md:text-base dark:text-blue-400"
              href="#"
              >Full Changelogs</a
            >
          </div>
        </details>
      </li>
      <li class="relative flex items-center justify-center py-4">
        <div class="w-1/6 pl-2 pr-3 text-end text-sm md:text-base">
          <time datetime="2024-04-10">April 10, 2024</time>
        </div>
        <div
          class="absolute left-[calc(100%/6)] top-1/2 flex h-[calc(60%)] w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="absolute bottom-1/2 left-[calc(100%/6)] flex h-[calc(60%)] w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="relative z-10 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900"
        ></div>
        <details
          class="group ml-3 flex flex-grow flex-col overflow-hidden rounded-lg border border-gray-400 dark:border-zinc-800"
          name="collapseTimeline"
        >
          <summary
            class="flex cursor-pointer items-center justify-between bg-gray-100 px-3 py-3 text-zinc-900 group-open:bg-gray-200 dark:bg-zinc-950 dark:text-zinc-300 dark:group-open:bg-zinc-900"
          >
            <span class="text-base font-semibold">v0.9.0</span>
            <svg
              class="h-5 w-5 shrink-0 group-open:-rotate-180 motion-safe:transition motion-safe:duration-300"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              ></path>
            </svg>
          </summary>
          <div class="px-4 py-3 leading-relaxed">
            <ul class="mb-2 list-inside list-disc text-sm md:text-base">
              <li>Added a new feature</li>
              <li>Improved performance</li>
            </ul>
            <a
              class="text-sm text-blue-600 hover:text-blue-700 md:text-base dark:text-blue-400"
              href="#"
              >Full Changelogs</a
            >
          </div>
        </details>
      </li>
      <li class="relative flex items-center justify-center py-4">
        <div class="w-1/6 pl-2 pr-3 text-end text-sm md:text-base">
          <time datetime="2024-03-11">March 11, 2024</time>
        </div>
        <div
          class="absolute left-[calc(100%/6)] top-1/2 flex h-[calc(60%)] w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="absolute bottom-1/2 left-[calc(100%/6)] flex h-[calc(60%)] w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="relative z-10 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900"
        ></div>
        <details
          class="group ml-3 flex flex-grow flex-col overflow-hidden rounded-lg border border-gray-400 dark:border-zinc-800"
          name="collapseTimeline"
        >
          <summary
            class="flex cursor-pointer items-center justify-between bg-gray-100 px-3 py-3 text-zinc-900 group-open:bg-gray-200 dark:bg-zinc-950 dark:text-zinc-300 dark:group-open:bg-zinc-900"
          >
            <span class="text-base font-semibold">v0.8.0</span>
            <svg
              class="h-5 w-5 shrink-0 group-open:-rotate-180 motion-safe:transition motion-safe:duration-300"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              ></path>
            </svg>
          </summary>
          <div class="px-4 py-3 leading-relaxed">
            <ul class="mb-2 list-inside list-disc text-sm md:text-base">
              <li>Fixed a bug</li>
            </ul>
            <a
              class="text-sm text-blue-600 hover:text-blue-700 md:text-base dark:text-blue-400"
              href="#"
              >Full Changelogs</a
            >
          </div>
        </details>
      </li>
      <li class="relative flex items-center justify-center py-4">
        <div class="w-1/6 pl-2 pr-3 text-end text-sm md:text-base">
          <time datetime="2024-02-10">February 10, 2024</time>
        </div>
        <div
          class="absolute bottom-1/2 left-[calc(100%/6)] flex h-[calc(60%)] w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="relative z-10 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900"
        ></div>
        <details
          class="group ml-3 flex flex-grow flex-col overflow-hidden rounded-lg border border-gray-400 dark:border-zinc-800"
          name="collapseTimeline"
        >
          <summary
            class="flex cursor-pointer items-center justify-between bg-gray-100 px-3 py-3 text-zinc-900 group-open:bg-gray-200 dark:bg-zinc-950 dark:text-zinc-300 dark:group-open:bg-zinc-900"
          >
            <span class="text-base font-semibold">v0.0.1</span>
            <svg
              class="h-5 w-5 shrink-0 group-open:-rotate-180 motion-safe:transition motion-safe:duration-300"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 9l-7 7-7-7"
              ></path>
            </svg>
          </summary>
          <div class="px-4 py-3 leading-relaxed">
            <ul class="mb-2 list-inside list-disc text-sm md:text-base">
              <li>Initial Release</li>
              <li>Fully Tested</li>
              <li>Documentation</li>
              <li>Ready for Production</li>
            </ul>
            <a
              class="text-sm text-blue-600 hover:text-blue-700 md:text-base dark:text-blue-400"
              href="#"
              >Full Changelogs</a
            >
          </div>
        </details>
      </li>
    </ol>
  </div>
</div>

---
const timelineData = [
  {
    date: "2024-05-20",
    version: "v1.0.0",
    changelogUrl: "#",
    changes: ["Added a new feature", "Fixed a bug", "Improved performance"],
  },
  {
    date: "2024-04-10",
    version: "v0.9.0",
    changelogUrl: "#",
    changes: ["Added a new feature", "Improved performance"],
  },
  {
    date: "2024-03-11",
    version: "v0.8.0",
    changelogUrl: "#",
    changes: ["Fixed a bug"],
  },
  {
    date: "2024-02-10",
    version: "v0.0.1",
    changelogUrl: "#",
    changes: [
      "Initial Release",
      "Fully Tested",
      "Documentation",
      "Ready for Production",
    ],
  },
];
const timeLineName = "collapseTimeline";
/**
To accept these as props you can use the following syntax:

interface TimelineEntry {
  date: string;
  version: string;
  changelogUrl: string;
  changes: string[];
  }
  interface TimelineData {
    timelineData: TimelineEntry[];
    timeLineName: string;
  }
  const { timelineData, timeLineName } = Astro.props as TimelineData;

  To call the component you can use the following syntax:
  ---
  import CollapseTimeline from "path/to/components/CollapseTimeline.astro";
  // Fetch data from a file or API. Or use a static array of data similar to the one above.
  ---
  <CollapseTimeline timelineData={timelineData} />
 */
---

<div
  class="flex w-full flex-wrap items-start justify-start justify-items-start px-5 py-2 text-gray-900 dark:text-gray-100"
>
  <div class="flex w-full flex-wrap">
    <ol class="w-full">
      {
        timelineData.map((item, index) => (
          <li class="relative flex items-center justify-center py-4">
            <div class="w-1/6 pl-2 pr-3 text-end text-sm md:text-base">
              <time datetime={item.date}>
                {new Date(item.date).toLocaleDateString("en-US", {
                  day: "numeric",
                  month: "short",
                  year: "numeric",
                })}
              </time>
            </div>
            {index !== timelineData.length - 1 && (
              <div class="absolute left-[calc(100%/6)] top-1/2 flex h-[calc(60%)] w-3 items-center justify-center">
                <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900" />
              </div>
            )}
            {index !== 0 && (
              <div class="absolute bottom-1/2 left-[calc(100%/6)] flex h-[calc(60%)] w-3 items-center justify-center">
                <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900" />
              </div>
            )}
            <div class="relative z-10 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900" />
            <details
              class="group ml-3 flex flex-grow flex-col overflow-hidden rounded-lg border border-gray-400 dark:border-zinc-800"
              name={timeLineName}
            >
              <summary class="flex cursor-pointer items-center justify-between bg-gray-100 px-3 py-3 text-zinc-900 group-open:bg-gray-200 dark:bg-zinc-950 dark:text-zinc-300 dark:group-open:bg-zinc-900">
                <span class="text-base font-semibold"> {item.version}</span>
                <svg
                  class="h-5 w-5 shrink-0 group-open:-rotate-180 motion-safe:transition motion-safe:duration-300"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </summary>
              <div class="px-4 py-3 leading-relaxed">
                <ul class="mb-2 list-inside list-disc text-sm md:text-base">
                  {item.changes.map((change) => (
                    <li>{change}</li>
                  ))}
                </ul>
                <a
                  class="text-sm text-blue-600 hover:text-blue-700 md:text-base dark:text-blue-400"
                  href={item.changelogUrl}
                >
                  Full Changelogs
                </a>
              </div>
            </details>
          </li>
        ))
      }
    </ol>
  </div>
</div>

Alternate Timeline

An alternate style for timelines.

May 20, 2024
v1.0.0 Full Changelogs
- Added a new feature
- Fixed a bug
- Improved performance
April 10, 2024
v0.9.0 Full Changelogs
- Added a new feature
- Improved performance
March 11, 2024
v0.8.0 Full Changelogs
- Fixed a bug
February 10, 2024
v0.0.1 Full Changelogs
- Initial Release
- Fully Tested
- Documentation
- Ready for Production

<div
  class="flex w-full flex-wrap items-start justify-start justify-items-start px-5 py-2 text-gray-900 dark:text-gray-100"
>
  <div class="flex w-full flex-wrap">
    <ol class="w-full">
      <li class="relative flex items-start justify-center py-4">
        <div
          class="absolute left-0 top-6 flex h-full w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>
        <div
          class="relative z-10 mt-2 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900"
        ></div>
        <div class="ml-3 flex flex-grow flex-col">
          <time
            class="text-lg text-indigo-600 dark:text-indigo-400"
            datetime="2024-05-20"
            >May 20, 2024</time
          >
          <h2 class="my-1 ml-6 text-sm font-medium tracking-wider">
            v1.0.0
            <a
              class="ml-1 text-blue-600 hover:text-blue-700 dark:text-blue-400"
              href="#"
              >Full Changelogs</a
            >
          </h2>
          <div class="ml-6 leading-relaxed">
            <ul class="list-inside list-disc text-sm md:text-base">
              <li>Added a new feature</li>
              <li>Fixed a bug</li>
              <li>Improved performance</li>
            </ul>
          </div>
        </div>
      </li>
      <li class="relative flex items-start justify-center py-4">
        <div
          class="absolute left-0 top-6 flex h-full w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>

        <div
          class="relative z-10 mt-2 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900"
        ></div>
        <div class="ml-3 flex flex-grow flex-col">
          <time
            class="text-lg text-indigo-600 dark:text-indigo-400"
            datetime="2024-04-10"
            >April 10, 2024</time
          >
          <h2 class="my-1 ml-6 text-sm font-medium tracking-wider">
            v0.9.0
            <a
              class="ml-1 text-blue-600 hover:text-blue-700 dark:text-blue-400"
              href="#"
              >Full Changelogs</a
            >
          </h2>
          <div class="ml-6 leading-relaxed">
            <ul class="list-inside list-disc text-sm md:text-base">
              <li>Added a new feature</li>
              <li>Improved performance</li>
            </ul>
          </div>
        </div>
      </li>
      <li class="relative flex items-start justify-center py-4">
        <div
          class="absolute left-0 top-6 flex h-full w-3 items-center justify-center"
        >
          <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900"></div>
        </div>

        <div
          class="relative z-10 mt-2 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900"
        ></div>
        <div class="ml-3 flex flex-grow flex-col">
          <time
            class="text-lg text-indigo-600 dark:text-indigo-400"
            datetime="2024-03-11"
            >March 11, 2024</time
          >
          <h2 class="my-1 ml-6 text-sm font-medium tracking-wider">
            v0.8.0
            <a
              class="ml-1 text-blue-600 hover:text-blue-700 dark:text-blue-400"
              href="#"
              >Full Changelogs</a
            >
          </h2>
          <div class="ml-6 leading-relaxed">
            <ul class="list-inside list-disc text-sm md:text-base">
              <li>Fixed a bug</li>
            </ul>
          </div>
        </div>
      </li>

      <li class="relative flex items-start justify-center py-4">
        <div
          class="relative z-10 mt-2 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900"
        ></div>
        <div class="ml-3 flex flex-grow flex-col">
          <time
            class="text-lg text-indigo-600 dark:text-indigo-400"
            datetime="2024-02-10"
            >February 10, 2024</time
          >
          <h2 class="my-1 ml-6 text-sm font-medium tracking-wider">
            v0.0.1
            <a
              class="ml-1 text-blue-600 hover:text-blue-700 dark:text-blue-400"
              href="#"
              >Full Changelogs</a
            >
          </h2>
          <div class="ml-6 leading-relaxed">
            <ul class="list-inside list-disc text-sm md:text-base">
              <li>Initial Release</li>
              <li>Fully Tested</li>
              <li>Documentation</li>
              <li>Ready for Production</li>
            </ul>
          </div>
        </div>
      </li>
    </ol>
  </div>
</div>

---
const timelineData = [
  {
    date: "2024-05-20",
    version: "v1.0.0",
    changelogUrl: "#",
    changes: ["Added a new feature", "Fixed a bug", "Improved performance"],
  },
  {
    date: "2024-04-10",
    version: "v0.9.0",
    changelogUrl: "#",
    changes: ["Added a new feature", "Improved performance"],
  },
  {
    date: "2024-03-11",
    version: "v0.8.0",
    changelogUrl: "#",
    changes: ["Fixed a bug"],
  },
  {
    date: "2024-02-10",
    version: "v0.0.1",
    changelogUrl: "#",
    changes: [
      "Initial Release",
      "Fully Tested",
      "Documentation",
      "Ready for Production",
    ],
  },
];
/**
To accept these as props you can use the following syntax:

interface TimelineEntry {
  date: string;
  version: string;
  changelogUrl: string;
  changes: string[];
  }
  interface TimelineData {
    timelineData: TimelineEntry[];
  }
  const { timelineData } = Astro.props as TimelineData;

  To call the component you can use the following syntax:
  ---
  import AltTimeline from "path/to/components/AltTimeline.astro";
  // Fetch data from a file or API. Or use a static array of data similar to the one above.
  ---
  <AltTimeline timelineData={timelineData} />
 */
---

<div
  class="flex w-full flex-wrap items-start justify-start justify-items-start px-5 py-2 text-gray-900 dark:text-gray-100"
>
  <div class="flex w-full flex-wrap">
    <ol class="w-full">
      {
        timelineData.map((item, index) => (
          <li class="relative flex items-start justify-center py-4">
            {index !== timelineData.length - 1 && (
              <div class="absolute left-0 top-6 flex h-full w-3 items-center justify-center">
                <div class="h-full w-[2px] bg-indigo-400 dark:bg-indigo-900" />
              </div>
            )}

            <div class="relative z-10 mt-2 h-3 w-3 items-center justify-center rounded-full bg-indigo-400 dark:bg-indigo-900" />
            <div class="ml-3 flex flex-grow flex-col">
              <time
                class="text-lg text-indigo-600 dark:text-indigo-400"
                datetime={item.date}
              >
                {new Date(item.date).toLocaleDateString("en-US", {
                  day: "numeric",
                  month: "long",
                  year: "numeric",
                })}
              </time>
              <h2 class="my-1 ml-6 text-sm font-medium tracking-wider">
                {item.version}
                <a
                  class="ml-1 text-blue-600 hover:text-blue-700 dark:text-blue-400"
                  href={item.changelogUrl}
                >
                  Full Changelogs
                </a>
              </h2>
              <div class="ml-6 leading-relaxed">
                <ul class="list-inside list-disc text-sm md:text-base">
                  {item.changes.map((change) => (
                    <li>{change}</li>
                  ))}
                </ul>
              </div>
            </div>
          </li>
        ))
      }
    </ol>
  </div>
</div>

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Simple Timeline	Yes	Yes	Yes	Yes	Yes
Collapse Timeline	Yes	Yes	Yes	Yes	Yes
Alt Timeline	Yes	Yes	Yes	Yes	Yes

While there is no pattern for timelines by the authoring practice guide from w3c, the components above follow standard practices for accessibility for displaying the content.

Timeline

Simple Timeline

v1.0.0 Full Changelogs

v0.9.0 Full Changelogs

v0.8.0 Full Changelogs

v0.0.1 Full Changelogs