Card

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 CardHeader and a CardContent header.

Basic usage

This example shows the most common card composition: header, content, and default spacing. It is a good starting point for informational or presentation blocks.

Separator

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

Card with picture

This example adds visual media to the card so you can see how image-led content behaves together with text inside one block.

Card with list

This example uses a card as a wrapper for denser list content. It is useful for summaries that should still feel visually grouped.

Card with actions

When a card needs primary or secondary actions, keep them in a single visual group directly inside the card content.

Styling

Preset color 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

This example focuses on visual card customization through CSS variables instead of changing the HTML structure.

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

When to use

Use wje-card to improve readability, scannability, and contextual understanding of content.

When not to use

Do not replace structured interactive data with media-only presentation when precision is needed.

Accessibility

Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.

Best Practices

• Compress media and use lazy loading in larger collections.
• Keep information priority consistent across cards/lists.
• Avoid duplicating the same meaning in icon and text without added value.

Attributes and Properties

ariaLabel

Description	Sets ARIA metadata used to improve accessibility semantics for assistive technologies.
Attribute	aria-label
Type	any
Default	-

ariaLabelledby

Description	Sets ARIA metadata used to improve accessibility semantics for assistive technologies.
Attribute	aria-labelledby
Type	any
Default	-

label

Description	Sets the user-visible or accessible label text.
Attribute	label
Type	any
Default	-

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

Name	Description
--wje-card-background	Background of the component;.
--wje-card-color	Color of the component;.
--wje-card-border-color	Border color of the component;.
--wje-card-border-style	Border style of the component;.
--wje-card-border-width	Border width of the component;.
--wje-card-border-radius	Border radius of the component;.
--wje-card-shadow	Shadow of the component;.

Slots

Name	Description
default	Default slot for the main component content.