Filled card
Surface container highest
Un-classed body content inside the card. No .card__body wrapper.
Axismundi v3.5.3 · Wave 1
Card full-spec module
Baseline classes stay authoritative. This lab page catalogs Card variants, slots, native semantics, disabled Pattern B, and the current core/group bridge without adding runtime JavaScript.
§2. Variants — non-interactive articles
Three baseline variants rendered as static content cards. Static cards are containers, not controls.
Elevated card
Elevation level 1
Use for content that needs a slightly raised surface.
Outlined card
1px outline variant
Use where boundary clarity matters more than elevation.
§3. With media slot
The media slot uses .card__media. Demo blocks avoid
external image dependencies while exercising the same slot geometry.
Filled with media
Media reaches the card edge through the baseline negative margin.
Elevated with media
The card radius remains the baseline card radius.
Outlined with media
The slot demonstrates layout only, not content policy.
§4. Title / subtitle / un-classed body content
Classed slots are .card__title and
.card__subtitle. Body content is direct un-classed
content; .card__body is intentionally not introduced.
Research note
Ontology boundary check
This paragraph is normal card body content. It stays un-classed so the baseline slot taxonomy remains small and stable.
§5. Actions slot composition
Card owns .card__actions layout. Nested Button and Icon
button controls own their semantics, accessibility, and icon-system
dependencies.
Composition card
Nested controls remain independent
Use the actions slot for local actions without making the whole card clickable.
§6. Interactive variants
Whole-card action uses a native button. Whole-card navigation uses an anchor. Do not use fake clickable articles.
Static catalog specimen — no runtime action is wired here. Production usage wires behavior at the integrator level (theme JS / block editor / plugin).
정적 카탈로그 specimen — 여기서는 runtime action을 배선하지 않는다. 실제 사용 시 통합 레벨(theme JS / block editor / plugin)에서 behavior를 배선한다.
Navigation card
Native anchor semantics
Use this when the whole card navigates to a destination.
Static catalog specimen — this anchor points to an in-page target only. Production navigation supplies the real destination.
정적 카탈로그 specimen — 이 anchor는 페이지 내부 target만 가리킨다. 실제 사용 시 production destination을 제공한다.
§7. Disabled Pattern B split
Card disabled uses Pattern B whole-container opacity. Native disabled and aria-disabled have different behavior contracts.
Locked content card
aria-disabled article
The card is unavailable content. There is no activation to block.
Non-interactive locked card — no activation exists.
비상호작용 locked card — 차단할 activation이 없다.
Native disabled button-card — platform behavior blocks activation.
Native disabled button-card — 플랫폼 동작이 activation을 차단한다.
aria-disabled exposes disabled state and receives Pattern B
styling, but does not block activation. The integrator/plugin must guard activation.
aria-disabled는 disabled 상태와 Pattern B 외관을 제공하지만
activation을 막지 않는다. integrator/plugin이 activation을 차단해야 한다.
§8. has-state-layer opt-out
Interactive cards may compose the static state-layer foundation. This section shows the intentional opt-out path.
State-layer applied.
No state-layer overlay — intentional demo, not a bug.
state-layer 없음 — 의도된 시연, 버그 아님.
§10. Code snippets
Static article card
<article class="card card--filled"> <h3 class="card__title">Card title</h3> <p>Un-classed body content.</p> </article>
Action button-card
<button class="card card--elevated card--interactive has-state-layer" type="button"> <span class="card__title">Run action</span> <span>Un-classed body content.</span> </button>
Navigation anchor-card
<a class="card card--outlined card--interactive has-state-layer" href="/destination/"> <span class="card__title">Open destination</span> <span>Un-classed body content.</span> </a>
Actions slot composition
<article class="card card--elevated">
<h3 class="card__title">Composition card</h3>
<p>Card owns the slot; nested controls own behavior.</p>
<div class="card__actions">
<button class="ax-button is-text has-state-layer t-label-large" type="button">Read</button>
<button class="ax-icon-button is-standard has-state-layer" type="button" aria-label="More actions">
<span class="material-symbols-rounded notranslate" translate="no" aria-hidden="true" draggable="false">more_vert</span>
</button>
</div>
</article>
Disabled split
<article class="card card--elevated" aria-disabled="true">...</article> <button class="card card--elevated card--interactive" type="button" disabled>...</button> <button class="card card--elevated card--interactive" type="button" aria-disabled="true">...</button> <!-- Plugin/app code must guard activation for aria-disabled. -->
WordPress core/group bridge
<div class="wp-block-group is-style-card-filled"> <h3>Group rendered with existing card bridge</h3> <p>Current partial bridge from blocks.css §8.</p> </div>