Change individual text colors in Arcade Element

Ed_

Based on the code below how can I change the colors of certain words individually.

Purpose: To learn how to change colors in Arcade element.

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

var intersectLayer = Intersects(building, $feature)  

// This variable will be repeated multiple times in the code
var popup = '<h2>Building</h2>';

for (var f in intersectLayer){ 
   popup += `<b>Area:</b> ${f.AREAFT} <br><br>

  
  <b>Length:</b> ${f.LENFT} <br><br>
  
  
  <b>ID:</b> ${f.ID} <br><br>
`
}  

 

Desired output:

Area: Value

Length: Value

ID: Value

kenbuja

This will make Area red

for (var f in intersectLayer){ 
   popup += `<b><font color = "#ff0000">Area</font>:</b> ${f.AREAFT} <br><br>
  <b>Length:</b> ${f.LENFT} <br><br>
  <b>ID:</b> ${f.ID} <br><br>`
}