Skip to main content

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

DescriptionThe 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.
Attributecolor
Type"danger." | "primary" | "success" | "neutral" | "complete" | "warning" | string | undefined
Defaultundefined

Eventy

No events available for this component.

Metódy

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeRefers to the <div> element inside the Card element.

CSS Custom Vlastnosti

NameDescription
--wje-card-backgroundDefines the background color of the card.
--wje-card-border-colorDefines the color of the card edge.
--wje-card-margin-bottomDefines the size of the gap from the bottom edge of the card
--wje-card-margin-inlineDefines the size of the gap from the right and left edges of the card
--wje-card-margin-topDefines the size of the gap from the top edge of the card

Sloty

NameDescription
``Main content of the Card element.