I was able to figure this out by defining the style in the div on line 14. Also on lines 19 and 27 I added the style to set the font color. I then needed to comment these out of my CSS <aura:component implements="forceCommunity:availableForAllPageTypes,force:appHostable" access="global" > <aura:attribute name="URL" type="String" default="" /> <aura:attribute name="Title" type="String" default="" /> <aura:attribute name="Image" type="String" default="" /> <aura:attribute name="Description" type="String" default="" /> <aura:attribute name="bgColor" type="String" default="#FFFFFF" /> <aura:attribute name="textColor" type="String" default="#FFFFFF" /> <div class="c-container1" id="main-content"> <lightning:layout multipleRows="true" horizontalAlign="space"> <lightning:layoutItem flexibility="auto" padding="around-small" size="3" class="box-1" > <div class="card-contains" style="{! 'background-color:' + v.bgColor }"> <a href="{!v.URL}" class=""> <div> <div class="results__name"> <center> <div class="headingMain" style="{! 'color:' + v.textColor }"> <h3 class="heading">{!v.Title} </h3><br /> </div> <div class="results__logo"> <center> <img class="elemLogo1" src="{!$Resource.KimbleImages + '/eleImg.2/'+v.Image}" /> </center> </div> <div class="headingDetailMain" style="{! 'color:' + v.textColor }"> <p class="headingDetail">{!v.Description}</p> </div> </center> </div> </div> </a><br/> </div> </lightning:layoutItem> </lightning:layout> </div> </aura:component>