Material Design Team Member Profile UI

Material Design Team Member Profile UI
Code Snippet:Material Team Member Profile
Author: Ariel Gerstein
Published: January 3, 2024
Last Updated: January 22, 2024
Downloads: 177
License: MIT
Edit Code online: View on CodePen
Read More

This Material Design Team Member Profile UI code styles a responsive profile page. The CSS creates a clean layout with a distinctive header and main content sections. The header features navigation tabs, while the main content displays a member list and detailed member data.

The design incorporates vibrant colors, responsive design, and intuitive button layouts. Helpful for crafting visually appealing team member profiles with a modern Material Design aesthetic.

How to Create Material Design Team Member Profile Ui

1. First of all, load the Reset CSS, Materialize CSS, and Material Icons by adding the following CDN links into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>

2. Copy the following HTML code into your project, embedding it where you want the member profile to appear. Replace placeholder images and texts with actual content. Experiment with images, greetings, and informative snippets to create a visually engaging member profile.

<div class='member'>
  <header class='member-header'>
    <div class='member-header__container mdl-layout--fixed-header mdl-layout--fixed-tabs'>
      <div class='member-header__head'>
        <div class='member-header__head__back-btn'>
          <button class='mdl-button mdl-js-button mdl-button--icon'>
            <i class='material-icons'>keyboard_backspace</i>
          </button>
        </div>
        <h2 class='member-header__head__title'>Staff</h2>
        <div class='member-header__head__search-btn'>
          <button class='mdl-button mdl-js-button mdl-button--icon'>
            <i class='material-icons'>search</i>
          </button>
        </div>
        <div class='member-header__head__menu-btn'>
          <button class='mdl-button mdl-js-button mdl-button--icon'>
            <i class='material-icons'>more_vert</i>
          </button>
        </div>
      </div>
      <div class='member-header__nav mdl-tabs mdl-js-tabs mdl-js-ripple-effect'>
        <div class='mdl-tabs__tab-bar'>
          <a class='mdl-tabs__tab mdl-layout__tab is-active' href=''>Active</a>
          <a class='mdl-tabs__tab mdl-layout__tab' href=''>Invited</a>
          <a class='mdl-tabs__tab mdl-layout__tab' href=''>Disabled</a>
        </div>
      </div>
    </div>
  </header>
  <main class='member-content'>
    <section class='member-list'>
      <div class='member-list__item active'>
        <span class='member-list__item__name'>Alice Doe</span>
        <span class='member-list__item__admin'>Admin</span>
      </div>
      <div class='member-list__item'>
        <span class='member-list__item__name'>Rohan Smith</span>
      </div>
    </section>
    <section class='member-data'>
      <h1 class='member-data__name'>Alice Doe</h1>
      <div class='mdl-tabs mdl-js-tabs mdl-js-ripple-effect'>
        <nav class='member-data__navigation mdl-tabs__tab-bar'>
          <a class='member-data__navigation__item mdl-tabs__tab mdl-layout__tab is-active' href=''>Profile</a>
          <a class='member-data__navigation__item mdl-tabs__tab mdl-layout__tab' href=''>Reports</a>
          <a class='member-data__navigation__item mdl-tabs__tab mdl-layout__tab' href=''>Sales</a>
        </nav>
      </div>
      <div class='member-data-content'>
        <img alt='' src=''>
        <h5 class='member-data__hi'>Meet Alice!</h5>
        <p class='member-data__info'>
          Alice was last active on the 23rd of May 2015
          and made
          <span class='member-data__info__money'>R450.95</span>
          in card transactions in the last month.
        </p>
        <section class='member-data__actions'>
          <div class='member-data__actions__item'>
            <i class='icon material-icons'>message</i>
            <span class='text'>SMS</span>
          </div>
          <div class='member-data__actions__item'>
            <i class='icon material-icons'>call</i>
            <span class='text'>Call</span>
          </div>
          <div class='member-data__actions__item'>
            <i class='icon material-icons'>mode_edit</i>
            <span class='text'>Edit</span>
          </div>
          <div class='member-data__actions__item'>
            <i class='icon material-icons'>clear</i>
            <span class='text'>Disable</span>
          </div>
        </section>
      </div>
    </section>
  </main>
</div>

3. Likewise, include the CSS code to maintain the consistent Material Design styling.

body {
  background-color: #a8def3;
}

.member {
  background-color: white;
  width: 1200px;
  margin: 40px auto;
  position: relative;
}

/* Header */
.member-header {
  background-color: #00a2e0;
  color: white;
}

.member-header__container {
  width: 450px;
  padding-top: 25px;
}

.member-header__head {
  display: flex;
  align-items: center;
}
.member-header__head > .member-header__head__back-btn,
.member-header__head > .member-header__head__search-btn,
.member-header__head > .member-header__head__menu-btn {
  flex-basis: 15%;
  text-align: center;
}
.member-header__head > .member-header__head__title {
  font-size: 20px;
  flex-basis: 55%;
  margin: 0;
}

.member-header__nav .mdl-tabs__tab {
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  padding: 0 16px;
  border-bottom: 3px solid transparent;
}
.member-header__nav .mdl-tabs__tab.is-active:after {
  background: white !important;
}
.member-header__nav .mdl-tabs__tab.is-active {
  color: white !important;
}

/* Main content */
.member-content {
  display: flex;
  height: 600px;
  background-color: #f7f7f7;
}

.member-list {
  width: 450px;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}
.member-list .member-list__item {
  display: flex;
  height: 75px;
  align-items: center;
  padding-left: 30px;
  font-size: 18px;
  box-shadow: 0 2px 0 #f0f0f0;
}
.member-list .member-list__item.active {
  background-color: white;
}

.member-list__item__name {
  flex-basis: 60%;
}

.member-list__item__admin {
  background-color: #6ccb59;
  font-size: 13px;
  color: white;
  padding: 2px 15px;
  border-radius: 5px;
}

.member-data {
  background-color: white;
  margin-right: 20px;
  margin-bottom: 20px;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  bottom: 0;
  margin-left: 450px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  padding: 0 40px;
}

.member-data__name {
  font-size: 22px;
  margin-bottom: 12px;
}

.member-data__navigation {
  border-bottom: none;
}

.member-data__navigation__item {
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
}

.member-data__navigation__item:after {
  background-color: #00a2e0 !important;
}

.member-data-content {
  margin-top: 220px;
  display: flex;
  flex-direction: column;
}

.member-data__hi {
  text-align: center;
  font-size: 16px;
}

.member-data__info {
  text-align: center;
  width: 220px;
  margin: 10px auto;
}

.member-data__info__money {
  color: #7dd16c;
}

.member-data__actions {
  display: flex;
  flex-direction: row;
  margin: 80px auto 0 auto;
}

.member-data__actions__item {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #888e93;
  padding: 0 30px;
  border-right: 1px solid rgba(136, 142, 147, 0.2);
  cursor: pointer;
}
.member-data__actions__item > .icon {
  margin-bottom: 10px;
}

4. Finally, load the Material JS by adding the following CDN link just before closing the body tag:

<script src='https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js'></script>

That’s all! hopefully, you have successfully integrated this Material Design Team Member Profile into your project. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...