Custom Web Components: <profile-card>

In this example below you will see how to do a Custom Web Components: <profile-card> with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by alaneicker, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alaneicker ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Custom Web Components: <profile-card></title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul class="profiles-list">
  <li>
    <profile-card 
      bg-class="bg-orange"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></profile-card>
  </li>
  <li>
    <profile-card 
      bg-class="bg-green"
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, nulla a imperdiet tristique, elit eros pellentesque risus, at consectetur magna libero vel nisi. Sed mollis velit sed faucibus molestie. Morbi eu dolor sed eros elementum consequat. Nulla ultrices imperdiet augue non laoreet." 
      truncate="200"></profile-card>
  </li>
  <li>
    <profile-card 
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, nulla a imperdiet tristique, elit eros pellentesque risus, at consectetur magna libero vel nisi. Sed mollis velit sed faucibus molestie. Morbi eu dolor sed eros elementum consequat. Nulla ultrices imperdiet augue non laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit."></profile-card>
  </li>
  <li>
    <profile-card 
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, nulla a imperdiet tristique, elit eros pellentesque risus."></profile-card>
  </li>
  <li>
    <profile-card 
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, nulla a imperdiet tristique."></profile-card>
  </li>
</ul>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/alaneicker/custom-web-components-andltprofile-cardandgt-ddVGWG */
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  color: #333;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  padding: 24px;
}

* {
  box-sizing: border-box;
}

.profiles-list > * + * {
  margin-top: 16px;
}


/*Downloaded from https://www.codeseek.co/alaneicker/custom-web-components-andltprofile-cardandgt-ddVGWG */
class Card extends HTMLElement {
  constructor() {
    super();
    
    // Create a shadow root
    const shadow = this.attachShadow({ mode: 'open'});

    // Create layout elements
    const wrapper = document.createElement('span');
    wrapper.setAttribute('class','profile-card');
    
    const bgClass = this.getAttribute('bg-class');
    if (bgClass) {
      wrapper.classList.add(bgClass);
    }
    
    const icon = document.createElement('span');
    icon.setAttribute('class','icon');
    icon.setAttribute('tabindex', 0);
    
    const info = document.createElement('span');
    info.setAttribute('class','info');

    // Take attribute content and put it inside the info span
    const text = this.getAttribute('text');
    const truncate = parseInt(this.getAttribute('truncate'));
    info.textContent = truncate ? `${text.substring(0, truncate)}...` : text;

    // Create icon
    let imgUrl;
    if(this.hasAttribute('img')) {
      imgUrl = this.getAttribute('img');
    } else {
      imgUrl = 'https://ssl.gstatic.com/images/branding/product/1x/avatar_circle_blue_512dp.png';
    }
    
    const img = document.createElement('img');
    img.src = imgUrl;
    icon.appendChild(img);

    // CSS styles
    const style = document.createElement('style');

    style.textContent = `
      .profile-card { 
        background-color: #e0ecf4;
        align-items: center;
        display: flex; 
        padding: 16px;
        width: ${this.getAttribute('width') || 'auto'}
       }
      .profile-card.bg-orange {
        background: #de5c08;
        color: #fff;
      }
      .profile-card.bg-green {
        background: #72b325;
        color: #fff;
      }
      .profile-card img { 
        border-radius: 50%;
        display: block;
        max-width: 70px; 
       }
      .profile-card .info { 
        flex: 1 0;
        margin-left: 24px; 
       }
    `;

    shadow.appendChild(style);
    shadow.appendChild(wrapper);
    wrapper.appendChild(icon);
    wrapper.appendChild(info); 
  }
  
  connectedCallback() {
    console.log('Custom <profile-card> element added to page.');
  }
}

customElements.define('profile-card', Card);

Comments