# Card Component

Cards are versatile components that hold content and actions for a single subject.

## Usage {#usage}

Import the component:

```js
import 'mdui/components/card.js';
```

Import the TypeScript type:

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

Example:

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

## Examples {#examples}

### Variant {#example-variant}

The `variant` attribute determines the card's appearance.

```html
<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>
```

### Clickable {#example-clickable}

Add the `clickable` attribute to make the card interactive. This adds hover and click ripple effects.

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

### Link {#example-link}

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

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

### Disabled State {#example-disabled}

Use the `disabled` attribute to disable the card.

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

## mdui-card API

### Properties

<table>
<thead>
  <tr>
    <th>Attribute</th>
    <th>Property</th>
    <th>Reflect</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>variant</td>
    <td>variant</td>
    <td>true</td>
    <td>&#39;elevated&#39; | &#39;filled&#39; | &#39;outlined&#39;</td>
    <td>'elevated'</td>
    <td><p>Defines the card variant. Possible values:</p>
<ul>
<li><code>elevated</code>: Shadowed, offering more separation from the background than <code>filled</code>, but less than <code>outlined</code>.</li>
<li><code>filled</code>: Provides minimal separation from the background.</li>
<li><code>outlined</code>: Bordered, providing the most separation from the background.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>clickable</td>
    <td>clickable</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Makes the card clickable. If set, hover and click ripple effects are added.</p>
</td>
  </tr>
  <tr>
    <td>disabled</td>
    <td>disabled</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Disables the card.</p>
</td>
  </tr>
  <tr>
    <td>href</td>
    <td>href</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>The URL for the link. When set, the component renders as an <code>&lt;a&gt;</code> element and supports link-related attributes.</p>
</td>
  </tr>
  <tr>
    <td>download</td>
    <td>download</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Downloads the linked URL.</p>
<p><strong>Note</strong>: Only available when <code>href</code> is specified.</p>
</td>
  </tr>
  <tr>
    <td>target</td>
    <td>target</td>
    <td>true</td>
    <td>&#39;_blank&#39; | &#39;_parent&#39; | &#39;_self&#39; | &#39;_top&#39;</td>
    <td></td>
    <td><p>Controls where the linked URL opens. Possible values:</p>
<ul>
<li><code>_blank</code>: Opens in a new tab or window.</li>
<li><code>_parent</code>: Opens in the parent browsing context, or <code>_self</code> if there is no parent.</li>
<li><code>_self</code>: Opens in the current browsing context (default).</li>
<li><code>_top</code>: Opens in the topmost browsing context, or <code>_self</code> if there are no ancestors.</li>
</ul>
<p><strong>Note</strong>: Only available when <code>href</code> is specified.</p>
</td>
  </tr>
  <tr>
    <td>rel</td>
    <td>rel</td>
    <td>true</td>
    <td>&#39;alternate&#39; | &#39;author&#39; | &#39;bookmark&#39; | &#39;external&#39; | &#39;help&#39; | &#39;license&#39; | &#39;me&#39; | &#39;next&#39; | &#39;nofollow&#39; | &#39;noreferrer&#39; | &#39;opener&#39; | &#39;prev&#39; | &#39;search&#39; | &#39;tag&#39;</td>
    <td></td>
    <td><p>Specifies the relationship of the linked URL as space-separated link types. Possible values:</p>
<ul>
<li><code>alternate</code>: An alternate version of the current document.</li>
<li><code>author</code>: The author of the current document or article.</li>
<li><code>bookmark</code>: The permalink for the nearest ancestor section.</li>
<li><code>external</code>: The referenced document is not part of the same site as the current document.</li>
<li><code>help</code>: A link to context-sensitive help.</li>
<li><code>license</code>: Content covered by the copyright license described by the referenced document.</li>
<li><code>me</code>: Links to content owned by the current document&#39;s author.</li>
<li><code>next</code>: The next document in the series.</li>
<li><code>nofollow</code>: Not endorsed by the original author or publisher.</li>
<li><code>noreferrer</code>: Prevents the <code>Referer</code> header from being sent. Same effect as <code>noopener</code>.</li>
<li><code>opener</code>: Creates a new browsing context when the hyperlink would otherwise open in a top-level context that is not auxiliary (for example, when <code>target=&quot;_blank&quot;</code> is specified).</li>
<li><code>prev</code>: The previous document in the series.</li>
<li><code>search</code>: Links to a resource that can be used to search through the current document and its related pages.</li>
<li><code>tag</code>: Marks the current document with the given tag.</li>
</ul>
<p><strong>Note</strong>: Only available when <code>href</code> is specified.</p>
</td>
  </tr>
  <tr>
    <td>autofocus</td>
    <td>autofocus</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Whether the element is focused when the page loads.</p>
</td>
  </tr>
  <tr>
    <td>tabindex</td>
    <td>tabIndex</td>
    <td>false</td>
    <td>number</td>
    <td></td>
    <td><p>The element&#39;s tab order when navigating with the Tab key.</p>
</td>
  </tr>
</tbody>
</table>

### Methods

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>click(): void</td>
    <td><p>Simulates a mouse click on the element.</p>
</td>
  </tr>
  <tr>
    <td>focus(options?: FocusOptions): void</td>
    <td><p>Sets focus on the element. An optional object parameter may include a <code>preventScroll</code> property. If <code>preventScroll</code> is set to <code>true</code>, the page will not scroll to bring the focused element into view.</p>
</td>
  </tr>
  <tr>
    <td>blur(): void</td>
    <td><p>Removes focus from the element.</p>
</td>
  </tr>
</tbody>
</table>

### Events

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>focus</td>
    <td><p>Emitted when the card gains focus.</p>
</td>
  </tr>
  <tr>
    <td>blur</td>
    <td><p>Emitted when the card loses focus.</p>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>(default)</td>
    <td><p>Card content.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Custom Properties

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>--shape-corner</td>
    <td><p>The corner radius of the component. You can use a specific pixel value, but it is recommended to reference <a href="/en/docs/2/styles/design-tokens#shape-corner">design tokens</a>.</p>
</td>
  </tr>
</tbody>
</table>