# Fila de tienda de apps (C 097)

Categoría: Tarjetas  
Etiquetas: app, install, icon, rating, light, row  
Página: https://designforai.dev/es/snippet/card-097

## Prompt

Construye una tarjeta fila estilo tienda de apps de 340px: blanca, radio 16px, padding 12px 14px, sombra tenue que se intensifica en hover. A la izquierda un icono de app de 60px con radio 14px y un degradado a 135deg de #ff9f0a a #ff375f con un borde inset finísimo. En medio: nombre de app 15px bold sobre una línea 12px #8e8e93 "Productivity · 4.8 ★ (2.1k)". A la derecha un botón píldora "GET" en texto azul #007aff sobre #f2f2f7 que se rellena de azul con texto blanco en hover.

## HTML

```html
<article class="card-097">
  <span class="card-097__icon"></span>
  <div class="card-097__text"><b>Focus Timer</b><span>Productivity · 4.8 ★ (2.1k)</span></div>
  <a href="#">Get</a>
</article>
```

## CSS

```css
.card-097 {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 340px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 16px;
  font-family: system-ui,sans-serif;
  color: #1c1c1e;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: box-shadow .2s
}
.card-097:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.12)
}
.card-097__icon {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg,#ff9f0a,#ff375f);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06)
}
.card-097__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px
}
.card-097 b {
  font-size: 15px
}
.card-097__text span {
  font-size: 12px;
  color: #8e8e93
}
.card-097 a {
  padding: 6px 18px;
  border-radius: 999px;
  background: #f2f2f7;
  color: #007aff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .15s,color .15s
}
.card-097 a:hover {
  background: #007aff;
  color: #fff
}
.card-097 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```