welcome-ui/dist/Card.css

Customizable design system with react, typescript, tailwindcss and ariakit.

@layer components{._root_13dyq_2{font-family:var(--font-family-body);letter-spacing:var(--font-letter-spacing-none);font-weight:var(--font-weight-regular);border-radius:var(--card-border-radius);background-size:cover;background-position:center;background-color:var(--card-color-background-default);border-color:var(--borderColorCard, var(--card-color-border-default));border-style:solid;border-width:var(--border-width-xs);outline:transparent solid var(--border-width-md);box-shadow:var(--boxShadowCard, var(--elevation-10));overflow:hidden;position:relative;transition-property:all;transition-duration:var(--duration-medium);transition-timing-function:ease-in-out}._root_13dyq_2:hover:not([aria-disabled]):not(:disabled){--borderColorCard: var(--card-color-border-hover);--boxShadowCard: var(--elevation-20);--colorIconHeader: var(--card-color-icon-hover)}._root_13dyq_2[aria-disabled],._root_13dyq_2:disabled{--colorCard: var(--button-color-text-tertiary-main-disabled);--colorIconHeader: var(--colorCard)}._header_13dyq_33{font-family:var(--font-family-title);letter-spacing:var(--font-letter-spacing-xs);font-weight:var(--font-weight-bold);font-size:var(--fontSizeHeader);line-height:var(--fontLineHeightHeader);color:var(--colorCard, var(--card-header-color-text-default));padding:var(--paddingBlock) var(--paddingInline) 0;display:flex;flex-direction:row;align-items:center;gap:var(--card-gap-title)}._header_13dyq_33:has(._close_13dyq_46){padding-right:calc(var(--sizeIconHeader) + var(--paddingInlineClose))}._header_13dyq_33 i.wui-icon-font,._header_13dyq_33 svg{flex-shrink:0;color:var(--colorIconHeader, var(--card-header-color-icon-default));font-weight:initial;font-size:var(--sizeIconHeader);width:var(--sizeIconHeader);height:var(--sizeIconHeader);transition:color var(--duration-medium) ease-in-out}._header_13dyq_33 ._close_13dyq_46{position:absolute;right:var(--paddingInlineClose);top:var(--paddingBlockClose);height:auto;padding-inline:0!important}._header_13dyq_33 ._close_13dyq_46>svg{color:var(--card-action-dismiss-icon-default)}._header_13dyq_33 ._close_13dyq_46:hover:not([aria-disabled]):not(:disabled)>svg{color:var(--card-action-dismiss-icon-hover)}._body_13dyq_74{font-size:var(--fontSizeBody);line-height:var(--fontLineHeightBody);color:var(--colorCard, var(--card-body-color-text-default));padding:var(--paddingBlock) var(--paddingInline);display:flex;flex-direction:column;gap:var(--gapBody)}._body_13dyq_74 ._metadata_13dyq_83{font-size:var(--fontSizeMetadata);line-height:var(--fontLineHeightMetadata);color:var(--colorCard, var(--card-body-color-meta-text-default))}._footer_13dyq_91{font-size:var(--fontSizeBody);line-height:var(--fontLineHeightBody);color:var(--colorCard, var(--card-body-color-text-default));padding:0 var(--paddingBlock) var(--paddingInline);display:flex;flex-direction:row;align-items:center;gap:var(--card-gap-actions)}._size-sm_13dyq_104{--paddingBlock: var(--card-padding-block-sm);--paddingInline: var(--card-padding-inline-sm);--sizeIconHeader: var(--card-action-dismiss-size-icon-sm);--fontSizeHeader: var(--font-size-lg);--fontLineHeightHeader: var(--font-line-height-xs);--paddingBlockClose: var(--card-action-dismiss-padding-block-start-sm);--paddingInlineClose: var(--card-action-dismiss-padding-inline-end-sm);--gapBody: var(--card-gap-content-sm);--fontSizeBody: var(--font-size-sm);--fontLineHeightBody: var(--font-line-height-md);--fontSizeMetadata: var(--font-size-xs);--fontLineHeightMetadata: var(--font-line-height-sm)}._size-md_13dyq_118{--paddingBlock: var(--card-padding-block-md);--paddingInline: var(--card-padding-inline-md);--sizeIconHeader: var(--card-action-dismiss-size-icon-md);--fontSizeHeader: var(--font-size-2xl);--fontLineHeightHeader: var(--font-line-height-xs);--paddingBlockClose: var(--card-action-dismiss-padding-block-start-md);--paddingInlineClose: var(--card-action-dismiss-padding-inline-end-md);--gapBody: var(--card-gap-content-md);--fontSizeBody: var(--font-size-md);--fontLineHeightBody: var(--font-line-height-lg);--fontSizeMetadata: var(--font-size-sm);--fontLineHeightMetadata: var(--font-line-height-md)}._size-lg_13dyq_132{--paddingBlock: var(--card-padding-block-lg);--paddingInline: var(--card-padding-inline-lg);--sizeIconHeader: var(--card-action-dismiss-size-icon-lg);--fontSizeHeader: var(--font-size-2xl);--fontLineHeightHeader: var(--font-line-height-xs);--paddingBlockClose: var(--card-action-dismiss-padding-block-start-lg);--paddingInlineClose: var(--card-action-dismiss-padding-inline-end-lg);--gapBody: var(--card-gap-content-lg);--fontSizeBody: var(--font-size-lg);--fontLineHeightBody: var(--font-line-height-lg);--fontSizeMetadata: var(--font-size-md);--fontLineHeightMetadata: var(--font-line-height-lg)}}