---
schema_version: "1"
id: 987667ab0af5ec9d7316edcb143479751ab68266b6571a284dfd4251a2568a49
title: SLDS Header Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_slds_header_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_slds_header_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: d5c757b984f043c58b80606d80de3f0b8555be0d33fe8493982d02c7a6d5d95c
description: For the managed package runtime, this page contains the SLDS Header LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# SLDS Header Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains the SLDS Header LWC ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Summer '20

The _SldsHeader Lightning Web Component_ displays a page header, which contains a title, an icon, field data, and action links.

## Available c-slds-header Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d240556e65">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d240556e71">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d240556e77">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d240556e83">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d240556e89">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">description</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Adds a short description for the header.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">displayName</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Sets the alternative text for the image.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">fields</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Sets the array of objects containing fields data.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">headerWrapperClass</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">
              <p style="margin-bottom:0;">css class</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Pass a wrapper CSS class the sldsHeader component.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">header</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">
              <p style="margin-bottom:0;">recommended</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Sets the header title.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">iconBgColor</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Sets the color of the icon background when using slds icons.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">iconColor</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Sets the color of the icon when using slds icons.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">iconImgWrapperclass</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Adds a class provided by the user for the custom image wrapper.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">iconName</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">
              <p style="margin-bottom:0;">recommended</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Specifies the name of the icon to show next to the header title and description.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">iconSize</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Sets the size of the icon. For available values check the Icon LWC.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">imageRef</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">To use a custom image, enter a URL.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">obj</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Specifies the obj containing the data for the fields</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">showSpinner</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">
              <p style="margin-bottom:0;">true, false (Default: false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Displays a spinner icon next to the header.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e65 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e71 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e89 ">
              <p style="margin-bottom:0;">Specifies which theme to use.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-slds-header Component

```
<c-slds-header
  header="Sample Header"
  description="Sample title for the header"
  theme={theme}
  icon-name="standard:opportunity"
  icon-size="large"
  icon-color="#fcb95b"
  icon-bg-color="#fff"
>
</c-slds-header>
```

## Available Event Handlers

_handleEdit()_

An event that expects params detail.message to be set to the header when in edit mode.

_handleSave()_

An event that resets the header after editing is done.

_fields_

This accepts an array of objects with keys name,label and type. Supports number, currency, date, datetime, percentage, phone, address, checkbox, url & icon. For `type = icon` the value need to be boolean. If true it shows check. If false it shows nothing.

```
const fields = [
  { name: "Author", label: this.authorLabel, type: "string" },
  { name: "Status", label: this.statusLabel, type: "string" },
  { name: "IsChildCard", label: this.isChildCardLabel, type: "icon" }
];
```

## Vlocity Insurance and Health Spring '20

The _SldsHeader Lightning Web Component_ displays a page header, which contains a title, an icon, field data, and action links.

## Available c-slds-header Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d240556e555">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d240556e561">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d240556e567">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d240556e573">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d240556e579">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e555 ">
              <p style="margin-bottom:0;">description</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e561 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e567 ">&nbsp;</td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e573 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e579 ">
              <p style="margin-bottom:0;">Adds a short description for the header.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e555 ">
              <p style="margin-bottom:0;">displayName</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e561 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e567 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e573 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e579 ">
              <p style="margin-bottom:0;">Sets the alternative text for the image.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e555 ">
              <p style="margin-bottom:0;">fields</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e561 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e567 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e573 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e579 ">
              <p style="margin-bottom:0;">Sets the array of objects containing fields data.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e555 ">
              <p style="margin-bottom:0;">header</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e561 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e567 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e573 ">
              <p style="margin-bottom:0;">recommended</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e579 ">
              <p style="margin-bottom:0;">Sets the header title.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e555 ">
              <p style="margin-bottom:0;">iconBgColor</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e561 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e567 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e573 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e579 ">
              <p style="margin-bottom:0;">Sets the color of the icon background when using slds icons.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e555 ">
              <p style="margin-bottom:0;">iconColor</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e561 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e567 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e573 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e579 ">
              <p style="margin-bottom:0;">Sets the color of the icon when using slds icons.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e555 ">
              <p style="margin-bottom:0;">iconImgWrapperclass</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e561 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e567 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e573 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e579 ">
              <p style="margin-bottom:0;">Adds a class provided by the user for the custom image wrapper.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e555 ">
              <p style="margin-bottom:0;">iconName</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e561 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e567 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e573 ">
              <p style="margin-bottom:0;">recommended</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e579 ">
              <p style="margin-bottom:0;">Specifies the name of the icon to show next to the header title and description.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e555 ">
              <p style="margin-bottom:0;">iconSize</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e561 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e567 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e573 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e579 ">
              <p style="margin-bottom:0;">Sets the size of the icon. For available values check the Icon LWC.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e555 ">
              <p style="margin-bottom:0;">imageRef</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e561 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e567 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e573 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e579 ">
              <p style="margin-bottom:0;">To use a custom image, enter a URL.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e555 ">
              <p style="margin-bottom:0;">obj</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e561 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e567 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e573 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e579 ">
              <p style="margin-bottom:0;">Specifies the obj containing the data for the fields</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e555 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e561 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e567 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e573 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d240556e579 ">
              <p style="margin-bottom:0;">Specifies which theme to use.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-slds-header Component

```
<c-slds-header
 header="Sample Header"
 description="Sample title for the header"
 theme={theme}
 icon-name="standard:opportunity"
 icon-size="large"
 icon-color="#fcb95b"
 icon-bg-color="#fff"
 >
</c-slds-header>

```

## Available Event Handlers

_handleEdit()_

An event that expects params detail.message to be set to the header when in edit mode.

_handleSave()_

An event that resets the header after editing is done.