When lightning cards render, the first one seems to always be missaligned at the top no matter what. (this is obviously fixable with CSS). I used dymamic rendering, standard lightning:Card component and SLDS card blueprints, all resulted in the same behavior.
dynamic lightning card:
component.cmp
<div class="slds-grid slds-wrap">
{!v.body}
</div>
componentController.js
doInit : function(cmp, evt, helper) {
const featureCards = cmp.get('v.newFeatures');
featureCards.forEach( function(element){
helper.createComponent(cmp, evt, element);
})
},
componentHelper.js
createComponent : function(cmp, evt, data) {
$A.createComponent(
"c:newFeatureCard",
{
"title": data.component.label,
"cardBody": data.component.description
},
function(newCard, status, errorMessage){
//Add the new button to the body array
if (status === "SUCCESS") {
var body = cmp.get("v.body");
body.push(newCard);
cmp.set("v.body", body);
}
else if (status === "INCOMPLETE") {
console.log("No response from server or client is offline.")
// Show offline error
}
else if (status === "ERROR") {
console.log("Error: " + errorMessage);
// Show error message
}
}
);
},
lightning:card component:
component.cmp
<div>Non Dynamic Cards</div>
<div class="slds-grid slds-wrap">
<lightning:card class="feature-card slds-float_left slds-size--1-of-3">
<aura:set attribute="title">
<lightning:icon iconName="utility:connected_apps" size="small"/>
asdasd
</aura:set>
<aura:set attribute="footer">
<lightning:badge label="Tag1"/>
<lightning:badge label="Tag2"/>
<lightning:badge label="Tag3"/>
</aura:set>
Card Body (custom component)
</lightning:card>
<lightning:card class="feature-card slds-float_left slds-size--1-of-3">
<aura:set attribute="title">
<lightning:icon iconName="utility:connected_apps" size="small"/>
asdasd
</aura:set>
<aura:set attribute="footer">
<lightning:badge label="Tag1"/>
<lightning:badge label="Tag2"/>
<lightning:badge label="Tag3"/>
</aura:set>
Card Body (custom component)
</lightning:card>
<lightning:card class="feature-card slds-float_left slds-size--1-of-3">
<aura:set attribute="title">
<lightning:icon iconName="utility:connected_apps" size="small"/>
asdasd
</aura:set>
<aura:set attribute="footer">
<lightning:badge label="Tag1"/>
<lightning:badge label="Tag2"/>
<lightning:badge label="Tag3"/>
</aura:set>
Card Body (custom component)
</lightning:card>
<lightning:card class="feature-card slds-float_left slds-size--1-of-3">
<aura:set attribute="title">
<lightning:icon iconName="utility:connected_apps" size="small"/>
asdasdasd
</aura:set>
<aura:set attribute="footer">
<lightning:badge label="Tag1"/>
<lightning:badge label="Tag2"/>
<lightning:badge label="Tag3"/>
</aura:set>
Card Body (custom component)
</lightning:card>
<lightning:card class="feature-card slds-float_left slds-size--1-of-3">
<aura:set attribute="title">
<lightning:icon iconName="utility:connected_apps" size="small"/>
asdsad
</aura:set>
<aura:set attribute="footer">
<lightning:badge label="Tag1"/>
<lightning:badge label="Tag2"/>
<lightning:badge label="Tag3"/>
</aura:set>
Card Body (custom component)
</lightning:card>
<lightning:card class="feature-card slds-float_left slds-size--1-of-3">
<aura:set attribute="title">
<lightning:icon iconName="utility:connected_apps" size="small"/>
asdasdsda
</aura:set>
<aura:set attribute="footer">
<lightning:badge label="Tag1"/>
<lightning:badge label="Tag2"/>
<lightning:badge label="Tag3"/>
</aura:set>
Card Body (custom component)
</lightning:card>
</div>
SLDS Card Blueprint:
component.cmp
<div>SLDS BluePrint Cards</div>
<div class="slds-grid slds-wrap">
<article class="slds-card feature-card slds-float_left slds-size--1-of-3">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account" title="account">
<span class="slds-assistive-text">account</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
<span class="slds-text-heading_small">Accounts</span>
</a>
</h2>
</div>
<div class="slds-no-flex">
<button class="slds-button slds-button_neutral">New</button>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">Anything can go in the Card Body</div>
<footer class="slds-card__footer">
</footer>
</article>
<article class="slds-card feature-card slds-float_left slds-size--1-of-3">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account" title="account">
<span class="slds-assistive-text">account</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
<span class="slds-text-heading_small">Accounts</span>
</a>
</h2>
</div>
<div class="slds-no-flex">
<button class="slds-button slds-button_neutral">New</button>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">Anything can go in the Card Body</div>
<footer class="slds-card__footer">
</footer>
</article>
<article class="slds-card feature-card slds-float_left slds-size--1-of-3">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account" title="account">
<span class="slds-assistive-text">account</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
<span class="slds-text-heading_small">Accounts</span>
</a>
</h2>
</div>
<div class="slds-no-flex">
<button class="slds-button slds-button_neutral">New</button>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">Anything can go in the Card Body</div>
<footer class="slds-card__footer">
</footer>
</article>
<article class="slds-card feature-card slds-float_left slds-size--1-of-3">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account" title="account">
<span class="slds-assistive-text">account</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
<span class="slds-text-heading_small">Accounts</span>
</a>
</h2>
</div>
<div class="slds-no-flex">
<button class="slds-button slds-button_neutral">New</button>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">Anything can go in the Card Body</div>
<footer class="slds-card__footer">
</footer>
</article>
<article class="slds-card feature-card slds-float_left slds-size--1-of-3">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account" title="account">
<span class="slds-assistive-text">account</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
<span class="slds-text-heading_small">Accounts</span>
</a>
</h2>
</div>
<div class="slds-no-flex">
<button class="slds-button slds-button_neutral">New</button>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">Anything can go in the Card Body</div>
<footer class="slds-card__footer">
</footer>
</article>
<article class="slds-card feature-card slds-float_left slds-size--1-of-3">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account" title="account">
<span class="slds-assistive-text">account</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
<span class="slds-text-heading_small">Accounts</span>
</a>
</h2>
</div>
<div class="slds-no-flex">
<button class="slds-button slds-button_neutral">New</button>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">Anything can go in the Card Body</div>
<footer class="slds-card__footer">
</footer>
</article>
</div>
Can someone can shed some light as to the origin of this behavior and how to fix it? (is this something that should be raised with Salsforce support? - easy css fix, just throwing this out there for the community)
the same behavior results if I dont wrap the cards in a grid
slds-*--
attributes are deprecated, use theslds-*_
version instead, such asslds-size_1-of-3
.