Insertar recuadro de texto
Destacá una información en particular dentro de cualquier contenido.
En esta página
- Qué es el recuadro
- Los colores
- Restricciones de uso que rompen el código
- Código markdown y configuración
Si aún no lo hiciste, primero leé atentamente la sección en la que explicamos la diferencia entre recuadro y alerta, para qué sirve cada recurso y los estándares de uso.
Qué es el recuadro
El recuadro de texto es un recurso que usamos para destacar un bloque de información (título y cuerpo de texto) con elementos decorativos: un fileteado de color a la izquierda del bloque completo, bordes sombreados debajo y a la derecha e ícono opcional del mismo color del fileteado.
Este es un recuadro de texto
El recuadro de texto es un recurso que usamos para destacar un bloque de información (título y cuerpo de texto) con elementos decorativos.
Los colores
El recurso solo puede tener uno de los siguientes colores.
Este recuadro es de color gris
El color se escribe arg-default:
- además tiene una lista no ordenada,
- con dos ítems.
Este recuadro es de color azul
El color se escribe arg-azul.
Tiene texto en negrita.
Este recuadro es de color azul cobalto
El color se escribe arg-secundario.
Tiene texto en cursiva.
Este recuadro es de color palta
El color se escribe arg-palta:
- además tiene una lista ordenada,
- con dos ítems.
Este recuadro es de color uva
El color se escribe arg-uva.
Debajo tiene además un botón de acción, que siempre es gris cualquiera sea el color del fileteado.
Este recuadro es de color arándano
El color se escribe arg-arandano
Restricciones de uso que rompen el código
El cuerpo de texto es obligatorio Si lo dejás vacío, el código se rompe.
El título y el ícono, en cambio, son opcionales.
Por ejemplo:
[[recuadro-{Este recuadro tiene título, pero como no tiene cuerpo de texto ves el código en lugar del recuadro.}-{}-{}-{arg-rosado}]]
La extensión máxima del título es 80 espacios. Si el título es más largo, el código se rompe.
Por ejemplo:
[[recuadro-{Este título es largo, largo, larguísimo, tiene ochenta y un espacios de extensión}-{Por eso, aunque tiene cuerpo de texto, ves el código en lugar del recuadro.}-{}-{arg-rosado}]]
El título no acepta hipervínculo. Si vinculás el título, se va a ver el texto sin hipervínculo.
Este título tiene hipervínculo
Leés el texto del título, pero no funciona el hipervínculo.
La extensión máxima del cuerpo de texto es 1000 espacios. Si es más largo, el código se rompe.
Por ejemplo:
[[recuadro-{}-{Este cuerpo de texto tiene 1011 caracteres de extensión. Tiene un montón de texto que podría ser mucho más corto para que no se rompa el código. Pero como lo pegué tan largo, larguísimo, el código se rompe porque supera los 1011 espacios de extensión. Este cuerpo de texto tiene 1011 caracteres de extensión. Tiene un montón de texto que podría ser mucho más corto para que no se rompa el código. Pero como lo pegué tan largo, larguísimo, el código se rompe porque supera los 1011 espacios de extensión. Este cuerpo de texto tiene 1011 caracteres de extensión. Tiene un montón de texto que podría ser mucho más corto para que no se rompa el código. Pero como lo pegué tan largo, larguísimo, el código se rompe porque supera los 1011 espacios de extensión. Este cuerpo de texto tiene 1011 caracteres de extensión. Tiene un montón de texto que podría ser mucho más corto para que no se rompa el código. Pero como lo pegué tan largo, larguísimo, y tiene más de 1000 caracteres, ves el código en lugar del recuadro.}-{}-{arg-rosado}]]
Los 1000 espacios del cuerpo de texto solo pueden tener párrafos, negrita, cursiva, hipervínculos, listas y botones en markdown.
Si agregás cualquier otro recurso markdown (foto, video, tabla, acordeón, gráfico) dentro del cuerpo de texto, no se va a mostrar.
Este párrafo tiene debajo un video de Youtube, pero no lo muestra.
El ícono siempre va a tener el mismo color del fileteado.
El botón de acción siempre se va a ver de color gris cualquiera sea el color del fileteado.
Código markdown y configuración
Para insertar un recuadro de texto, copiá el siguiente código, editalo y pegalo entre dos párrafos con una línea libre arriba y abajo.
[[recuadro-{Título hasta 80 caracteres}-{Cuerpo de texto hasta 1000 caracteres. Puede tener párrafos, negrita, cursiva, hipervínculos, listas y botones.}-{nombre-del-ícono-no-obligatorio}-{nombre-del-color}]]
Códigos de recuadro y de alerta
El código del recuadro es prácticamente igual al de la alerta.
Al inicio, en lugar de alerta dice recuadro.
Como nombre de color solo acepta uno de los siete colores que informamos más arriba, mientras que las alertas solo aceptan como nombre el de los cuatro colores semánticos (danger, warning, info y success).
Por eso es muy fácil convertir una alerta en recuadro y viceversa si cambiás solo esas dos partes del código.
El siguiente recuadro, por ejemplo,
Entre estos corchetes escribís el título
Entre estos corchetes escribís el cuerpo de texto.
tiene el siguiente código
[[recuadro-{Entre estos corchetes escribís el título}-{Entre estos corchetes escribís el cuerpo de texto.}-{icono-arg-paleta-colores}-{arg-default}]]
Mientras que el siguiente recuadro con lista no ordenada y botón
Entre estos corchetes escribís el título
Este corchete abre el cuerpo de texto.
Escribimos una lista no ordenada.
- este es el primer ítem con texto con negrita;
- este es el segundo ítem.
Luego un botón.
Este corchete cierra el cuerpo de texto.
tiene el código que te mostramos a continuación. Fijate que el botón se ve gris aunque escribimos que fuera rojo (danger).
[[recuadro-{Entre estos corchetes escribís el título}-{Este corchete abre el cuerpo de texto.
Escribimos una lista no ordenada.
* este es el primer ítem con texto **con negrita**;
* este es el segundo ítem.
Luego un botón.
[Cancelá tu turno](https://www.argentina.gob.ar/turnos){.btn.btn-danger.btn-sm}
Este corchete cierra el cuerpo de texto.}-{icono-arg-paleta-colores}-{arg-palta}]]