My First Lightning Web Component

This is my first lightning web component to list down all the available contacts from a json file.

The component visibility in any of salesforce pages is based on the configuration in meta xml file.

<lightning-card title="My Available Contacts" variant="narrow" icon-name="standard:custom57":wq>
<div class="slds-m-around_medium">
<template for:each={contacts} for:item='contact'>
<lightning-layout vertical-align="center" key={contact.Id} class="slds-m-vertical_medium">
<img src={contact.Picture__c} alt="Profile photo" />
<lightning-layout-item padding="around-small">
<lightning-formatted-phone value={contact.Phone}></lightning-formatted-phone>
<div slot="footer">
<h6>Visit My <a href="">Blog</a> for more details…</h6>
import { LightningElement } from 'lwc';
export default class ContactList extends LightningElement {
contacts = [
Id: '003171931112854375',
Name: 'Amy Taylor',
Title: 'VP of Engineering',
Phone: '6172559632',
Id: '003192301009134555',
Name: 'Michael Jones',
Title: 'VP of Sales',
Phone: '6172551122',
Id: '003848991274589432',
Name: 'Jennifer Wu',
Title: 'CEO',
Phone: '6172558877',
view raw contact-list.js hosted with ❤ by GitHub
img {
width: 70px;
height: 70px;
border-radius: 50%;
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="" fqn="contactList">

Leave a Reply

%d bloggers like this: