Card

shadow

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

Basic usage

The sample represents the most common card composition: header, content, and natural indentation. It's a good start for information or presentation blocks.

Separator

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

Card with picture

The preview adds visual content to the card, so you can see how the combination of media and text content behaves in one block.

Card with list

The sample uses the card as a wrapper for more compact list content. It is suitable for reports that need to remain visually grouped.

Card with shares

If a card needs to contain primary or secondary actions, keep them in one visual group right in the card content.

Editing styles

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 variables

The demonstration focuses on the visual debugging of the tab via CSS variables. It is useful when you want to change the appearance without affecting 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 display content that improves the readability, scannability, or context of the information.

When not to use

Do not use it as a substitute for structured data where precise interaction is needed.

Accessibility

Add alternative text for images, legible contrasts and text equivalents for icons without captions.

Recommended practices

• Compress media and use lazy loading for large lists.
• Keep information priorities consistent for tabs and lists.
• Do not repeat the same information in text and icon at the same time with no added value.

Attributes and properties

ariaLabel

Popis	Nastavuje ARIA metadáta, ktoré zlepšujú prístupnosť pre asistenčné technológie.
Atribút	aria-label
Typ	any
Predvolené	-

ariaLabelledby

Popis	Nastavuje ARIA metadáta, ktoré zlepšujú prístupnosť pre asistenčné technológie.
Atribút	aria-labelledby
Typ	any
Predvolené	-

label

Popis	Nastavuje zobrazený alebo prístupný textový štítok.
Atribút	label
Typ	any
Predvolené	-

Events

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS shadow parts

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS custom variables

Názov	Popis
--wje-card-background	Vlastná CSS premenná na štýlovanie komponentu (background).
--wje-card-color	Vlastná CSS premenná, ktorá riadi color.
--wje-card-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-card-border-style	Vlastná CSS premenná na štýlovanie komponentu (border style).
--wje-card-border-width	Vlastná CSS premenná, ktorá riadi border width.
--wje-card-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-card-shadow	Vlastná CSS premenná, ktorá riadi tieň.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.