Snippets
Sección dedicada a compartir y explorar snippets útiles para WordPress y WooCommerce. Encuentra fragmentos de código para personalizar, optimizar y mejorar tus proyectos sin necesidad de añadir más plugins de los necesarios.
Este componente de badge ofrece una solución versátil para resaltar información o etiquetas en tus diseños. Su estructura flexible y variantes predefinidas permiten una integración rápida y personalizable en cualquier proyecto. 🎯
Características principales
- Base adaptable: Incluye texto en tamaño pequeño, bordes redondeados y estilo visual limpio con opciones de color predefinidas.
- Variedad de estilos: Diferentes variantes para ajustarse a contextos claros, oscuros o con colores destacados.
- Uso optimizado: Diseñado con
max-w-fitpara ajustarse automáticamente al contenido. - Estilo destacado: Texto en mayúsculas y fuente seminegrita para mayor legibilidad e impacto visual.
Variantes disponibles
- Light (
badge-light): Fondo claro y texto oscuro, ideal para entornos minimalistas. - Dark (
badge-dark): Fondo oscuro y texto claro, perfecto para diseños en modo oscuro. - Primary (
badge-primary): Colores destacados que llaman la atención, perfectos para etiquetas importantes. - Secondary (
badge-secondary): Una opción complementaria para etiquetas secundarias. - Outline (
badge-outline): Fondo blanco con borde definido, ideal para estilos más sutiles. - Link (
badge-link): Estilo ligero, sin fondo ni bordes, con un diseño que se asemeja a un enlace.
Ejemplos de uso
- Badge de estado: Indicar el estado de un elemento (e.g., «Activo», «Pendiente»).
- Categorías: Agrupar elementos por temática.
- Destacados: Etiquetas como «Nuevo» o «Oferta».
Ventajas del componente
- Consistencia visual: Diseñado para mantener uniformidad en el estilo de tus proyectos.
- Escalabilidad: Fácil de adaptar y extender según las necesidades del diseño.
- Flexibilidad: Variantes predefinidas que se integran con diferentes paletas de colores y estilos.
Este componente de badge es una herramienta sencilla pero poderosa para mejorar la organización y presentación visual de tu interfaz. 💻✨
...Este componente de botón está diseñado para ser altamente flexible y personalizable, permitiendo adaptar estilos, tamaños y variantes de acuerdo con las necesidades específicas de tu proyecto. 🚀
Características principales
- Base sólida: Configuración predeterminada que incluye propiedades esenciales como diseño fluido, redondeo, transiciones suaves y espacio entre elementos.
- Interactividad: Respuestas dinámicas al enfoque (
focus) y al pasar el cursor (hover), incluyendo efectos de escala y transiciones. - Estilos predefinidos: Variantes listas para usar, como
light,dark,primary,secondary,linkyoutline. - Tamaños personalizables: Opciones de tamaño (
xs,sm,lg,xl) para adaptarse a diferentes contextos. - Diseño flexible: Clases para ancho completo (
block) o estilo ancho adicional (wide).
Variantes disponibles
- Light (
btn-light): Fondo claro y texto oscuro, ideal para interfaces minimalistas. - Dark (
btn-dark): Fondo oscuro con texto claro, perfecto para diseños con modo oscuro. - Primary (
btn-primary): Colores destacados, ideal para llamadas a la acción. - Secondary (
btn-secondary): Colores secundarios para complementos o acciones secundarias. - Link (
btn-link): Botón estilo enlace, sin fondo ni bordes. - Outline (
btn-outline): Botón con borde definido y sombra al pasar el cursor.
Tamaños personalizables
btn-xs: Tamaño extra pequeño.btn-sm: Tamaño pequeño.btn-lg: Tamaño grande.btn-xl: Tamaño extra grande.
Extras
- Ancho completo: Utiliza
btn-blockpara un botón que ocupe toda la línea. - Estilo ancho adicional: Añade
btn-widepara botones más amplios con espaciado extra.
Este componente ofrece una base escalable y sencilla para cualquier diseño, manteniendo la consistencia y flexibilidad que necesitas en tus proyectos. 🎨💻
...