# Fila con media izquierda (C 006)

Categoría: Tarjetas  
Etiquetas: horizontal, media-left, light, hover-lift  
Página: https://designforai.dev/es/snippet/card-006

## Prompt

Construye una tarjeta horizontal de 460px como fila flex: fondo blanco, borde 1px #e4e4e7, radio 14px. A la izquierda una columna de imagen fija de 150px de ancho rellena con un degradado a 145deg de #fde68a a #f59e0b. Cuerpo derecho con padding 18px 20px: título 17px #18181b, texto 14px #52525b, luego un enlace 13px semibold en #b45309. En hover añade sombra 0 8px 24px rgba(0,0,0,.1).

## HTML

```html
<article class="card-006">
  <div class="card-006__img"></div>
  <div class="card-006__body">
    <h3>Typography audit checklist</h3>
    <p>Twelve checks before you ship a type scale.</p>
    <a href="#">Open checklist</a>
  </div>
</article>
```

## CSS

```css
.card-006 {
  display: flex;
  width: 460px;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  overflow: hidden;
  font-family: system-ui,sans-serif;
  color: #18181b;
  transition: box-shadow .2s
}
.card-006:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.1)
}
.card-006__img {
  flex: 0 0 150px;
  background: linear-gradient(145deg,#fde68a,#f59e0b)
}
.card-006__body {
  padding: 18px 20px
}
.card-006 h3 {
  margin: 0 0 6px;
  font-size: 17px
}
.card-006 p {
  margin: 0 0 12px;
  font-size: 14px;
  color: #52525b
}
.card-006 a {
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
  text-decoration: none
}
.card-006 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```