Card

<mdc-card variant="filled" interactive disabled style="padding: 16px; width: 280px;">
    <h3 style="margin: 0 0 8px;">Disabled Filled</h3>
    <p style="margin: 0;">Disabled cards have reduced container opacity and cannot be clicked.</p>
</mdc-card>

<mdc-card variant="elevated" interactive disabled style="padding: 16px; width: 280px;">
    <h3 style="margin: 0 0 8px;">Disabled Elevated</h3>
    <p style="margin: 0;">Elevated shadow and surface at disabled level.</p>
</mdc-card>

<mdc-card variant="outlined" interactive disabled style="padding: 16px; width: 280px;">
    <h3 style="margin: 0 0 8px;">Disabled Outlined</h3>
    <p style="margin: 0;">Outlined border with 12% opacity.</p>
</mdc-card>

<mdc-card variant="outlined" horizontal style="width: 360px; overflow: hidden;">
    <div style="width: 100px; min-height: 100px; background: var(--md-sys-color-surface-container-high, #ece6f0); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
        <mdc-icon>image</mdc-icon>
    </div>
    <div style="padding: 16px; display: flex; flex-direction: column; justify-content: center;">
        <h3 style="margin: 0 0 4px;">Horizontal Card</h3>
        <p style="margin: 0; font-size: 14px; color: var(--md-sys-color-on-surface-variant);">Media and content side by side.</p>
    </div>
</mdc-card>

<mdc-card variant="outlined" href="https://m3.material.io/components/cards/overview" target="_blank" style="padding: 16px; width: 280px;">
    <h3 style="margin: 0 0 8px;">Link Card ↗</h3>
    <p style="margin: 0; color: var(--md-sys-color-on-surface-variant);">Renders as an anchor tag with full keyboard and ripple interaction.</p>
</mdc-card>

<mdc-card variant="filled" interactive style="padding: 16px; width: 280px;">
    <h3 style="margin: 0 0 8px;">Interactive Filled</h3>
    <p style="margin: 0; color: var(--md-sys-color-on-surface-variant);">Click or tab to trigger ripple and focus ring.</p>
</mdc-card>

<mdc-card variant="elevated" interactive style="padding: 16px; width: 280px;">
    <h3 style="margin: 0 0 8px;">Interactive Elevated</h3>
    <p style="margin: 0; color: var(--md-sys-color-on-surface-variant);">Elevates from Level 1 to Level 2 on hover.</p>
</mdc-card>

<mdc-card variant="outlined" interactive style="padding: 16px; width: 280px;">
    <h3 style="margin: 0 0 8px;">Interactive Outlined</h3>
    <p style="margin: 0; color: var(--md-sys-color-on-surface-variant);">Stroke and state layer react to pointer events.</p>
</mdc-card>

<mdc-card variant="filled" shape="round" style="padding: 16px; width: 280px;">
    <h3 style="margin: 0 0 8px;">Round (12px)</h3>
    <p style="margin: 0; color: var(--md-sys-color-on-surface-variant);">Default Medium corner radius.</p>
</mdc-card>

<mdc-card variant="filled" shape="square" style="padding: 16px; width: 280px;">
    <h3 style="margin: 0 0 8px;">Square (0px)</h3>
    <p style="margin: 0; color: var(--md-sys-color-on-surface-variant);">Square corners without radius.</p>
</mdc-card>

<mdc-card variant="filled" style="padding: 16px; width: 280px;">
    <h3 style="margin: 0 0 8px;">Filled Card</h3>
    <p style="margin: 0; color: var(--md-sys-color-on-surface-variant);">Filled cards provide subtle separation with a solid container color.</p>
</mdc-card>

<mdc-card variant="elevated" style="padding: 16px; width: 280px;">
    <h3 style="margin: 0 0 8px;">Elevated Card</h3>
    <p style="margin: 0; color: var(--md-sys-color-on-surface-variant);">Elevated cards use drop shadow for higher visual emphasis.</p>
</mdc-card>

<mdc-card variant="outlined" style="padding: 16px; width: 280px;">
    <h3 style="margin: 0 0 8px;">Outlined Card</h3>
    <p style="margin: 0; color: var(--md-sys-color-on-surface-variant);">Outlined cards use a 1px border stroke for clean separation.</p>
</mdc-card>