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: .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 on 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	The native HTML button, anchor, or div element that wraps all child elements.

CSS Custom Vlastnosti

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

Sloty

No slots available for this component.