4

I am new to LWC and trying to understand the concepts. In lightning-card, as per the documentation, the variant can be base(which is default) or Narrow. But from the below code, the output is same for both variants. Please let me know if I am missing something here.

    <!-- Card with base variant -->
    <template>
        <lightning-card  title="Base variant" icon-name="standard:account">
            <lightning-button label="Save" slot="actions"></lightning-button>
            <p class="slds-p-horizontal_small">Card Body</p>
            <p slot="footer">Card Footer</p>
        </lightning-card>
    
    <!-- Card with Narrow variant -->
        <lightning-card  variant="Narrow"  title="Narrow variant" icon-name="standard:account">
            <lightning-button label="Save" slot="actions"></lightning-button>
            <p class="slds-p-horizontal_small">Card Body</p>
            <p slot="footer">Card Footer</p>
        </lightning-card>
    </template>
1
  • i've experienced the same, i bet they have a bug here.
    – Damecek
    Jul 21, 2021 at 5:45

1 Answer 1

1

The lightning base components incorporate Lighting Design System (SLDS) markup and classes. The base components handle the details and then provide simple attributes that enable you to provide variations in style. If you look at SLDS, you can see the pieces they are using and the classes that enable variations they're utilizing. For your question:

Saying

<lighting card variant="Narrow">

Shows the following when you inspect in chrome:

article class="slds-card slds-card_narrow">
    <div class="slds-card__header>
....etc

You can see the classes and how to implement your own within the blueprint for card.

It seems, this example, is a case where SLDS may have made narrow obsolete as it's not mentioned or included in the Overview of CSS Classes within the SLDS documentation for Card. In testing, the card seems to resize according to its parent element. The likely scenario is that the lightning base component documentation is incorrect and hasn't been updated to remove this variant.

Compare that to lightning-button, where the variants you use (ex. base, brand, inverse) are all listed within the blueprint for button (ex. slds-button, slds-button_brand, slds-button_inverse).

You must log in to answer this question.

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