Card

shadow

Element Card je flexibilný a rozšíriteľný kontajner formátu karty. Umožňuje zobraziť širokú škálu obsahu a skladá sa z hlavičky CardHeader a hlavnej časti CardContent.

Základné použitie

Separator

Vlastnosť separator slúži na zobrazenie horizontálneho oddeľovača v elemente Card Header.

Karta s obrázkom

Karta so zoznamom

Úprava štýlov

Prednastavené farebné varianty elementu Card

Vlastnosť color upravuje farbu pozadia a okraja karty. Nastavením tejto hodnoty sa farba tlačidla zmení na jednu z farieb prednastavenej farebnej palety. V predvolenom nastavení má element pozadie primary.

CSS vlastné premenné

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

Kedy použiť

Použite wje-card na zobrazenie obsahu, ktorý zlepšuje čitateľnosť, skenovateľnosť alebo kontext informácií.

Kedy nepoužiť

Nepoužívajte ho ako náhradu za štruktúrované dáta tam, kde je potrebná presná interakcia.

Prístupnosť

Doplňte alternatívny text pre obrázky, čitateľné kontrasty a textové ekvivalenty pre ikony bez popisu.

Odporúčané postupy

• Komprimujte médiá a používajte lazy loading pri veľkých zoznamoch.
• Pri kartách a zoznamoch držte konzistentné informačné priority.
• Neopakujte rovnakú informáciu súčasne textom aj ikonou bez pridanej hodnoty.

Atribúty a vlastnosti

label

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

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é	-

Udalosti

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

Metódy

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

CSS tieňové časti

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

CSS vlastné premenné

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ň.

Sloty

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