1

I am trying to get a lightning grid with lightning cards similar to this example below. I have my wireframe and the actual image. It seems that there can be more cards you can scroll through using the arrow buttons.

enter image description here

Here is the code I have so far. It is close but has some issues. The height of the cards aren't uniform. Is there a way to get this more closely aligned with the original image?

<template>
    <div class="slds-grid slds-box">
        <div class="slds-col">
                <lightning-card>
                    <lightning-layout vertical-align="center">
                        <lightning-layout-item>
                            <img src={trailheadLogoUrl} alt="Trailhead logo" />
                            </lightning-layout-item>
                            <lightning-layout-item padding="around-small">
                            <p>Welcome, Trailblazer!</p>
                            <p><br></p>
                            <div>
                            </div>
                            <p><br></p>
                            <p><lightning-formatted-url value="https://trailhead.com" label="Learn Salesforce" target="_blank" ></lightning-formatted-url></p>
                        </lightning-layout-item>
                    </lightning-layout>
                </lightning-card>
        </div>
        
        <div class="slds-col">
                <lightning-card>
                    <lightning-layout vertical-align="center">
                        <lightning-layout-item>
                            <img src={trailheadLogoUrl} alt="Trailhead logo" />
                            </lightning-layout-item>
                            <lightning-layout-item padding="around-small">
                            <p>Health Check</p>
                            <p><br></p>
                            <div class="slds-progress-bar slds-progress-bar_circular" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" role="progressbar">
                                <span class="slds-progress-bar__value" style="width:75%">
                                </span>
                            </div>
                            <p><br></p>
                            <p><lightning-formatted-url value="https://trailhead.com" label="View More Details" target="_blank" ></lightning-formatted-url></p>
                        </lightning-layout-item>
                    </lightning-layout>
                </lightning-card>
        </div>

        <div class="slds-col">
            <lightning-card padding="around-medium">
                <lightning-layout vertical-align="center">
                    <lightning-layout-item>
                        <img src={trailheadLogoUrl} alt="Trailhead logo" />
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small">
                        <p>Welcome, Trailblazer!</p>
                        <p><br></p>
                        <p><lightning-formatted-url value="https://trailhead.com" label="Learn Salesforce" target="_blank" ></lightning-formatted-url></p>
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-card>
        </div>
        <div class="slds-col">
            <lightning-card padding="around-medium">
                <lightning-layout vertical-align="center">
                    <lightning-layout-item>
                        <img src={trailheadLogoUrl} alt="Trailhead logo" />
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small">
                        <p>Welcome, Trailblazer!</p>
                        <p><br></p>
                        <p><lightning-formatted-url value="https://trailhead.com" label="Learn Salesforce" target="_blank" ></lightning-formatted-url></p>
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-card>
        </div>
        <div class="slds-col">
            <lightning-card padding="around-medium">
                <lightning-layout vertical-align="center">
                    <lightning-layout-item>
                        <img src={trailheadLogoUrl} alt="Trailhead logo" />
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small">
                        <p>Welcome, Trailblazer!</p>
                        <p><br></p>
                        <p><lightning-formatted-url value="https://trailhead.com" label="Learn Salesforce" target="_blank" ></lightning-formatted-url></p>
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-card>
        </div>
      </div>
</template>

enter image description here

Update: Progress thanks to Caspar enter image description here

1
  • Changed my answer - should get you a lot closer. Nov 18, 2022 at 4:09

1 Answer 1

0

Use a media object. Media objects pad the left image nicely and arrange everything the way you want.

EDIT: Made changes so children fill their parent.

<template>
  <div class="slds-grid slds-gutters slds-box">
  
  
    <div class="slds-col" style="align-self: stretch;">
      <article class="slds-card" style="height:100%">
        <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-avatar slds-avatar_large">
                <lightning-icon class="slds-icon_container slds-icon-standard-report" icon-name="standard:report">
                </lightning-icon>
              </span>
            </div>
            <div class="slds-media__body">
              <h3>
                <span class="slds-page-header__title slds-truncate">Welcome, Trailblazer!</span>
              </h3>

              <lightning-formatted-url value="https://trailhead.com" label="Learn Salesforce" target="_blank">
              </lightning-formatted-url>

              <br>

              <lightning-formatted-url value="https://trailhead.com" label="Another URL" target="_blank">
              </lightning-formatted-url>

              <br>

              <lightning-formatted-url value="https://trailhead.com" label="Yet Another URL" target="_blank">
              </lightning-formatted-url>


            </div>
          </header>
        </div>
      </article>
    </div>
    
    <!-- repeat this same div for more -->

  </div>
</template>

The above makes this:

enter image description here

3
  • Looks awesome! Thank you!
    – Alan
    Nov 18, 2022 at 19:54
  • Glad to help! Now of course you will need to work out the horizontal positioning of each... but that could get fiddly, so I didn't have a look at that. Nov 18, 2022 at 20:16
  • It's looking fantastic. Updated my post to include what it looks like thanks to your help.
    – Alan
    Nov 18, 2022 at 21:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .