FREE SALESFORCE LWC COMPONENT

Record Card

Keep record cards focused on the fields users need to scan and act on quickly.

Component structure

COMPONENTwcsRecordCard

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <article class="record-card">
    <div><span class="type">Account</span><h2>{name}</h2></div>
    <p>{industry}</p>
  </article>
</template>

JavaScript

import { LightningElement, api } from 'lwc';

export default class WcsRecordCard extends LightningElement {
  @api name = 'Acme Inc.';
  @api industry = 'Technology';
}

CSS

.record-card{padding:1rem;border:1px solid #d8dde6;border-radius:.25rem;background:#fff}.type{font-size:.7rem;text-transform:uppercase;color:#5f6b7a}.record-card h2{margin:.2rem 0;font-size:1.15rem}.record-card p{margin:0;color:#5f6b7a}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>