MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Styles
Frameworks
Components
Avatar Badge BottomAppBar Button ButtonIcon Card Checkbox Chip CircularProgress Collapse Dialog Divider Dropdown Fab Icon Layout LinearProgress List Menu NavigationBar NavigationDrawer NavigationRail Radio RangeSlider Select SegmentedButton Slider Snackbar Switch Tabs TextField Tooltip TopAppBar
Functions
Libraries

Card

Cards are versatile components that serve as containers for content and actions about a single subject.

Usage

Import the component:

import 'mdui/components/card.js';

Import the TypeScript type:

import type { Card } from 'mdui/components/card.js';

Example:

Card
<mdui-card style="width: 200px;height: 124px">Card</mdui-card>

Examples

Variant

The variant attribute determines the card's appearance.

Clickable

Add the clickable attribute to make the card interactive. This will add hover and click ripple effects.

Use the href attribute to transform the card into a link. The download, target, and rel attributes are available for link-related functionality.

Disabled State

Use the disabled attribute to disable the card.

API

Properties

AttributePropertyReflectTypeDefault
variantvariant'elevated' | 'filled' | 'outlined''elevated'

Defines the card style. Possible values:

  • elevated: Shadowed, providing more visual separation from the background than filled, but less than outlined.
  • filled: Provides minimal visual separation from the background.
  • outlined: Bordered, providing maximum visual separation from the background.
clickableclickablebooleanfalse

Makes the card clickable. When set, a mouse hover effect and click ripple effect are added.

disableddisabledbooleanfalse

Disables the card.

hrefhrefstring-

The URL for the hyperlink. If specified, the component renders as an <a> element and can use link-related attributes.

downloaddownloadstring-

Instructs the browser to treat the linked URL as a download.

Note: This is only available when href is specified.

targettarget'_blank' | '_parent' | '_self' | '_top'-

Defines where to display the linked URL. Possible values:

  • _blank: Opens in a new tab or window.
  • _parent: Opens in the parent browsing context or _self if no parent exists.
  • _self: Opens in the current browsing context. (Default).
  • _top: Opens in the topmost browsing context or _self if no ancestors exist.

Note: This is only available when href is specified.

relrel'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'-

Specifies the relationship of the linked URL as space-separated link types. Possible values:

  • alternate: Alternate versions of the current document.
  • author: Author of the current document or article.
  • bookmark: Permanent link for the nearest ancestor section.
  • external: The referenced document is not part of the same site as the current document.
  • help: Link to context-sensitive help.
  • license: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.
  • me: Indicates that the current document represents the person who owns the linked content.
  • next: Indicates that the current document is part of a series and the next document in the series is the referenced document.
  • nofollow: Indicates that the current document's original author or publisher does not endorse the referenced document.
  • noreferrer: No Referer header will be included. Also has the same effect as noopener.
  • opener: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "_blank" as target attribute value).
  • prev: Indicates that the current document is part of a series and the previous document in the series is the referenced document.
  • search: Links to a resource that can be used to search through the current document and its related pages.
  • tag: Gives a tag (identified by the given address) that applies to the current document.

Note: This is only available when href is specified.

autofocusautofocusbooleanfalse

Determines if the element should be focused when the page loads.

tabindextabIndexnumber-

Specifies the order in which the element receives focus when navigating with the Tab key.

Methods

NameParametersReturns
click
void

Simulates a mouse click on the element.

focus
  • options: FocusOptions (Optional)
void

Sets focus on the element. An optional parameter can be an object with a preventScroll property. If preventScroll is set to true, the page will not scroll to bring the focused element into view.

blur
void

Removes focus from the element.

Events

Name
focus

Emitted when the card gains focus.

blur

Emitted when the card loses focus.

Slots

Name
(default)

Card content.

CSS Custom Properties

Name
--shape-corner

The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

On this page