dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
62 lines (61 loc) • 3.12 kB
TypeScript
import { LinkTarget } from '../../common/types';
import { DdsElement } from '../../internal/dds-hu-element';
declare const DapDSCard_base: typeof DdsElement & {
new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
};
/**
* `dap-ds-card`
* @summary A card is a container for content, actions, and images in a consistent format.
* @element dap-ds-card
* @title - Card
*
* @property {'sm' | 'md' | 'lg'} size - The size of the card. Default is `sm`.
* @property {string} sizeMap - Responsive size map (e.g. "md:lg").
*
* @slot - The content of the card.
*
* @csspart base - The main card container.
*
* @cssproperty --dds-card-padding - The padding of the card. (default: var(--dds-spacing-400))
* @cssproperty --dds-card-border-radius - The border radius of the card. (default: var(--dds-radius-large))
* @cssproperty --dds-card-border-width - The border width of the card. (default: var(--dds-border-width-base))
* @cssproperty --dds-card-border-color - The border color of the card. (default: var(--dds-border-neutral-divider))
* @cssproperty --dds-card-background - The background color of the card. (default: var(--dds-background-neutral-base))
* @cssproperty --dds-card-hover-border-color - The border color when hovering over the card. (default: var(--dds-border-brand-base))
* @cssproperty --dds-card-active-border-color - The border color when the card is active. (default: var(--dds-border-brand-medium))
* @cssproperty --dds-card-shadow - The box shadow of the card. (default: none)
* @cssproperty --dds-card-hover-shadow - The box shadow when hovering over the card. (default: none)
* @cssproperty --dds-card-transition-duration - The duration of the card's transitions. (default: var(--dds-transition-medium))
* @cssproperty --dds-card-transition-timing - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out))
*/
export default class DapDSCard extends DapDSCard_base {
static tagName: string;
/** Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element. */
interactive: boolean;
/**
* The render as type of the card, only applicable when interactive.
* @type {'a' | 'button'}
*/
renderAs: 'a' | 'button';
/** Whether the card is disabled. */
disabled: boolean;
/** Removes the border around the card */
noBorder: boolean;
/** Removes the padding around the card */
noPadding: boolean;
/** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */
targetBlankText: string;
/** The link target of the card
* @type { '_blank' | '_self' | '_parent' | '_top' }
*/
target: LinkTarget;
/** The URL of the card. */
href: string;
/** The rel of the card link. */
rel: string;
static readonly styles: import('lit').CSSResult;
focus(options?: FocusOptions): void;
render(): import('lit-html').TemplateResult;
}
export {};