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

<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: 0.8rem;
    --wj-border-radius: 0;
  }
</style>

Atribúty a Vlastnosti

color

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

Eventy

No events available for this component.

Metódy

No public methods available for this component.

CSS Shadow Parts

Name	Description
native	Refers to the <div> element inside the Card element.

CSS Custom Vlastnosti

Name	Description
--wje-card-background	Defines the background color of the card.
--wje-card-border-color	Defines the colour of the card edge.
--wje-card-margin-bottom	Defines the size of the gap from the bottom edge of the card
--wje-card-margin-inline	Defines the size of the gap from the right and left edges of the card
--wje-card-margin-top	Defines the size of the gap from the top edge of the card

Sloty

Name	Description
``	The main content of the Card element.