You need to sign in to do that
Don't have an account?
Matyas Csaba
lightning:card title and footer background color
Helo Helpers
I have a simple lightning card which has a title and a footer and in the body a list of string
I would like to have different background color for title section for Footer section and if possible for the body section
I guess I have to play wiht the STYLEs and/or class but I am not familiar with these.
See below the code of my component
<lightning:card class="slds-text-heading_small slds-card_boundary" title="attribute1" footer="attribute2" >
<div class="slds-p-left--medium slds-p-right--medium">
<ul class="slds-list--vertical slds-has-dividers--top-space">
<aura:iteration items="{!v.items}" var="item" indexVar="i">
<li class="slds-list__item">
{!item}
</li>
</aura:iteration>
</ul>
</div>
</lightning:card>
Any sugeston of code fragment welcommed
thanks in advance
Csbaa
I have a simple lightning card which has a title and a footer and in the body a list of string
I would like to have different background color for title section for Footer section and if possible for the body section
I guess I have to play wiht the STYLEs and/or class but I am not familiar with these.
See below the code of my component
<lightning:card class="slds-text-heading_small slds-card_boundary" title="attribute1" footer="attribute2" >
<div class="slds-p-left--medium slds-p-right--medium">
<ul class="slds-list--vertical slds-has-dividers--top-space">
<aura:iteration items="{!v.items}" var="item" indexVar="i">
<li class="slds-list__item">
{!item}
</li>
</aura:iteration>
</ul>
</div>
</lightning:card>
Any sugeston of code fragment welcommed
thanks in advance
Csbaa
Add the below style in your component:
.THIS .slds-card__header{
background-color: aliceblue;
}
.THIS .slds-card__body{
background-color: cyan;
}
.THIS .slds-card__footer{
background-color: aquamarine;
}
Thanks,
Maharajan.C
All Answers
Please try this code:
================================================
component.cmp
<lightning:card class="slds-text-heading_small slds-card_boundary" title="attribute1" footer="attribute2" >
<div class="slds-p-left--medium slds-p-right--medium">
<ul class="slds-list--vertical slds-has-dividers--top-space">
<aura:iteration items="{!v.items}" var="item" indexVar="i">
<li class="slds-list__item">
{!item}
</li>
</aura:iteration>
</ul>
</div>
</lightning:card>
=================================================
component.css
.THIS {
}
.THIS.slds-card{
background-color: aliceblue!important;
}
I hope it helps you.
Please let me know if you have any other query. If this solution is helpful then please mark it as Best Answer.
Thanks,
Ankit Rathor
Add the below style in your component:
.THIS .slds-card__header{
background-color: aliceblue;
}
.THIS .slds-card__body{
background-color: cyan;
}
.THIS .slds-card__footer{
background-color: aquamarine;
}
Thanks,
Maharajan.C
thanks
alexsunny
_________________________
https://ometv.onl/ https://chatroulette.top/ https://omegle.wtf/ https://bazoocam.cam/