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?
<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 attributeclass
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.