Encuentro de líderes juveniles
Convivencia
Tarjetas y cifras
La tarjeta agrupa una idea. Solo la cifra que es el punto de la pantalla se destaca como indicador; no todo número merece una tarjeta.
Indicadores
Registros activos
248
12 más que la semana pasada
Respuestas sin leer
7
3 más que ayer
Citas esta semana
19
<div class="row g-3 w-100">
<div class="col-md-4"><div class="card mr-stat">
<div class="mr-stat-label">Registros activos</div>
<div class="mr-stat-value">248</div>
<div class="mr-stat-delta is-up">
<i class="ri-arrow-right-up-line"></i>12 más que la semana pasada
</div>
</div>
</div>
<div class="col-md-4"><div class="card mr-stat">
<div class="mr-stat-label">Respuestas sin leer</div>
<div class="mr-stat-value">7</div>
<div class="mr-stat-delta is-down">
<i class="ri-arrow-right-down-line"></i>3 más que ayer
</div>
</div>
</div>
<div class="col-md-4"><div class="card mr-stat">
<div class="mr-stat-label">Citas esta semana</div>
<div class="mr-stat-value">19</div>
</div>
</div>
</div>Indicadores con ícono y nota
Con icon aparece un cuadro de color a la izquierda; hint agrega una nota corta debajo del valor. El valor es una cifra (un conteo o un total); una fecha o un folio va en una lista de datos, no en un indicador.
<x-maristas::stat icon="ri-graduation-cap-line" label="Grupos" value="86" hint="Activos" />Variantes de tarjeta
Con sombra
La predeterminada. Para el contenido principal de la página.
Plana con borde
Para contenido secundario o anidado dentro de otra tarjeta.
Con acento
Marca una tarjeta que requiere atención. Úsala una vez por vista.
<div class="row g-3 w-100">
<div class="col-md-4"><div class="card h-100"><div class="card-body"><h6 class="card-title mb-1">Con sombra</h6><p class="text-muted small mb-0">La predeterminada. Para el contenido principal de la página.</p></div></div></div>
<div class="col-md-4"><div class="card mr-card-flat h-100"><div class="card-body"><h6 class="card-title mb-1">Plana con borde</h6><p class="text-muted small mb-0">Para contenido secundario o anidado dentro de otra tarjeta.</p></div></div></div>
<div class="col-md-4"><div class="card mr-card-accent h-100"><div class="card-body"><h6 class="card-title mb-1">Con acento</h6><p class="text-muted small mb-0">Marca una tarjeta que requiere atención. Úsala una vez por vista.</p></div></div></div>
</div>Tarjeta con portada
Para catálogos y listados con imagen: etiquetas sobre la portada, datos con ícono y acciones al pie. Sin imagen muestra un ícono.
Campamento de verano
Cinco días de convivencia, oración y servicio para estudiantes de secundaria y bachillerato, con actividades al aire libre.
<x-maristas::cover-card title="Encuentro de líderes" subtitle="Convivencia" :image="$url">
<x-slot:tags><x-maristas::state tone="success">Aprobado</x-maristas::state></x-slot:tags>
<x-slot:meta>
<div><i class="ri-calendar-event-line"></i><span>29 dic 2026, 09:00</span></div>
</x-slot:meta>
<p class="mr-cover-text">Descripción corta…</p>
<x-slot:actions><x-maristas::button>Ver detalles</x-maristas::button></x-slot:actions>
</x-maristas::cover-card>