I am trying to create custom Highlights panel using LWC, to show in the flow. Able to fetch the details, but the label names are showing in vertical form instead of row.(shown below) enter image description here

I want to show the label names in the first row similar to the highlights panel enter image description here

can anyone suggest some css to adjust the styling?

LWC component: Html:

<div class="slds-page-header slds-page-header_record-home">
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-title">
                <div class="slds-media">
                    <div class="slds-media__figure">
                        <lightning-icon icon-name="standard:opportunity" size="medium" alternative-text="Opportunity"></lightning-icon>
                    <div class="slds-media__body" style="line-height: 13px;">
                        <span class="slds-page-header__title slds-truncate" title={oppName}>{nameField}</span>
        <div class="slds-page-header__row slds-page-header__row_gutters">
            <div class="slds-page-header__col-details">
                    <ul class="slds-page-header__detail-row" style="padding-left: 12px;">
                        <template for:each={fieldList} for:item="field" for:index="index">
                            <li key={field} class="slds-page-header__detail-block">
                                <lightning-output-field field-name={field}></lightning-output-field>


import { LightningElement,api } from 'lwc';
//import {ShowToastEvent} from "lightning/platformShowToastEvent";
import fetchFields from '@salesforce/apex/HighLightsController.fetchFields';
export default class HighLightsComponent extends LightningElement {
    @api oppName;
    @api recordId;
    @api objectApiName;
    @api fieldSet;
        nameField = '';
    fieldList = [];

    connectedCallback() {
            recordId : this.recordId,
            objectName : "Opportunity",
            fieldSetName : "NewOpportunityHeaderFields"
        }).then(result => {
            if(result) {
                if(result.message != undefined) {
                    this.showToast('Error', 'error', result.message);
                this.nameField = result.nameField;
                this.fieldList = result.fieldsAPI;
        }).catch(error => {
            if(error && error.body && error.body.message) {
                this.showToast('Error', 'error', error.body.message);

1 Answer 1


You are not using slds-grid. You can try using slds-grid as your parent div and slds-col as your child div and give spacing of slds-size-1-of-4 to slds-size-4-of-4 as per the number of fields you want to display under each column.

Also check the padding for the Divs that you are using, use the SLDS recommended padding , something like slds-var-p-around-small. This would allow equal spacing between the fields in a row.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .