Tarjetas
Las tarjetas son uno de los elementos más utilizados para presentar información en series. El Kit Digital UdeC ofrece diversos estilos alineados con tipos de información genéricos.
Tarjeta de persona
HTML
<div class="grid-3">
<!-- Person Card -->
<div class="card card-person">
<div class="wp-block-group">
<figure class="wp-block-image">
<img src="https://picsum.photos/48/48?random=10" alt="Avatar" style="border-radius: 50%;" />
</figure>
<p class="has-blue-500-color">Dr. Carlos Martínez</p>
</div>
<p>Director del Departamento de Ingeniería Civil. Especialista en estructuras y materiales.</p>
<div class="card__contact copy-contact-link">
<p class="copy-link__content"><a href="mailto:cmartinez@udec.cl">cmartinez@udec.cl</a></p>
<p class="copy-link__content"><a href="tel:+56412204000">+56 41 220 4000</a></p>
</div>
</div>
</div>Tarjeta de evento
HTML
<div class="grid-3">
<!-- Event Card 1 -->
<div class="card card-event">
<figure class="wp-block-image">
<img src="https://picsum.photos/400/225?random=20" alt="Evento" />
</figure>
<div class="card-event__content">
<p class="udec-category-tag" data-category="academic-activities">Actividades académicas</p>
<h3><a href="#">Talleres Vocacionales UdeC</a></h3>
<p class="card-event__date is-style-featured"><mark>25 julio de 2025</mark></p>
<div class="card-event__data">
<div class="wp-block-group">
<svg class="icon-container" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M16 28C14.5213 28 13.1354 27.7218 11.8423 27.1653C10.5492 26.6089 9.4193 25.8473 8.45263 24.8807C7.48596 23.914 6.72441 22.7841 6.16796 21.491C5.61152 20.1979 5.3333 18.812 5.3333 17.3333C5.3333 15.8547 5.61152 14.4688 6.16796 13.1757C6.72441 11.8826 7.48596 10.7527 8.45263 9.786C9.4193 8.81933 10.5492 8.05778 11.8423 7.50133C13.1354 6.94489 14.5213 6.66667 16 6.66667C17.4786 6.66667 18.8645 6.94489 20.1576 7.50133C21.4507 8.05778 22.5806 8.81933 23.5473 9.786C24.514 10.7527 25.2755 11.8826 25.832 13.1757C26.3884 14.4688 26.6666 15.8547 26.6666 17.3333C26.6666 18.812 26.3884 20.1979 25.832 21.491C25.2755 22.7841 24.514 23.914 23.5473 24.8807C22.5806 25.8473 21.4507 26.6089 20.1576 27.1653C18.8645 27.7218 17.4786 28 16 28ZM20.195 22.4717L21.1383 21.5283L16.6666 17.0563V10.6667H15.3333V17.6103L20.195 22.4717ZM7.87696 4.56933L8.82063 5.51267L4.1793 10.154L3.23596 9.21033L7.87696 4.56933ZM24.123 4.56933L28.764 9.21033L27.8206 10.154L23.1793 5.51267L24.123 4.56933ZM16 26.6667C18.5829 26.6667 20.7842 25.7569 22.604 23.9373C24.4235 22.1176 25.3333 19.9162 25.3333 17.3333C25.3333 14.7504 24.4235 12.5491 22.604 10.7293C20.7842 8.90978 18.5829 8 16 8C13.4171 8 11.2157 8.90978 9.39596 10.7293C7.57641 12.5491 6.66663 14.7504 6.66663 17.3333C6.66663 19.9162 7.57641 22.1176 9.39596 23.9373C11.2157 25.7569 13.4171 26.6667 16 26.6667Z" fill="currentColor" />
</svg>
<p>12:00 hrs.</p>
</div>
<div class="wp-block-group">
<svg class="icon-container" width="32" height="32" viewBox="0 0 32 32">
<path d="M8.00005 26.9743C6.81538 26.9743 5.80127 26.5526 4.95772 25.709C4.11416 24.8654 3.69238 23.8513 3.69238 22.6667C3.69238 21.482 4.11416 20.4679 4.95772 19.6243C5.80127 18.7808 6.81538 18.359 8.00005 18.359C9.18472 18.359 10.1988 18.7808 11.0424 19.6243C11.8859 20.4679 12.3077 21.482 12.3077 22.6667C12.3077 23.8513 11.8859 24.8654 11.0424 25.709C10.1988 26.5526 9.18472 26.9743 8.00005 26.9743ZM24 26.9743C22.8154 26.9743 21.8013 26.5526 20.9577 25.709C20.1142 24.8654 19.6924 23.8513 19.6924 22.6667C19.6924 21.482 20.1142 20.4679 20.9577 19.6243C21.8013 18.7808 22.8154 18.359 24 18.359C25.1847 18.359 26.1988 18.7808 27.0424 19.6243C27.8859 20.4679 28.3077 21.482 28.3077 22.6667C28.3077 23.8513 27.8859 24.8654 27.0424 25.709C26.1988 26.5526 25.1847 26.9743 24 26.9743ZM8.00105 25.641C8.81927 25.641 9.51938 25.3497 10.1014 24.767C10.6834 24.1843 10.9744 23.4839 10.9744 22.6657C10.9744 21.8474 10.6831 21.1473 10.1004 20.5653C9.51772 19.9833 8.81727 19.6923 7.99905 19.6923C7.18083 19.6923 6.48072 19.9837 5.89872 20.5663C5.31672 21.149 5.02572 21.8494 5.02572 22.6677C5.02572 23.4859 5.31705 24.186 5.89972 24.768C6.48238 25.35 7.18283 25.641 8.00105 25.641ZM24.0011 25.641C24.8193 25.641 25.5194 25.3497 26.1014 24.767C26.6834 24.1843 26.9744 23.4839 26.9744 22.6657C26.9744 21.8474 26.6831 21.1473 26.1004 20.5653C25.5177 19.9833 24.8173 19.6923 23.999 19.6923C23.1808 19.6923 22.4807 19.9837 21.8987 20.5663C21.3167 21.149 21.0257 21.8494 21.0257 22.6677C21.0257 23.4859 21.317 24.186 21.8997 24.768C22.4824 25.35 23.1828 25.641 24.0011 25.641ZM16.0001 13.641C14.8154 13.641 13.8013 13.2192 12.9577 12.3757C12.1142 11.5321 11.6924 10.518 11.6924 9.33333C11.6924 8.14866 12.1142 7.13455 12.9577 6.291C13.8013 5.44744 14.8154 5.02567 16.0001 5.02567C17.1847 5.02567 18.1988 5.44744 19.0424 6.291C19.8859 7.13455 20.3077 8.14866 20.3077 9.33333C20.3077 10.518 19.8859 11.5321 19.0424 12.3757C18.1988 13.2192 17.1847 13.641 16.0001 13.641ZM16.001 12.3077C16.8193 12.3077 17.5194 12.0163 18.1014 11.4337C18.6834 10.851 18.9744 10.1506 18.9744 9.33233C18.9744 8.51411 18.6831 7.814 18.1004 7.232C17.5177 6.65 16.8173 6.359 15.9991 6.359C15.1808 6.359 14.4807 6.65033 13.8987 7.233C13.3167 7.81566 13.0257 8.51611 13.0257 9.33433C13.0257 10.1526 13.317 10.8527 13.8997 11.4347C14.4824 12.0167 15.1828 12.3077 16.001 12.3077Z" fill="currentColor" />
</svg>
<p>Modalidad: Presencial</p>
</div>
<div class="wp-block-group">
<svg class="icon-container" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M16.0047 15.641C16.5982 15.641 17.1048 15.4297 17.5243 15.007C17.9441 14.5843 18.154 14.0762 18.154 13.4827C18.154 12.8891 17.9426 12.3824 17.5197 11.9627C17.097 11.5431 16.5889 11.3333 15.9953 11.3333C15.4018 11.3333 14.8952 11.5447 14.4757 11.9673C14.0559 12.39 13.846 12.8981 13.846 13.4917C13.846 14.0852 14.0574 14.5919 14.4803 15.0117C14.903 15.4312 15.4111 15.641 16.0047 15.641ZM16 26.236C18.506 24.0547 20.4872 21.8362 21.9437 19.5807C23.4001 17.3251 24.1283 15.3743 24.1283 13.7283C24.1283 11.289 23.3561 9.27567 21.8117 7.68833C20.2672 6.10122 18.33 5.30767 16 5.30767C13.67 5.30767 11.7328 6.10122 10.1883 7.68833C8.64389 9.27567 7.87166 11.289 7.87166 13.7283C7.87166 15.3743 8.59989 17.3251 10.0563 19.5807C11.5128 21.8362 13.494 24.0547 16 26.236ZM16 28.0257C12.8667 25.2548 10.5064 22.6706 8.91933 20.273C7.332 17.8757 6.53833 15.6941 6.53833 13.7283C6.53833 10.9077 7.45677 8.58111 9.29366 6.74867C11.1303 4.91622 13.3658 4 16 4C18.6342 4 20.8697 4.91622 22.7063 6.74867C24.5432 8.58111 25.4617 10.9077 25.4617 13.7283C25.4617 15.6941 24.668 17.8757 23.0807 20.273C21.4936 22.6706 19.1333 25.2548 16 28.0257Z" fill="currentColor" />
</svg>
<p>Campus: Concepción</p>
</div>
</div>
</div>
</div>
</div>Tarjeta de testimonio
HTML
<div class="grid-3">
<!-- Testimony Card 1 -->
<div class="card card-testimony">
<figure class="wp-block-image card-testimony__image">
<img src="https://picsum.photos/400/225?random=1" alt="Testimonio" />
</figure>
<div class="card-testimony__content">
<p>La Universidad de Concepción me brindó las herramientas y el conocimiento necesarios para desarrollarme profesionalmente.</p>
<div class="card-testimony__autor">
<p><strong>María González</strong></p>
<p>Ingeniera Civil Industrial</p>
</div>
</div>
</div>
</div>Tarjeta de facultad
HTML
<div class="grid-3">
<!-- Faculty Card 3 -->
<div class="card-faculty">
<figure class="wp-block-image">
<img src="https://picsum.photos/400/225?random=32" alt="Facultad" />
</figure>
<div class="card-faculty__content">
<h3>Facultad de Medicina</h3>
<div class="card-faculty__data">
<div class="wp-block-group">
<svg class="icon-container has-gray-700-color" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M16.0047 15.641C16.5982 15.641 17.1048 15.4297 17.5243 15.007C17.9441 14.5843 18.154 14.0762 18.154 13.4827C18.154 12.8891 17.9426 12.3824 17.5197 11.9627C17.097 11.5431 16.5889 11.3333 15.9953 11.3333C15.4018 11.3333 14.8952 11.5447 14.4757 11.9673C14.0559 12.39 13.846 12.8981 13.846 13.4917C13.846 14.0852 14.0574 14.5919 14.4803 15.0117C14.903 15.4312 15.4111 15.641 16.0047 15.641ZM16 26.236C18.506 24.0547 20.4872 21.8362 21.9437 19.5807C23.4001 17.3251 24.1283 15.3743 24.1283 13.7283C24.1283 11.289 23.3561 9.27567 21.8117 7.68833C20.2672 6.10122 18.33 5.30767 16 5.30767C13.67 5.30767 11.7328 6.10122 10.1883 7.68833C8.64389 9.27567 7.87166 11.289 7.87166 13.7283C7.87166 15.3743 8.59989 17.3251 10.0563 19.5807C11.5128 21.8362 13.494 24.0547 16 26.236ZM16 28.0257C12.8667 25.2548 10.5064 22.6706 8.91933 20.273C7.332 17.8757 6.53833 15.6941 6.53833 13.7283C6.53833 10.9077 7.45677 8.58111 9.29366 6.74867C11.1303 4.91622 13.3658 4 16 4C18.6342 4 20.8697 4.91622 22.7063 6.74867C24.5432 8.58111 25.4617 10.9077 25.4617 13.7283C25.4617 15.6941 24.668 17.8757 23.0807 20.273C21.4936 22.6706 19.1333 25.2548 16 28.0257Z" fill="currentColor" />
</svg>
<p>Campus Concepción</p>
</div>
<div class="wp-block-group">
<svg class="icon-container has-gray-700-color" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M16.0047 15.641C16.5982 15.641 17.1048 15.4297 17.5243 15.007C17.9441 14.5843 18.154 14.0762 18.154 13.4827C18.154 12.8891 17.9426 12.3824 17.5197 11.9627C17.097 11.5431 16.5889 11.3333 15.9953 11.3333C15.4018 11.3333 14.8952 11.5447 14.4757 11.9673C14.0559 12.39 13.846 12.8981 13.846 13.4917C13.846 14.0852 14.0574 14.5919 14.4803 15.0117C14.903 15.4312 15.4111 15.641 16.0047 15.641ZM16 26.236C18.506 24.0547 20.4872 21.8362 21.9437 19.5807C23.4001 17.3251 24.1283 15.3743 24.1283 13.7283C24.1283 11.289 23.3561 9.27567 21.8117 7.68833C20.2672 6.10122 18.33 5.30767 16 5.30767C13.67 5.30767 11.7328 6.10122 10.1883 7.68833C8.64389 9.27567 7.87166 11.289 7.87166 13.7283C7.87166 15.3743 8.59989 17.3251 10.0563 19.5807C11.5128 21.8362 13.494 24.0547 16 26.236ZM16 28.0257C12.8667 25.2548 10.5064 22.6706 8.91933 20.273C7.332 17.8757 6.53833 15.6941 6.53833 13.7283C6.53833 10.9077 7.45677 8.58111 9.29366 6.74867C11.1303 4.91622 13.3658 4 16 4C18.6342 4 20.8697 4.91622 22.7063 6.74867C24.5432 8.58111 25.4617 10.9077 25.4617 13.7283C25.4617 15.6941 24.668 17.8757 23.0807 20.273C21.4936 22.6706 19.1333 25.2548 16 28.0257Z" fill="currentColor" />
</svg>
<p>Barrio Universitario s/n</p>
</div>
<div class="wp-block-group">
<svg class="icon-container has-blue-500-color" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M14.154 21.436H9.436C7.932 21.436 6.65 20.9061 5.59 19.8463C4.53 18.7866 4 17.5049 4 16.0013C4 14.4978 4.53 13.2157 5.59 12.155C6.65 11.0943 7.932 10.564 9.436 10.564H14.154V11.8973H9.436C8.30778 11.8973 7.34189 12.2991 6.53833 13.1027C5.735 13.906 5.33333 14.8718 5.33333 16C5.33333 17.1282 5.735 18.094 6.53833 18.8973C7.34189 19.7009 8.30778 20.1027 9.436 20.1027H14.154V21.436ZM11.3333 16.6667V15.3333H20.6667V16.6667H11.3333ZM17.846 21.436V20.1027H22.564C23.6922 20.1027 24.6581 19.7009 25.4617 18.8973C26.265 18.094 26.6667 17.1282 26.6667 16C26.6667 14.8718 26.265 13.906 25.4617 13.1027C24.6581 12.2991 23.6922 11.8973 22.564 11.8973H17.846V10.564H22.564C24.068 10.564 25.35 11.0939 26.41 12.1537C27.47 13.2134 28 14.4951 28 15.9987C28 17.5022 27.47 18.7843 26.41 19.845C25.35 20.9057 24.068 21.436 22.564 21.436H17.846Z" fill="currentColor" />
</svg>
<p><a href="#">medicina.udec.cl</a></p>
</div>
</div>
</div>
</div>
</div>