I searched quite a bit to see if I could find an answer (or even a question) for this, and was unable to. I figured I'm not the only one with this issue so I decided to share!
I ended up with using a bit of CSS magic and conditional expression in the code. By using a conditional statement to display a certain class, I was able to create an anchor for the CSS to find the child header and modify it only when that class name was present.
<aura:component access="global">
<aura:attribute access="global" name="tileTitle" type="String" description="The title of the tile" />
<aura:attribute access="global" name="hideTileTitle" type="Boolean" default="false" description="Will hide the title if set to true"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<lightning:card class="{!'slds-theme_default '+if(v.hideTileTitle,'hide-title',' ')}" aura-id="card">
<aura:set attribute="title">
{!v.tileTitle}
</aura:set>
<div class="slds-card__body">
body text
</div>
</lightning:card>
</aura:component>
Here is the CSS
.THIS.hide-title > header.slds-card__header {
display: none;
}
Using this method fixed my problem. I hope this will help save someone else some time and skull sweat. I would love to hear from other folks if there's a better way to accomplish this.
Also, if you don't want to use a conditional statement in the component you can always use your JS controller to do the deed.
//Controller
({
doInit : function(component, event, helper) {
if (component.get('v.hideTileTitle') === true) {
$A.util.toggleClass(component.find('card'),'hide-title');
}
},
})