Design for AILinha do tempo de releases
Linha do tempo de releases: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Release history
- v2.0Container query support
- v1.4Dark mode tokens
- v1.0First public release
CSS
.card-046 {
width: 300px;
padding: 22px 24px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
font-family: system-ui,sans-serif;
color: #111827
}
.card-046 h3 {
margin: 0 0 16px;
font-size: 16px
}
.card-046 ol {
position: relative;
margin: 0;
padding: 0 0 0 22px;
list-style: none
}
.card-046 ol::before {
content: "";
position: absolute;
left: 5px;
top: 6px;
bottom: 6px;
width: 2px;
background: #e5e7eb
}
.card-046 li {
position: relative;
padding-bottom: 18px;
display: flex;
flex-direction: column
}
.card-046 li:last-child {
padding-bottom: 0
}
.card-046 li::before {
content: "";
position: absolute;
left: -22px;
top: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
border: 2px solid #6366f1;
box-sizing: border-box
}
.card-046 li:first-child::before {
background: #6366f1;
box-shadow: 0 0 0 4px rgba(99,102,241,.2)
}
.card-046 b {
font-size: 14px
}
.card-046 li span {
font-size: 13px;
color: #4b5563
}
.card-046 time {
font-size: 11px;
color: #9ca3af;
margin-top: 2px
}
HTML
<article class="card-046">
<h3>Release history</h3>
<ol>
<li><b>v2.0</b><span>Container query support</span><time>Sep 2026</time></li>
<li><b>v1.4</b><span>Dark mode tokens</span><time>Jun 2026</time></li>
<li><b>v1.0</b><span>First public release</span><time>Feb 2026</time></li>
</ol>
</article>Prompt
Construa um card de linha do tempo de 300px: branco, borda de 1px #e5e7eb, raio de 16px, padding 22px 24px. Um título de 16px, depois uma lista ordenada com uma linha vertical de 2px #e5e7eb à esquerda e um marcador circular de 12px por item (branco com anel de 2px índigo #6366f1; o primeiro item é preenchido em índigo com um halo translúcido de 4px). Cada item empilha uma versão 14px bold, uma descrição 13px #4b5563 e uma data 11px #9ca3af, com 18px entre itens.