Card With Image - Building Re-Usable Lightning Web Component
Here is the another post on building re-usable lighting web components. We will be building slds and lighting card with image. In the demo first card is created using slds-card and second is using standard Lighting Card.
These cards are fully responsive. Using slds-grid system we can build multi col layout in salesforce lwc.
Using slds-card
LWC HTML code for building card with image using slds-card.
<div class="slds-card">
<div class="slds-grid slds-wrap">
<!-- Image Section Start Here-->
<div class="slds-col slds-size_1-of-4 ">
<div class="slds-m-around_xx-small slds-m-top_x-small slds-align_absolute-center">
<img src="https://cdn.pixabay.com/photo/2024/10/27/07/12/women-9152739_1280.jpg" alt="Source pixabay">
</div>
</div>
<!-- Content Section Start Here -->
<div class="slds-col slds-size_3-of-4">
<div class="slds-m-around_xx-small">
<h2 class="slds-text-heading_medium"><a href="#">Asam Treding Company</a></h2>
<p>Assam is a state in northeastern India known for its wildlife, archeological sites and tea plantations. In the west, Guwahati. </p>
</div>
</div>
</div>
</div>Using Lightning-Card
LWC HTML code for building card with image using Lightning-Card.
<lightning-card >
<div class="slds-grid slds-wrap">
<!-- Image Section Start Here-->
<div class="slds-col slds-size_1-of-4 ">
<div class="slds-m-around_xx-small slds-m-top_x-small slds-align_absolute-center">
<img src="https://cdn.pixabay.com/photo/2021/12/13/19/10/nature-6868923_1280.jpg" alt="Source pixabay">
</div>
</div>
<!-- Content Section Start Here -->
<div class="slds-col slds-size_3-of-4">
<div class="slds-m-around_xx-small">
<h2 class="slds-text-heading_medium"><a href="#">Puducherry Tea Company</a></h2>
<p>Pondicherry Airport is a domestic airport serving the union territory of Puducherry,
India. It is located at Lawspet, situated 8.1 km from the international community of Auroville </p>
</div>
</div>
</div>
</lightning-card>
