Custom Card Component Design

Below is a custom design for cards that you can adapt as you see fit. It uses the foundational code from: https://codepen.io/lesliesamafful/pen/oNXgmBG

CSS Files to add to the Application Custom Header settings (not page CSS):

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@200" rel="stylesheet" />

CSS Code to Add to each page where cards will be placed:

.card {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: .25rem;
    margin-bottom: 1.875rem;
    box-shadow: 0 10px 40px 0 rgba(62,57,107,.07),0 2px 9px 0 rgba(62,57,107,.06);
}
.card-body {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.5rem;
}
.d-flex {
    display: -webkit-box!important;
    display: -webkit-flex!important;
    display: -ms-flexbox!important;
    display: flex!important;
}
.text-left {
    text-align: left!important;
}
.media-body {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.align-self-center {
    -webkit-align-self: center!important;
    -ms-flex-item-align: center!important;
    align-self: center!important;
}
.float-right {
    float: right!important;
}
.iconcolor1 {
    color: #1552ff !important;
}
.iconcolor2 {
    color: #FF0000 !important;
}
.iconcolor3 {
    color: #FFA500 !important;
}
.iconcolor4 {
    color: #A52A2A !important;
}
.font-large-2 {
    font-size: 6rem !important;
}
.no-text-transform {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Maintain text color */
}

.no-text-transform:hover, .no-text-transform:focus {
    text-decoration: none; /* Ensure underline is removed on hover and focus */
}

Custom Component Code (Icons Float Left):

{{#each records}}
<a href="/on-call-planner-sa" class="no-text-transform">
    <div class="card">
      <div class="card-content">
        <div class="card-body">
          <div class="media d-flex">
            <div class="align-self-center">
             <span class="material-symbols-outlined iconcolor1 font-large-2 float-left">contact_phone</span>
            </div>
            <div class="media-body text-right">
              <span>Duty Officer</span>
              <h3 style="margin:3px 0 3px 0">{{field_1654}}</h3>
              <span>{{formatPhone field_1659}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</a>
{{/each}}

Custom Component Code (Icons Float Right:

{{#each records}}
        <div class="card">
          <div class="card-content">
            <div class="card-body">
              <div class="media d-flex">
                <div class="media-body text-left">
                  <h3 class="danger">{{total}}</h3>
                  <span class="cardtitle">Inoperable/Closed</span>
                </div>
                <div class="align-self-center">
                  <span class="material-symbols-outlined iconcolor2 font-large-2 float-right">cancel</span>
                </div>
              </div>
            </div>
          </div>
{{/each}}

Handlbar JS Helpers for formatting phone number and decoding HTML inside of an equation field:

Handlebars.registerHelper("decodeHTML", function(value) {
    var doc = new DOMParser().parseFromString(value, "text/html");
    return doc.documentElement.textContent;
});
Handlebars.registerHelper("formatPhone", function(phoneNumber) {
    if (typeof phoneNumber !== 'string') {
        phoneNumber = phoneNumber.toString();
    }
    phoneNumber = phoneNumber.replace(/\D/g, '');
    if (phoneNumber.length === 10) {
        return '(' + phoneNumber.substring(0, 3) + ') ' + phoneNumber.substring(3, 6) + '-' + phoneNumber.substring(6);
    }
    return phoneNumber;
});

Link to Google Icons: Material Symbols and Icons - Google Fonts

FLOAT LEFT ICON RESULTS

FLOAT RIGHT ICON RESULTS

Hope this helps

6 Likes

These are fantastic! Thank you for sharing.

1 Like