How this card works

The first card uses the plain slds-card class, and the second uses the standard lightning-card base component. Inside each card, a slds-grid slds-wrap container splits the space into two columns: the image takes one quarter of the width (slds-size_1-of-4) and the text takes three quarters (slds-size_3-of-4).

Differences between the two cards

• slds-card: only CSS classes. You write all the markup, so you have full control, but you have to add the header and footer yourself.
• lightning-card: a base component that supports a title, an icon-name, an actions slot and a footer slot, and matches the Lightning Experience styling automatically.

Make it responsive on mobile

On a small screen, a quarter-width image is too small. Use full width on mobile and the split layout on larger screens:

<div class='slds-col slds-size_1-of-1 slds-medium-size_1-of-4'>...image...</div>
<div class='slds-col slds-size_1-of-1 slds-medium-size_3-of-4'>...text...</div>

Make it reusable

To use the card many times, put the data in public properties and pass them from a parent component:

// imageCard.js
import { LightningElement, api } from 'lwc';

export default class ImageCard extends LightningElement {
    @api title;
    @api description;
    @api imageUrl;
    @api imageAlt = 'Card image';
}

<!-- imageCard.html -->
<template>
    <lightning-card>
        <div class='slds-grid slds-wrap'>
            <div class='slds-col slds-size_1-of-1 slds-medium-size_1-of-4 slds-align_absolute-center'>
                <img src={imageUrl} alt={imageAlt} />
            </div>
            <div class='slds-col slds-size_1-of-1 slds-medium-size_3-of-4 slds-p-horizontal_small'>
                <h2 class='slds-text-heading_medium'>{title}</h2>
                <p>{description}</p>
            </div>
        </div>
    </lightning-card>
</template>

Tips

• Always add a meaningful alt text to images.
• For a real project, store images in a Static Resource or in Salesforce Files instead of linking to another site. If an external image is blocked, add its domain to the Trusted URLs in Setup.
• Use slds-m-around_* and slds-p-around_* classes for spacing instead of custom CSS, so the card follows the Salesforce design system.