Skip to main content

Card

Card | Card format container shadow

The Card element is a flexible and expandable card format container. It allows you to display a wide range of content and consists of a header CardHeader and a main section CardContent.

Basic Usage​

Separator​

The separator property is used to display a horizontal separator in the Card Header element.

Card with picture​

Card with list​

Editing styles​

Preset colour variants of the element Card​

The color property adjusts the background and border color of the card. Setting this value will change the button color to one of the colors in the preset color palette. By default, the element has a primary background.

CSS Custom Properties​

<wj-card id="custom">
  <wj-card-header>
    <wj-card-subtitle>Subtitle</wj-card-subtitle>
    <wj-card-title>Title</wj-card-title>
  </wj-card-header>
  <wj-card-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </wj-card-content>
</wj-card>
<style>
  #custom {
    --wj-card-margin-top: 1rem;
    --wj-card-margin-bottom: 1rem;
    --wj-card-margin-inline: 1rem;
    --wj-color-contrast: #f0f;
    --wj-card-border-color: #000;
    --wj-border-size: 2px;
    --background-color: #000!important;
    --wj-font-size: .8rem;
    --wj-border-radius: 0;
  }
</style>

Attributes and Properties​

color​

DescriptionThe color to be used from the application color palette. The default options are "primary", "warning", "success", "warning", "warning", and "neutral". For more information on colors, visit Customization Basics.
Attributecolor
Type"danger." ｜ "primary" ｜ "success" ｜ "neutral" ｜ "complete" ｜ "warning" ｜ string ｜ undefined
Defaultundefined

Events​

No events available for this component.

Methods​

No public methods available for this component.

CSS Shadow Parts​

NameDescription
nativeThe native HTML button, anchor, or div element that wraps all child elements.

CSS Custom Properties​

NameDescription
--wj-card-border-colorDefines the colour of the card edge.
--wj-card-margin-bottomDefines the size of the gap from the bottom edge of the card
--wj-card-margin-inlineDefines the size of the gap from the right and left edges of the card
--wj-card-margin-topDefines the size of the gap from the top edge of the card
--wj-color-baseDefines the background colour of the card
--wj-color-contrastDefines the colour of the card text

Slots​

No slots available for this component.

Content