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

Ukážka predstavuje najbežnejšiu skladbu karty: hlavičku, obsah a prirodzené odsadenie. Je to dobrý štart pre informačné alebo prezentačné bloky.

Separator

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

Karta s obrázkom

Ukážka pridáva ku karte vizuálny obsah, takže je vidieť, ako sa správa kombinácia média a textového obsahu v jednom bloku.

Karta so zoznamom

Ukážka používa kartu ako obal pre kompaktnejší zoznamový obsah. Hodí sa pre prehľady, ktoré majú zostať vizuálne zoskupené.

Karta s akciami

Ak potrebuje karta obsahovať primárne alebo sekundárne akcie, držte ich v jednej vizuálnej skupine priamo v obsahu karty.

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

Ukážka sa sústreďuje na vizuálne ladenie karty cez CSS premenné. Je vhodná vtedy, keď chcete meniť vzhľad bez zásahu do HTML štruktúry.

<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

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

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.