import { CSSResultGroup } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/card/card.d.ts /** * * * @summary Provides a flexible and visually appealing way to organize and present content in a consistent and easily * @tag sigvelo-card * digestible format. * @documentation https://design-system.sigvelo.com/docs/components/card * @status stable * @since 1.0 * * @slot - Content to place in the dialog's body. * @slot header - Content to place in the dialog's header. * @slot actions - Slot in one or more text buttons to add actions to the card's header (vertical) or footer * (horizontal). Only available when the respective header/footer is enabled. * @slot footer - Content to place in the dialog's footer. * * @cssproperty [--spacing=1.5rem] - The spacing to use throughout the card. * @cssproperty [--border-width] - The width of the card's border, including interior borders. * @cssproperty [--border-style] - The style of the card's border. * * @csspart body - The container that wraps the card's body. * @csspart header - The container that wraps the card's header. A flex container, by default. * @csspart footer - The container that wraps the card's footer. A flex container, by default. * @csspart media - The container that wraps the card's media. * * @example Default * ```html * * A tabby kitten sleeps next to a toy mouse. * * There's nothing more delightful than watching a curious kitten explore the world with big, innocent eyes and tiny, playful paws. * * I agree * Learn more * * ``` * * @example Basic card * Cards are really just styled containers. You can put almost anything in them. * * ```html * *

Cats are awesome

*

A cat is a bundle of energy, always ready for playtime and filled with amusing antics.

*

The playful nature of a fun cat is contagious, as their curiosity and mischievous behavior make for endless entertainment and laughter.

* * ``` * * @example With header * Place elements into the `header` slot to add content at the start of the card. Enabling the header in vertical cards also enables the `actions` slot, which is a good place to put relevant icon buttons. * * ```html * *

Fact of the day

* * * * * Playful cats thrive on interaction with their human companions, and their spirited nature can strengthen the bond between them, making for a loving and enriching relationship. * * ``` * * @example With footer * Place elements into the `footer` slot to add actions or other supplemental information at the end of the card. * * ```html * * Playful cats are known for their lively and energetic nature, often engaging in interactive games and activities that stimulate their physical and mental well-being. * * Continue reading * More info * * ``` * * @example With media * Place an image or video into the `media` slot to add media at the beginning of the card. For consistency, you can set a custom height on the media and it will be cropped and resized as needed. * * ```html * * A fluffy kitten sprawls out on a red pillow with its eyes closed and paws in the air. * * A young light gray medium-haired cat, with its soft fur and gentle paws, sprawls contentedly on a vibrant red pillow, basking in the warmth and comfort it provides. * * * * * * Watching a cute cat video can instantly brighten your day, as you witness the playful antics and adorable expressions of these charming creatures, leaving you with a warm smile and a heart full of joy. * * * ``` * * @example Changing the variant * Set the `variant` attribute to `filled` to change the card's variant. * * ```html * * Did you know? *

A cat's purr isn't just adorable, it vibrates at frequencies between 25 and 150 Hz which studies suggest can promote healing and reduce stress in their human companions.

* * Amazing! * * ``` * * @example Horizontal cards * Set the `orientation` attribute to `horizontal` to create a card with a horizontal, side-by-side layout. When using the `media` slot, be sure to set a width or maximum width on the image. Horizontal cards do not draw borders to separate the header and footer slots. * * ```html * * Two white kittens laying in a cozy basket * * When kittens sleep, they enter a world of peaceful dreams filled with playful adventures and soft purrs. * * * * * * * * ``` * * **Note:** Unlike vertical cards, horizontal cards can make use of the `actions` slot without the header enabled. * * @example Wrapping with links * You can wrap links around cards to make the entire card clickable. You might need to add custom styles to prevent unwanted colors, underlines, and transitions from leaking into the card. Consider using styles that make it obvious to users that the card is clickable. * * ```html * * * Clicking anywhere on this card will take you somewhere because it's surrounded by a link. * * * ``` * * **Note:** If you wrap a card with a link, avoid nesting buttons, form controls, links, videos, and other interactive content inside of the card. */ declare class SigveloCard extends SigveloElement { static observeSlots: boolean; static styles: CSSResultGroup; /** Determines the card's variant. */ variant: "normal" | "filled"; /** The card's orientation. */ orientation: "horizontal" | "vertical"; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-card": SigveloCard; } } //#endregion export { SigveloCard as t };