How to create a profile card with CSS?


Under the Team page, or authors page, you must have seen the profile card of employees or authors. Such profile cards include the profile image, name, and profile. A button can also be created to allow users to contact. In most cases, such buttons are optional. Let us see how to create a profile card with CSS.

Set a div for the profile card

A parent div is set for the card. First, set the profile image, then the name, designation and location. At the end, set a button using the <button> element −

<div class="profileCard">
   <img src="https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" alt="Amit" style="width:100%" />
   <h1>Amit Diwan</h1>
   <p class="Designation">Entrepreneur</p>
   <p>Delhi, India</p>
   <p><button>Contact</button></p>
</div>

Style the card

The maximum width of the profile card is set using the max-width property. The box shadow is also set. The text of the card is aligned to center −

profileCard {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   max-width: 300px;
   margin: auto;
   text-align: center;
   font-family: arial;
   background-color: rgb(190, 224, 224);
}

The Card Designation

The designation below the profile image should be styled differently to look appealing. The font style is set using the font-weight property −

.Designation {
   color: rgb(26, 0, 51);
   font-weight: bold;
   font-size: 18px;
}

Display the button on the card

The display property is used with the inline-block value to display the button on the profile card. With that, the cursor is changed to pointer using the cursor property to make it look like a clickable link −

button {
   border: none;
   outline: 0;
   display: inline-block;
   padding: 8px;
   color: white;
   background-color: rgb(23, 31, 102);
   text-align: center;
   cursor: pointer;
   width: 100%;
   font-size: 18px;
}

Example

To create a profile card with CSS, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .profileCard {
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
         max-width: 300px;
         margin: auto;
         text-align: center;
         font-family: arial;
         background-color: rgb(190, 224, 224);
      }  
      .Designation {
         color: rgb(26, 0, 51);
         font-weight: bold;
         font-size: 18px;
      }
      button {
         border: none;
         outline: 0;
         display: inline-block;
         padding: 8px;
         color: white;
         background-color: rgb(23, 31, 102);
         text-align: center;
         cursor: pointer;
         width: 100%;
         font-size: 18px;
      }
      button:hover, a:hover {
         opacity: 0.7;
      }
   </style>
</head>
<body>
   <h2 style="text-align:center">User Profile Card</h2>
   <div class="profileCard">
      <img src="https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" alt="Amit" style="width:100%" />
      <h1>Amit Diwan</h1>
      <p class="Designation">Entrepreneur</p>
      <p>Delhi, India</p>
      <p><button>Contact</button></p>
   </div>
</body>
</html>

Updated on: 08-Dec-2023

158 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements