Datos
Bloque con listas de descripción o etiquetas, además de información del estado de las aportaciones realizadas. Generalmente utilizado en formularios.
Componente rectangular con borde gris delgado y fondo blanco. Contiene texto pequeño gris en la parte superior indicando tipo, seguido de texto negro en negrita con un checkmark verde al lado derecho.
Completo
{% from "components/status/_macro.status.njk" import componentStatus %}
{{ componentStatus({
"text": "Completo",
"icon": {
"type": "success"
}
}) }}Componente rectangular con borde gris delgado y fondo blanco. Contiene texto pequeño gris en la parte superior indicando tipo, seguido de texto rojo en negrita con un ícono triangular de advertencia rojo al lado derecho.
Incompleto
{% from "components/status/_macro.status.njk" import componentStatus %}
{{ componentStatus({
"text": "Incompleto",
"icon": {
"type": "alert"
},
"classes": "text-alert-base"
}) }}Componente rectangular con borde gris delgado y fondo blanco. Contiene texto pequeño gris en la parte superior indicando tipo, seguido de texto negro con un ícono circular de progreso animado al lado derecho.
Subiendo (20%)
{% from "components/status/_macro.status.njk" import componentStatus %}
{{ componentStatus({
"text": "Subiendo (20%)",
"icon": {
"type": "loading"
}
}) }}Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene encabezado en texto negro pequeño regular indicando tipo, seguido de texto en rojo negrita con ícono circular de información rojo adyacente.
Error
{% from "components/status/_macro.status.njk" import componentStatus %}
{{ componentStatus({
"text": "Error",
"icon": {
"type": "error"
},
"classes": "text-alert-base"
}) }}Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene encabezado en texto negro pequeño regular, seguido de texto en negro negrita con ícono circular de información negro adyacente.
Atención
{% from "components/status/_macro.status.njk" import componentStatus %}
{{ componentStatus({
"text": "Atención",
"icon": {
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 text-primary-base' aria-hidden='true' focusable='false'><path d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg>"
}
}) }}