HTML + CSSCheckboxes

Bandera del buzón

Un buzón de poste cuya bandera roja se levanta con un muelle al marcarlo mientras asoma una carta.

Ajustes

16px
1x

Código

<label class="uvq02-mbx"><input type="checkbox"><span class="bx"><svg viewBox="0 0 56 48" aria-hidden="true"><ellipse class="gd" cx="27" cy="46.5" rx="14" ry="1.5"/><rect class="po" x="24" y="29" width="6" height="18" rx="1"/><g class="lt"><rect x="3" y="19.5" width="10" height="7" rx="1"/><path d="M3.5 20l4.5 3.6L12.5 20"/></g><path class="bo" d="M8 30V20a10 10 0 0 1 10-10h20a10 10 0 0 1 10 10v10z"/><path class="dr" d="M14.5 30V20a6.5 6.5 0 0 1 3.5-5.8"/><rect class="sh" x="8" y="28" width="40" height="2"/><g class="fl"><rect class="pl" x="41" y="7" width="2" height="15" rx="1"/><path class="fg" d="M43 7h8.5l-1.6 3 1.6 3H43z"/><circle class="pv" cx="42" cy="22" r="1.7"/></g></svg></span>Hay cartas para enviar</label>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Checkboxes

Ver todos: Checkboxes

Dónde usarlo

Inspirado en los buzones de poste de las carreteras, este checkbox es un pequeño SVG con la caja redondeada, un poste de madera y una bandera roja. Al marcarlo, la bandera sube con un rebote de muelle y asoma una carta por la puerta, la vieja señal de que hay correo para recoger. Encaja en apps de mensajería, boletines, bandejas de salida y herramientas de envío.

El color principal es la bandera y el secundario el buzón, así que funcionan el rojo clásico sobre azul acero o una pareja de colores de tu marca. La etiqueta de al lado debe contar la acción pendiente, como enviar o recoger el correo.