Add blue background to a Popup heading via Arcade Element

[Ed_]

Based on the code below how can I add a blue background with white text for the headings similar to the one shown in the screenshot below?

Code:

// Create a variable that is the FeatureSet of intersecting feature attributes
var Address = FeatureSetByName($map, "ADDRESS")

var intersectLayer = Intersects(Address, $feature)

// This variable will be used multiple times in the code
var popup = '<h3>Property Summary</h3>';

for (var f in intersectLayer){

 popup += `<b>Address:</b> ${f.FullAddress} <br><br>

 `

}

// Now bring in the attributes from the next intersected layer

// Next heading
popup += <h3>Next Heading</h3>;

return { 
  type : 'text', 
  text : popup
}

 
Desired output:

[KenBuja · Accepted solution]

Use the background-color style in the font tag. However, that will be only as long as the text string itself.

var popup = '<h3><font style="background-color:lightblue" color="white">&nbsp&nbspProperty Summary&nbsp&nbsp</font></h3>';

[Ed_]

Thank you so much Ken, can you please explain what does &nbsp do?

[Ed_]

I got it so &nbsp is to add an extra white space.

Also is it possible to add a hex code instead of typing out the color name?

like will the code snippet inserted below work?

var popup = '<h3><font style="background-color:#ADD8E6" color="#FFFFFF">&nbsp&nbspProperty Summary&nbsp&nbsp</font></h3>';

[Ed_]

Yup I just checked it does indeed support HEX codes. 

Thank you so much @KenBuja  🙂

PS you can also see that the parcel attributes are now present in the popup.

[ArmstKP · Accepted solution]

Example:

Code:

<div style="background-color:{expression/expr0};color:#FFFFFF;padding:7px;text-align:center;">
    <span style="font-size:medium;">{expression/expr1}</span>
</div>
<figure class="table" style="width:100%;">
    <table style="border-collapse:collapse;font-family:arial, sans-serif;text-align:left;">
        <tbody>
            <tr style="background-color:#eee;">
                <td style="border:1px solid #ddd;padding:8px;">
                    Pool Type
                </td>
                <td style="border:1px solid #ddd;padding:8px;">
                    {Pool_Type}
                </td>
            </tr>
            <tr>
                <td style="border:1px solid #ddd;padding:8px;">
                    Explanation for Closure
                </td>
                <td style="border:1px solid #ddd;padding:8px;">
                    {public_explanation}
                </td>
            </tr>
            <tr style="background-color:#eee;">
                <td style="border:1px solid #ddd;padding:8px;">
                    Last Update
                </td>
                <td style="border:1px solid #ddd;padding:8px;">
                    {LastDateInspected}
                </td>
            </tr>
        </tbody>
    </table>
</figure>

[Ed_]

Awesome 😎 thank you for the detailed response.