{{< card/web
  id="001"
  title="creation date visibility issue"
  date="01-feb-2026"
  url="https://chatgpt.com/c/697ec8c3-f6dc-8323-b325-dd951c042901"
>}}

<style>
.web-card {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between; /* space between top row and bottom */
  width: 80px;
  height: 120px;
  margin: 0.3em;
  border: 1px solid var(--muted-border);
  border-radius: 8px;
  padding: 4px;
  background: var(--box-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--fg);
}
.web-card:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 8px color-mix(
    in srgb,
    var(--fg) 20%,
    transparent
  );
}
.web-card .top-row {
  text-align: center;
}
.web-card .bottom-row {
  text-align: center;
}
.web-card .id {
  font-size: 0.75em;
  color:#fc4;
}
.web-card .url {
  font-size: 0.75em;
  color:#888;
}
.web-card .date {
  font-size: 0.75em;
  color:#4c4;
}
.web-card .title-wrapper {
  flex: 1;
  display: flex;
  align-items: center;      /* vertically center if short */
  justify-content: center;
  text-align: center;
  padding: 0 6px;
}
.web-card .title {
  font-weight: 600;
  font-size: 0.85em;
  line-height: 1.1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;    /* up to 5 lines */
  overflow: hidden;
  word-break: break-word;
}
</style>

<a class="web-card" href="{{ .Get "url" }}">
  <div class="top-row">
    <div class="id">{{ .Get "id" }}</div>
  </div>
  <div class="title-wrapper">
    <div class="title">{{ .Get "title" }}</div>
  </div>
  <div class="bottom-row">
    <div class="date">{{ .Get "date" }}</div>
  </div>
</a>