Dark Activity Feed

← Gallery

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus numquam earum ipsa fugiat veniam suscipit.

1 Hour Ago

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus numquam earum ipsa fugiat veniam suscipit.

2 Hours Ago

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus numquam earum ipsa fugiat veniam suscipit.

6 Hours Ago

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus numquam earum ipsa fugiat veniam suscipit.

1 Day Ago

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus numquam earum ipsa fugiat veniam suscipit.

3 Days Ago

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam necessitatibus numquam earum ipsa fugiat veniam suscipit.

4 Days Ago

.vertical with .tl-card and .tl-label-badge on a dark container. The badge and dot color are both driven by --tl-color-accent per event — a single property threads the accent color through --tl-color-label and --tl-color-dot at once. --tl-color-dot-bg is set separately to make the dot solid. --tl-dot-icon-color: white on the container keeps emoji visible on colored dot backgrounds.

<style>
.ex-dark-feed {
  background: #1e1e2f;
  border-radius: 12px;
  padding: 2rem;

  --tl-color-line: #27293d;
  --tl-line-width: 4px;
  --tl-color-card-bg: #27293d;
  --tl-dot-icon-color: white;
}

.ex-dark-feed .tl-time {
  display: block;
  font-style: italic;
  opacity: 0.4;
  font-size: 0.7rem;
  margin-top: 0.75rem;
}
</style>

::: {.timeline .vertical .tl-label-badge .ex-dark-feed}
::: {.event data-label="Primary" data-dot="😉" .tl-card style="--tl-color-accent: #1d8cf8; --tl-color-dot-bg: #1d8cf8;"}
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

[1 Hour Ago]{.tl-time}
:::
::: {.event data-label="Danger" data-dot="😍" .tl-card style="--tl-color-accent: #fd5d93; --tl-color-dot-bg: #fd5d93;"}
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

[2 Hours Ago]{.tl-time}
:::
:::