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.

<mdui-card variant="elevated" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="filled" style="width: 200px;height: 124px"></mdui-card>
<mdui-card variant="outlined" style="width: 200px;height: 124px"></mdui-card>

Code

Clickable

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

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

Code

Link

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

<mdui-card href="https://www.mdui.org" target="_blank" style="width: 200px;height: 124px"></mdui-card>

Code

Disabled State

Use the disabled attribute to disable the card.

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

Code

API

Properties

Attribute	Property	Type	Default
`variant`	`variant`	`'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.
`clickable`	`clickable`	`boolean`	`false`
Makes the card clickable. When set, a mouse hover effect and click ripple effect are added.
`disabled`	`disabled`	`boolean`	`false`
Disables the card.
`href`	`href`	`string`	-
The URL for the hyperlink. If specified, the component renders as an `<a>` element and can use link-related attributes.
`download`	`download`	`string`	-
Instructs the browser to treat the linked URL as a download. Note: This is only available when `href` is specified.
`target`	`target`	`'_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.
`rel`	`rel`	`'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.
`autofocus`	`autofocus`	`boolean`	`false`
Determines if the element should be focused when the page loads.
`tabindex`	`tabIndex`	`number`	-
Specifies the order in which the element receives focus when navigating with the Tab key.

Methods

Name	Parameters	Returns
`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.

Chip

Up Next

Checkbox