Material Design Team Member Profile UI

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.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.