Cards
Cards contain content and actions about a single subject.
This component is mostly used to organize an agenda, dates with specific data that may be useful depending on each situation. They have different priority states, either their own or through the use of Tags as a complement.
Primary Cards
Primary cards have a drop-down menu where different actions can be carried out and the possibility of displaying and collapsing more information.
<div class="booking-card-container">
<div class="booking-card flex-h">
<div class="left flex-v">
<p class="status">STATUS</p>
<div class="full-date">
<p class="weekday">Monday</p>
<p class="date">00/00/00</p>
<p class="time">00:00 PM</p>
</div>
<p class="plan">OPTIONAL LABEL</p>
<button class="mobile-actions-btn show-actions" onclick="toggleActionsMobile(this)"></button>
</div>
<div class="right flex-v">
<div class="top flex-h">
<div class="avatar">
<div class="icon">
<i class="material-symbols-outlined">person_outline</i>
</div>
</div>
<div class="booking flex-v">
<p class="name">Here you will add a subject title</p>
<div class="flex-h area">
<label class="fav-checkbox">
<input type="checkbox">
<div class="icon">
<i class="material-symbols-outlined on">favorite</i>
<i class="material-symbols-outlined off">favorite_outline</i>
</div>
</label>
<span>Add to favorite</span>
</div>
</div>
</div>
<div class="bottom">
<div class="line">
<div class="icon-container">
<i class="material-symbols-outlined">videocam</i>
</div>
<p>Information</p>
</div>
<div class="line">
<div class="icon-container">
<i class="material-symbols-outlined">schedule</i>
</div>
<p>Time</p>
</div>
<div class="line preparation-link" onclick="togglePreparation(this)">
<div class="icon-container">
<i class="material-symbols-outlined">visibility</i>
</div>
<p class="off">See more</p>
<p class="on">Hide</p>
</div>
</div>
</div>
<div class="actions flex-v">
<button class="mobile-actions-btn hide-actions" onclick="toggleActionsMobile(this)"></button>
<div class="action flex-h" data-action="cancel">
<div class="icon-container">
<i class="material-symbols-outlined">highlight_off</i>
</div>
<span class="action-label">Label</span>
</div>
<div class="action flex-h" data-action="confirm">
<div class="icon-container">
<i class="material-symbols-outlined">check_circle_outline</i>
</div>
<span class="action-label">Label</span>
</div>
<div class="action flex-h" data-action="reassign">
<div class="icon-container">
<i class="material-symbols-outlined">history</i>
</div>
<span class="action-label">Label</span>
</div>
<div class="action flex-h" data-action="resend">
<div class="icon-container">
<i class="material-symbols-outlined">fast_forward</i>
</div>
<span class="action-label">Label</span>
</div>
</div>
</div>
<div class="sub-card booking-card preparation-card">
<div class="pcard-content">
<div class="preparation-text">
<p class="preparation-header">Title here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis a voluptas tempora laborum mollitia
deserunt unde nam nihil dolores fugiat esse sint exercitationem commodi, libero sequi, veniam neque, ipsam
consequuntur...</p>
</div>
</div>
</div>
</div>Secondary Cards
Secondary cards have a drop-down menu where different actions can be carried out and the possibility of displaying and collapsing more information.
<!-- set card status color -->
<div class="pcard secondary-card blue" onclick="$(this).toggleClass('selected')">
<div class="header">
<!-- set tag color -->
<div class="tag tag-light-blue">
<span>Status</span>
</div>
<div class="checkbox-container"></div>
</div>
<div class="pcard-row weekdays">
<div class="icon-container">
<i class="material-symbols-outlined">calendar_month</i>
</div>
<div class="days">
<span class="day active">MO</span>
<span class="day undefined">TU</span>
<span class="day undefined">WE</span>
<span class="day undefined">TH</span>
<span class="day active">FR</span>
<span class="day undefined">SA</span>
<span class="day undefined">SU</span>
</div>
</div>
<div class="pcard-row dates">
<div class="icon-container">
<i class="material-symbols-outlined">event</i>
</div>
<span>00/00/00 - 00/00/00</span>
</div>
<div class="pcard-row times">
<div class="icon-container">
<i class="material-symbols-outlined">schedule</i>
</div>
<span>00:00 AM - 00:00 PM</span>
</div>
<div class="bottom options">
<span class="option active">Label</span>
<span class="option active">Label</span>
<span class="option undefined">Label</span>
<span class="option undefined">Label</span>
<span class="option active">Label</span>
<span class="option active">Label</span>
</div>
</div>General guidelines
- Has higher visual prominence and invites interactivity with its drop shadow.
- Provides a brief summary of content or a task.
- Cards are used to organise information related to a single topic. Cards can contain multiple elements, such as images, links, actions, text and more.
Primary card structure
1
Status: Informs users the status of the card.
2
Color Status: Indicates the status of the card for an easy read.
3
Subject: Allows the user identify the subject of the card.
4
Information: Indicates detail information about the card.
5
Slide Buttons: Tools buttons to administrate different options on the cards.
Secondary card structure
1
Status: Informs users the status of the card.
2
Color Status: Indicates the status of the card for an easy read.
3
Selection Icon: Allows the user to select each card to perform actions individually or massively.
4
Information: Indicates detail information about the card.
5
Tags: Allows the user to know the active or inactive characteristics of each card.
6