Profile Card

About this module

A rounded profile card showing avatar, name, role and social icons — great for team sections.

Installation

1. 1

   Create the files

   Create `index.html` and `style.css` in the same folder.

2. 2

   Paste the code

   Copy each file's source into its matching file.

3. 3

   Open in the browser

   Open `index.html` in any modern browser.

Usage

1. 1

   Copy the HTML

   Paste the card markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <article class="mh-profile">
     <img class="mh-avatar" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' rx='48' fill='%236366f1'/%3E%3Ctext x='48' y='58' font-family='sans-serif' font-size='36' fill='white' text-anchor='middle'%3EM%3C/text%3E%3C/svg%3E" alt="Avatar of Maya" />
     <h3>Maya Chen</h3>
     <p class="mh-role">Staff Engineer</p>
     <p class="mh-bio">Builds design systems and loves good keyboard shortcuts.</p>
     <div class="mh-social">
       <a href="#" aria-label="GitHub">GH</a>
       <a href="#" aria-label="Twitter">TW</a>
       <a href="#" aria-label="LinkedIn">IN</a>
     </div>
   </article>