I've been running into an issue where I've got a re-usable component that uses a lightning:card attribute. In the normal course of things, having a title is great; however, in the context of using in another component, it's completely throws off the alignment of the page.

I have tried to dynamically grab the component by both the class (in the render), id, and using the set attribute by itself. None of these have worked.

How can I hide the title section the title section in a controlled way that won't kill this re-usable component in all other contexts?

1 Answer 1


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">
        <div class="slds-card__body">
                body text 

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.

    doInit : function(component, event, helper) {
        if (component.get('v.hideTileTitle') === true) {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.