ComponentesComponents

PreciosPricing

Tres planes en una tarjeta, con el del medio destacado.Three plans in one card, with the middle one highlighted.

DiseñoDesign: Tailark mist (MIT) · pricing/twoMITlanding · densidaddensity media · editorialMarkdownJSON

CódigoCode

<section class="s-pricing" aria-labelledby="pricing-title">
  <div class="s-pricing__inner">
    <div class="s-pricing__head">
      <h2 class="s-pricing__title" id="pricing-title" data-parte="titulo">Precios que crecen contigo</h2>
      <p class="s-pricing__lead" data-parte="frase">Elige el plan que necesitas hoy y cámbialo cuando quieras.</p>
    </div>
    <div class="s-pricing__wrap">
      <div class="s-pricing__card">
        <div class="s-pricing__grid">
          <div><div class="s-pricing__plan-head"><h3 class="s-pricing__plan" data-parte="plan1-nombre">Gratis</h3><span class="s-pricing__price" data-parte="plan1-precio">S/ 0 al mes</span><p class="s-pricing__per" data-parte="plan1-nota">Por persona</p></div><div class="s-pricing__cta"><a class="c-btn c-btn--secondary" href="#plan" data-parte="plan1-accion">Empezar</a></div><ul class="s-pricing__list" data-parte="plan1-lista"><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Panel de métricas</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>5 GB de almacenamiento</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Soporte por correo</li></ul></div>
          <div class="s-pricing__featured"><div class="s-pricing__featured-inner"><div class="s-pricing__plan-head"><h3 class="s-pricing__plan" data-parte="plan2-nombre">Pro</h3><span class="s-pricing__price" data-parte="plan2-precio">S/ 49 al mes</span><p class="s-pricing__per" data-parte="plan2-nota">Por persona</p></div><div class="s-pricing__cta"><a class="c-btn c-btn--primary" href="#plan" data-parte="plan2-accion">Empezar</a></div><ul class="s-pricing__list" data-parte="plan2-lista"><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Todo lo del plan Gratis</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>50 GB de almacenamiento</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Soporte por chat</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Dominio propio</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Plantillas premium</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Informes mensuales</li></ul></div></div>
          <div><div class="s-pricing__plan-head"><h3 class="s-pricing__plan" data-parte="plan3-nombre">Equipo</h3><span class="s-pricing__price" data-parte="plan3-precio">S/ 149 al mes</span><p class="s-pricing__per" data-parte="plan3-nota">Por persona</p></div><div class="s-pricing__cta"><a class="c-btn c-btn--secondary" href="#plan" data-parte="plan3-accion">Empezar</a></div><ul class="s-pricing__list" data-parte="plan3-lista"><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Todo lo del plan Pro</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Usuarios ilimitados</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Soporte prioritario</li></ul></div>
        </div>
      </div>
    </div>
  </div>
</section>

«Todo» trae tokens, dependencias y componente en un solo archivo, listo para abrir o dárselo a un agente.“All” bundles tokens, dependencies and the component in one file, ready to open or hand to an agent.

InstalaciónInstallation

  1. Agrega una vezAdd once tokens.css (colores, radios, tema oscuro).(colors, radii, dark theme).
  2. Agrega también:Also add: BotónButton.
  3. Copia los archivos:Copy the files: pricing.html, pricing.css.
  4. Para el tema oscuro, pon la claseFor the dark theme, add the class dark ento <html>.

Cuándo usarloWhen to use it

ÚsaloUse it

  • Para 2 o 3 planes con diferencias claras.
  • For 2 or 3 plans with clear differences.

Mejor noAvoid

  • Con más de 4 planes: usa una tabla comparativa.
  • With more than 4 plans: use a comparison table.

AccesibilidadAccessibility

region
  • Cada plan tiene su h3 y su lista de beneficios.
  • En pantallas angostas los planes se apilan (container queries).
  • Each plan has its h3 and list of benefits.
  • On narrow screens plans stack (container queries).

Cómo probarloHow to test it

  • En móvil, los tres planes quedan uno debajo del otro.
  • On mobile, the three plans stack vertically.

CréditosCredits