# Pricing / Precios > Three plans in one card, with the middle one highlighted. Page: https://componentes-lovat.vercel.app/c/pricing/ License: MIT · Design: Tailark mist (MIT) · pricing/two Requires: tokens.css, button Context: landing · Density: media · Tone: editorial ## Files - Tokens (once): https://componentes-lovat.vercel.app/tokens.css - Dependency `button`: https://componentes-lovat.vercel.app/r/button.json - HTML: https://componentes-lovat.vercel.app/raw/pricing/pricing.html - CSS: https://componentes-lovat.vercel.app/raw/pricing/pricing.css - Everything in one file: https://componentes-lovat.vercel.app/r/pricing.html Dark theme: add class `dark` to ``. ## When to use - For 2 or 3 plans with clear differences. ## When not to use - With more than 4 plans: use a comparison table. ## Accessibility Roles: region - Each plan has its h3 and list of benefits. - On narrow screens plans stack (container queries). ## Editable parts Marked with `data-parte` in the HTML. - `titulo` (texto): Headline - `frase` (texto) · can be hidden: Subtitle - `plan1-nombre` (texto): Plan 1 · name - `plan1-precio` (texto): Plan 1 · price - `plan1-nota` (texto) · can be hidden: Plan 1 · note - `plan1-accion` (accion): Plan 1 · button - `plan1-lista` (lista) · can be hidden: Plan 1 · features - `plan2-nombre` (texto): Plan 2 (featured) · name - `plan2-precio` (texto): Plan 2 (featured) · price - `plan2-nota` (texto) · can be hidden: Plan 2 (featured) · note - `plan2-accion` (accion): Plan 2 (featured) · button - `plan2-lista` (lista) · can be hidden: Plan 2 (featured) · features - `plan3-nombre` (texto): Plan 3 · name - `plan3-precio` (texto): Plan 3 · price - `plan3-nota` (texto) · can be hidden: Plan 3 · note - `plan3-accion` (accion): Plan 3 · button - `plan3-lista` (lista) · can be hidden: Plan 3 · features ## Code ```html

Precios que crecen contigo

Elige el plan que necesitas hoy y cámbialo cuando quieras.

Gratis

S/ 0 al mes

Por persona

Empezar

Panel de métricas
5 GB de almacenamiento
Soporte por correo

Pro

S/ 49 al mes

Por persona

Empezar

Todo lo del plan Gratis
50 GB de almacenamiento
Soporte por chat
Dominio propio
Plantillas premium
Informes mensuales

Equipo

S/ 149 al mes

Por persona

Empezar

Todo lo del plan Pro
Usuarios ilimitados
Soporte prioritario

``` ```css /* pricing · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI). Generado por tools/build_css.py desde pricing.tw.json. No editar a mano. Necesita tokens.css. */ .s-pricing__wrap{container-type:inline-size} .s-pricing{position:relative} .s-pricing__wrap{position:relative} .s-pricing__card{position:relative} .s-pricing__featured-inner{position:relative} .s-pricing__featured{margin-inline:calc(var(--spacing)*-1)} .s-pricing__inner{margin-inline:auto} .s-pricing__head{margin-inline:auto} .s-pricing__lead{margin-inline:auto} .s-pricing__card{margin-inline:auto} .s-pricing__price{margin-top:calc(var(--spacing)*2)} .s-pricing__lead{margin-top:calc(var(--spacing)*4)} .s-pricing__wrap{margin-top:calc(var(--spacing)*12)} .s-pricing__price{margin-bottom:calc(var(--spacing)*.5);display:block} .s-pricing__plan-head{display:flex} .s-pricing__list li{display:flex} .s-pricing__grid{display:grid} .s-pricing__head{max-width:var(--container-2xl)} .s-pricing__inner{max-width:var(--container-5xl)} .s-pricing__card{max-width:var(--container-sm)} .s-pricing__lead{max-width:var(--container-xl)} .s-pricing__plan-head{flex-direction:column} .s-pricing__list li{align-items:center;gap:calc(var(--spacing)*2)} :where(.s-pricing__plan-head>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))} :where(.s-pricing__list>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))} .s-pricing__card{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px} .s-pricing__cta{border-block-style:var(--tw-border-style);border-block-width:1px} .s-pricing__card{border-color:#0000} .s-pricing__featured{border-color:#0000;background-color:var(--color-background)} .s-pricing__card{background-color:var(--color-card)} .s-pricing{background-color:var(--color-muted)} .s-pricing__plan-head{padding:calc(var(--spacing)*8)} .s-pricing__list{padding:calc(var(--spacing)*8)} .s-pricing__featured-inner{padding-inline:var(--spacing)} .s-pricing__inner{padding-inline:calc(var(--spacing)*6)} .s-pricing__cta{padding-inline:calc(var(--spacing)*8);padding-block:calc(var(--spacing)*4)} .s-pricing{padding-block:calc(var(--spacing)*16)} .s-pricing__head{text-align:center} .s-pricing__price{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))} .s-pricing__title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))} .s-pricing__lead{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))} .s-pricing__per{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))} .s-pricing__plan{--tw-leading:1;line-height:1} .s-pricing__title{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)} .s-pricing__plan{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)} .s-pricing__price{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)} .s-pricing__plan{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)} .s-pricing__title{text-wrap:balance} .s-pricing__lead{text-wrap:balance} .s-pricing__card{color:var(--color-card-foreground)} .s-pricing__lead{color:var(--color-muted-foreground)} .s-pricing__per{color:var(--color-muted-foreground)} .s-pricing__card{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)} .s-pricing__featured{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)} .s-pricing__card{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)} .s-pricing__featured{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)} .s-pricing__card{--tw-ring-color:var(--color-foreground)} @supports (color:color-mix(in lab, red, red)){ .s-pricing__card{--tw-ring-color:color-mix(in oklab,var(--color-foreground)5%,transparent)} } .s-pricing__featured{--tw-ring-color:var(--color-foreground)} @supports (color:color-mix(in lab, red, red)){ .s-pricing__featured{--tw-ring-color:color-mix(in oklab,var(--color-foreground)10%,transparent)} } @media (min-width:48rem){ .s-pricing__wrap{margin-top:calc(var(--spacing)*20)} .s-pricing{padding-block:calc(var(--spacing)*20)} .s-pricing__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))} } @media (min-width:64rem){ .s-pricing__title{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))} } @container (min-width:48rem){ .s-pricing__featured{margin-inline:0;margin-block:calc(var(--spacing)*-3)} .s-pricing__featured-inner{padding-inline:0;padding-block:calc(var(--spacing)*3)} } @container (min-width:56rem){ .s-pricing__card{max-width:100%} .s-pricing__grid{grid-template-columns:repeat(3,minmax(0,1fr))} } /* propio */ .s-pricing__featured{border-radius:var(--radius)} .s-pricing__cta .c-btn{width:100%} .s-pricing__list{list-style:none;margin:0} .s-pricing__list svg{width:.75rem;height:.75rem;color:var(--primary);flex:none} .s-pricing__title,.s-pricing__plan{margin:0} ``` ## Credits - Tailark mist (MIT) · pricing/two: https://github.com/tailark/blocks