# Data grande (C 056)

Categoria: Cards  
Tags: event, date, calendar, big-number, light  
Página: https://designforai.dev/pt/snippet/card-056

## Prompt

Construa um card de evento de 360px como uma linha flex: branco, borda de 1px #e5e7eb, raio de 16px. À esquerda uma coluna de data fixa de 92px em laranja pálido #fff7ed com borda direita de 1px #fed7aa, mostrando o número do dia "24" em 40px extra-bold sobre o mês em caixa alta 12px "Oct", ambos em #c2410c. Corpo à direita com padding 18px 20px: título do evento 17px, linha de horário e local 13px #6b7280, e um link bold 13px "Save my seat" em #c2410c. O card ganha sombra 0 10px 30px rgba(0,0,0,.08) no hover.

## HTML

```html
<article class="card-056">
  <div class="card-056__date"><b>24</b><span>Oct</span></div>
  <div class="card-056__body">
    <h3>Design systems meetup</h3>
    <p>18:30 · Kreuzberg, Berlin</p>
    <a href="#">Save my seat</a>
  </div>
</article>
```

## CSS

```css
.card-056 {
  display: flex;
  width: 360px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  font-family: system-ui,sans-serif;
  color: #111827;
  transition: box-shadow .2s
}
.card-056:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.08)
}
.card-056__date {
  flex: 0 0 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff7ed;
  border-right: 1px solid #fed7aa;
  color: #c2410c
}
.card-056__date b {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em
}
.card-056__date span {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em
}
.card-056__body {
  padding: 18px 20px
}
.card-056 h3 {
  margin: 0 0 4px;
  font-size: 17px
}
.card-056 p {
  margin: 0 0 12px;
  font-size: 13px;
  color: #6b7280
}
.card-056 a {
  font-size: 13px;
  font-weight: 700;
  color: #c2410c;
  text-decoration: none
}
.card-056 a:hover {
  text-decoration: underline
}
.card-056 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```