[SalesForce] Why doesn’t slds card styling show default background

My code is wrapped in an and styled with slds-card; not sure why the background is transparent. How can I get the default background styling to show?

enter image description here

    <article className="slds-card">
        <div className="slds-card__header slds-grid">
            <header className="slds-has-flexi-truncate">
                <h2 className="slds-text-heading_small">{! v.filterTitle }</h2>
            </header>
            <span className="slds-badge slds-m-right_small filter-count-badge">{!v.filterCount} </span>
        </div>



        <div className="slds-card__body">

            <div style="margin: 20px">
                <table className="slds-table slds-table_fixed-layout slds-table_bordered slds-no-row-hover slds-table_cell-buffer">
                    <thead>
                        <tr className="slds-text-title_caps">
                            <th>Field</th>
                            <th>Operator</th>
                            <th>Value</th>
                            <th className="slds-cell-shrink" /></tr>
                    </thead>    

                    <tbody>
                        <aura:iteration items="{!v.filterComponents}" var="filterRow">
                            <tr>
                                {!filterRow}
                            </tr>
                        </aura:iteration>
                    </tbody>

                </table>
            </div>

        </div>            


        <footer className="slds-card__footer">
            <lightning:buttonGroup >
              <lightning:button variant="neutral" label="Add Filter" onclick="{!c.addFilter}" />
              <lightning:button variant="neutral" label="Remove Filters" onclick="{!c.removeFilters}" />
              <lightning:button variant="brand" label="Apply and Run" onclick="{!c.fireApplicationEvent}" />
            </lightning:buttonGroup>                



        </footer>            

    </article>

UPDATE: I ended up doing the following and it works; issue was using the class attribute instead of classname, but ultimately i just used the standard lightning component.

<lightning:card iconName="{!v.filterIcon}"  >
        <aura:set attribute="title">
            <span class="slds-float_left slds-p-left_xx-small slds-p-vertical_xx-small"> {! v.filterTitle }</span>

            <span class="slds-float_right slds-p-right_xx-small slds-p-vertical_xx-small" ><lightning:badge label="{!v.filterCount}" /> </span>

        </aura:set>'

Best Answer

This is because you're using the wrong attribute className. If you want to add the standard lightning design system to your html, you need to use the attribute class like this: <article class="slds-card">

Is there any reason why you don't use the standard lightning component to insert your card to your component? You should read this documentation.

Related Topic