In the Etch community, a German developer, Michler, was showcasing a site he is working on in Etch. It is a great start, and I particularly liked the multi-part next event link. I decided to build it in Bricks (because you can do that) and then copy the CSS and the structure. It is still a work in progress to finalize the CSS. Once I build it out in Etch, I will update any changes.

Demo

Until I build it out on this site, here is a video version (or check out Michler’s site). The gradient is just so that you can see the background blur effect.

The CSS

Despite what you may think, you can use nested CSS in Bricks.

.upcoming {
  --sp: 1rem;
  --r: calc(var(--radius) * 3);
  display: flex;
  gap: var(--sp);
  padding: calc(var(--sp) / 2);
  border-radius: var(--r);
  font-size: calc(var(--text-s) - 2px);
  position: relative;
  isolation: isolate;
  background: var(--neutral-light-trans-50);
  backdrop-filter: blur(20px);
  transition: all 300ms ease-in-out;
  flex-wrap: wrap;

  & span,
  & a {
    border-radius: var(--radius-circle);
    background-color: var(--white);
    padding: 0 .5rem;
    display: flex;
    align-self: center;
    text-wrap: nowrap;
    border: 1px solid var(--neutral-trans-20);
  }

  & a {
    text-decoration: none;
    color: currentcolor;
    background-color: var(--neutral-light);
  }

  & svg {
    top: 50%;
    right: 98%;
    transform: translateY(-50%);
    position: absolute;
    opacity: 0;
    z-index: -1;
    display: block;
    transition: all 300ms ease-in-out;

    @media (width < 600px) {
      display: none;
    }
  }
}

@media (width > 600px) {
  .upcoming:hover {
    padding-inline-end: calc(var(--sp) * 4);

    & svg {

      right: calc(var(--sp) * 1.5);
      opacity: 1;

    }
  }
}

.dot {
  height: 5px;
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50vw;
  background: blue;
  margin-inline: .5em;
  align-self: center;
}
CSS

The HTML

Very simple structure.

<div class="upcoming">
<a class="clickable-parent upcoming__event" href="#">Something happening</a>
<span class="upcoming__date">Aug 17, 2025 <div class="dot"></div>  08:08 am</span>
<span class="upcoming__location">Anywhere USA</span>
<svg class="upcoming__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 256L352 416l-32 0 0-96L0 320 0 192l320 0 0-96 32 0L512 256z"></path></svg>
</div>
HTML