Planes básicos, estándar y avanzados Plantilla HTML

Tres tarjetas de precios forman una sección estática lista para usar

Las tres tarjetas de igual ancho ya establecen el contenido principal de una sección de comparación de precios. Cada tarjeta sigue la misma secuencia: una etiqueta de plan, una franja de color para el precio, el precio mostrado, una lista de características y un pequeño botón de compra. Esta estructura repetida permite a los visitantes comparar las opciones disponibles sin desplazarse entre distintas áreas de contenido. La disposición en paralelo también mantiene la sección enfocada en las diferencias entre planes en lugar de introducir información irrelevante.

En una página HTML estática, este bloque puede colocarse como un área de precios preparada, mientras que el resto de la página aporta su propia introducción, navegación, explicaciones complementarias y otras secciones. Las tarjetas en gris claro crean un fondo sobrio para la comparación, mientras que las franjas cian y amarilla de las tarjetas exteriores las diferencian de la franja rosa del centro. Estos toques de color ofrecen una separación visual sin alterar el esquema de información común.

Los precios mostrados y los elementos de las listas de características son contenido de muestra, por lo que pueden sustituirse por los datos definitivos de la oferta conservando la relación entre las tarjetas. Los botones de compra ofrecen a cada plan un punto de acción claro dentro de la sección, aunque la página en general aún puede aportar contexto adicional antes o después de la comparación. Utilizado de este modo, el bloque constituye una sección estática terminada y no una página HTML o un sitio web completo.