Skip to content

Instantly share code, notes, and snippets.

@crbdev
Last active April 22, 2025 07:21
Show Gist options
  • Save crbdev/c8d604046fed86083d701c9bccaf2a33 to your computer and use it in GitHub Desktop.
Save crbdev/c8d604046fed86083d701c9bccaf2a33 to your computer and use it in GitHub Desktop.
Contact List cards as seen on the GravityKit blog tutorial.
<!--
Place the HTML in a Custom Content field and replace the merge tags with your own.
You can then plce the CSS inside the "Custom Code" panel in the View settings.
-->
<div class="contact-card">
<div class="contact-header">
<h2>{Name (Name):1.3} {Name (Name):1.6}</h2>
<p class="position">{Job Title:3}</p>
</div>
<div class="contact-body">
<p><strong>πŸ“§ Email</strong>
<a href="mailto:{Email:2}">{Email:2}</a>
</p>
<p>
<strong>πŸ“ž Phone</strong>
<a href="tel:{phone}">{Phone:10}</a>
</p>
<p><strong>πŸ“ Address</strong>
{Address (Street Address):9.1}, {Address (City):9.3}, {Address (State / Province):9.4}, US</p>
</div>
</div>
<style>
.gv-list-multiple-container.gv-container{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
.gv-list-multiple-container.gv-container .gv-list-view {
margin-right: 10px;
width: 340px;
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 1rem;
padding: 1.5rem;
margin-bottom: 1.8rem !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
max-width: 500px;
transition: box-shadow 0.3s ease;
}
.gv-list-view-title {border:none !important;}
.gv-grid-col-1-4 {text-align:left !important;}
.gv-list-view:hover {
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.contact-header h2 {
margin: 0;
font-size: 1.5rem;
color: #333333;
}
.contact-header .position {
margin: 0.25rem 0 1rem;
font-size: 1rem;
color: #888888;
}
.contact-body p {
margin: 0.5rem 0;
font-size: 1rem;
color: #555555;
}
.contact-body a {
color: #0073aa;
text-decoration: none;
}
.contact-body a:hover {
text-decoration: underline;
}
/*
Link to Single Entry button
Replace the field ID with your own
*/
.gv-field-30-entry_link {
margin-top:15px;
}
.gv-field-30-entry_link a {
display: inline-block;
background: linear-gradient(135deg, #4a90e2, #0073aa);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 999px;
text-decoration: none;
font-size: 16px;
font-weight: 500;
transition: background 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 12px rgba(0, 115, 170, 0.2);
}
.gv-field-30-entry_link a:hover {
background: linear-gradient(135deg, #0073aa, #005d99);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 115, 170, 0.3);
}
.gv-field-30-entry_link a:active {
transform: scale(0.98);
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment