Contact Information List Template

Display your contact details clearly with this simple and modern icon list.

This component is perfect for a "Contact Us" page, website footer, or business card design, aligning icons with their corresponding information.

A list of contact information with phone, email, and location icons.

Get Source Code Preview

About this Template

This component is built with a simple unordered list (ul), ensuring a semantic and accessible structure. Each list item uses Flexbox to vertically align a descriptive SVG icon with the contact information. It is designed to be clean, easy to read, and simple to integrate into any project.

Features

Semantic & Simple: Uses a straightforward ul and li structure that is easy to understand and modify.
Accessible Icons: Inline SVG icons include a title element and are paired with visible text, ensuring clarity for all users.
Clickable Links: Phone numbers and email addresses use the appropriate tel: and mailto: link types.
Self-Contained Code: All styles are scoped to the .contact-list-template class to prevent any conflicts with your website's CSS.
Easy Customization: Key properties like colors and icon sizes are defined as CSS variables for quick changes.

Code Breakdown

The entire component is wrapped in a div with the .contact-list-template class. The core of the component is a single ul with the class .contact-list.

Each list item (.contact-item) is a flex container that aligns the icon and the text. The icon is an inline SVG with a class of .contact-icon. The contact details themselves are wrapped in a div. This simple, two-part structure within each list item ensures consistent alignment and spacing across the component.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Information List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8fafc;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

/* ==========================================================================
           Contact Information Component Styles - Copy from here
           ========================================================================== */
        .contact-list-template {
            --contact-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --contact-primary-text-color: #1e293b;
            --contact-secondary-text-color: #64748b;
            --contact-accent-color: #0ea5e9;
            --contact-icon-size: 24px;
            --contact-bg-color: #ffffff;
            --contact-border-color: #e2e8f0;

font-family: var(--contact-font-family);
            color: var(--contact-primary-text-color);
            width: 100%;
            max-width: 500px;
            background-color: var(--contact-bg-color);
            border: 1px solid var(--contact-border-color);
            border-radius: .5rem;
            padding: 2rem;
        }
        
        .contact-list-template *,
        .contact-list-template *::before,
        .contact-list-template *::after {
            box-sizing: border-box;
        }

.contact-list-template .contact-header {
            margin-bottom: 2rem;
        }

.contact-list-template .contact-header h2 {
            font-size: 1.5rem;
            margin: 0 0 0.25rem 0;
            text-align: center;
        }

.contact-list-template .contact-header p {
             margin: 0;
             text-align: center;
             color: var(--contact-secondary-text-color);
             font-size: .9rem;
        }
        
        .contact-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

.contact-item {
            display: flex;
            align-items: flex-start;
            gap: 1.25rem;
        }

.contact-item:not(:last-child) {
            margin-bottom: 1.5rem;
        }

.contact-icon {
            width: var(--contact-icon-size);
            height: var(--contact-icon-size);
            color: var(--contact-accent-color);
            flex-shrink: 0;
            margin-top: .125em;
        }
        
        .contact-details {
            line-height: 1.5;
        }
        
        .contact-details-label {
            font-weight: 600;
            display: block;
        }

.contact-details-info {
            color: var(--contact-secondary-text-color);
            word-break: break-word;
        }
        
        .contact-details a {
            color: var(--contact-secondary-text-color);
            text-decoration: none;
            transition: color 0.2s ease;
        }

.contact-details a:hover {
            color: var(--contact-accent-color);
            text-decoration: underline;
        }

</style>
</head>
<body>

<div class="contact-list-template">
    <header class="contact-header">
        <h2>Bureau of Misplaced Objects</h2>
        <p>For when you can't find your keys, your motivation, or the plot.</p>
    </header>
    <ul class="contact-list">
        <li class="contact-item">
            <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" role="img"><title>Phone</title><path d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.279-.087.431l4.108 7.394c.077.152.236.216.388.163l1.293-.972a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C6.842 22.5 1.5 17.158 1.5 8.25V6a3 3 0 013-3H1.5z"/></svg>
            <div class="contact-details">
                <span class="contact-details-label">Whisper Line</span>
                <a class="contact-details-info" href="tel:+1-555-867-5309">+1 (555) 867-5309</a>
            </div>
        </li>
        <li class="contact-item">
            <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" role="img"><title>Email</title><path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" /><path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" /></svg>
            <div class="contact-details">
                <span class="contact-details-label">Electronic Mailgram</span>
                <a class="contact-details-info" href="mailto:queries@bureauofmisplacedobjects.gov">queries@bureauofmisplacedobjects.gov</a>
            </div>
        </li>
         <li class="contact-item">
            <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" role="img"><title>Address</title><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
            <div class="contact-details">
                <span class="contact-details-label">Physical Annex</span>
                <span class="contact-details-info">123.5 Eerie Alley, Floor 4&frac12;<br>Nowhere, USA</span>
            </div>
        </li>
    </ul>
</div>

</body>
</html>

View Output