Card

The card is a wrapper that displays content and actions on a single topic. It helps us structure the information that a user needs to digest.


                                                        
                                                        
                                                            <template>
                                                          <w-stack direction="column" gap="medium">
                                                            <w-card>
                                                              <w-text>
                                                                I am very pleased with the visit to Dr. Alicja. I have been to many
                                                                dermatologists, but none of them treated the problem, only prescribed
                                                                emergency ointments
                                                              </w-text>
                                                            </w-card>
                                                            <w-card variant="inset">
                                                              <w-text>
                                                                I am very pleased with the visit to Dr. Alicja. I have been to many
                                                                dermatologists, but none of them treated the problem, only prescribed
                                                                emergency ointments
                                                              </w-text>
                                                            </w-card>
                                                          </w-stack>
                                                        </template>
                                                        
                                                        
                                                            

Props

Name

Description

Type

Default

Values

variant

Defines the card type and its purpose

string

raised

raised, inset

padding

Controls the padding of the card

string

medium

none, medium, large

title

Defines a title for the card.

string

null

 

Slots

Name

Description

headerEnd

Optional slot that positions content at the end of the card header. Useful for actions or additional info. Title is mandatory to render this content.

default

Default content slot