Mobile Cards for Meal Plans
A mobile card table for meal planning scenarios, featuring real content, interactive controls, clear state feedback, and responsive layouts across sizes.
With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mobile Cards for Meal Plans</title>
<style>
:root { --ink:#30231f; --paper:#f9efe5; --accent:#8b6fb0; --secondary:#d7a971; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"Songti SC","Noto Serif SC",Georgia,serif; background:linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,var(--ink) 7%,transparent) 50%,transparent 50.3%),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1180px,calc(100% - 40px));margin:auto;padding:7vw 0}.mast{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,.4fr);gap:5vw;align-items:end;margin-bottom:38px}.mast h1{font-family:"Songti SC",Georgia,serif;font-weight:800;font-size:clamp(42px,9vw,92px);max-width:920px;margin:0;line-height:.94}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.24em}.intro{max-width:58ch;line-height:1.9}.scenario{align-self:start;padding-top:10px;border-top:1px solid var(--ink);font-style:italic}.demo{border-radius:0;border-width:2px;box-shadow:14px 14px 0 color-mix(in srgb,var(--ink) 18%,transparent);position:relative;overflow:hidden;min-height:420px;padding:clamp(22px,4vw,48px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 22px);padding:26px 0}.mast{grid-template-columns:1fr}.demo{min-height:340px;padding:18px}}
.panel{padding:30px;border:0;border-radius:42px 12px;background:color-mix(in srgb,var(--secondary) 18%,var(--paper))}.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.stack{display:flex;flex-direction:column;gap:20px}.action{min-height:48px;padding:12px 22px;border:0;border-radius:50% 50% 18px 18px;background:color-mix(in srgb,var(--secondary) 42%,transparent);font-weight:800}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.muted{color:color-mix(in srgb,var(--ink) 64%,transparent);line-height:1.7}.status{min-height:25px;margin-top:16px;color:var(--accent)}.metric{font-size:clamp(32px,7vw,66px);font-weight:800}.meter{height:11px;border-radius:50%;background:color-mix(in srgb,var(--ink) 10%,transparent)}.meter>i{display:block;height:100%;border-radius:inherit;background:var(--accent)}.chip{padding:8px 12px;border-radius:50%;background:var(--paper)}
.composition-deck{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}.deck-bar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 18px;color:var(--paper);background:var(--ink);font:700 12px/1 ui-monospace,monospace}.deck-lights{display:flex;gap:7px}.deck-lights i{width:10px;height:10px;border-radius:50%;background:var(--accent)}.deck-lights i:nth-child(2){background:var(--secondary)}.deck-lights i:nth-child(3){background:color-mix(in srgb,var(--paper) 55%,transparent)}.composition-deck .demo{border:0;border-radius:0;box-shadow:none}
.special-table{width:100%;border-collapse:collapse;background:var(--paper)}.special-table caption{padding:14px 16px;text-align:left;font-weight:800}.special-table th,.special-table td{padding:13px 16px;border-top:1px solid var(--line);text-align:left}.special-table tbody tr:hover{background:color-mix(in srgb,var(--secondary) 14%,transparent)}.special-table-shell{overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.table-special-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}.table-special-tools select,.table-special-tools input{min-height:40px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}.responsive-table-demo{display:grid;gap:14px}.responsive-table-demo h2{margin:.35em 0}.responsive-cell-label{display:none}.responsive-record-table.force-cards{border:0;background:transparent}.responsive-record-table.force-cards table,.responsive-record-table.force-cards tbody,.responsive-record-table.force-cards tr,.responsive-record-table.force-cards td{display:block}.responsive-record-table.force-cards thead{position:absolute;clip:rect(0 0 0 0)}.responsive-record-table.force-cards tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.responsive-record-table.force-cards tr{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.responsive-record-table.force-cards td{display:grid;grid-template-columns:90px 1fr;border:0;padding:7px}.responsive-record-table.force-cards .responsive-cell-label{display:block;font-weight:900}@media(max-width:620px){.responsive-record-table{border:0;background:transparent}.responsive-record-table table,.responsive-record-table tbody,.responsive-record-table tr,.responsive-record-table td{display:block}.responsive-record-table thead{position:absolute;clip:rect(0 0 0 0)}.responsive-record-table tbody{display:grid;gap:12px}.responsive-record-table tr{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.responsive-record-table td{display:grid;grid-template-columns:90px 1fr;border:0;padding:7px}.responsive-record-table .responsive-cell-label{display:block;font-weight:900}}.workflow-guide{display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-areas:"rail core" "rail evidence";gap:14px 18px}.guide-rail{grid-area:rail;display:grid;align-content:start;gap:15px;padding:18px;border-right:1px solid var(--line)}.guide-rail ol{display:grid;gap:8px;padding:0;margin:0;list-style:none}.guide-rail li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:9px;opacity:.5}.guide-rail li[aria-current="step"]{opacity:1;color:var(--paper);background:var(--ink)}.guide-rail li.is-complete{opacity:1;color:var(--accent)}.guide-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.guide-actions .action{padding-inline:8px}#workflowGuideProgress{height:6px;background:var(--line)}#workflowGuideProgress i{display:block;width:0;height:100%;background:var(--accent)}.guide-core{grid-area:core;min-width:0;padding:16px;border:1px solid var(--line)}.guide-core>p{margin:0 0 14px;padding:10px;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,transparent)}.guide-core[data-guide-step="1"]{border-radius:28px}.guide-core[data-guide-step="2"]{box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}.guide-evidence{grid-area:evidence;display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:start}.guide-evidence details,.guide-evidence form{padding:12px;border:1px solid var(--line)}.guide-evidence label{display:grid;gap:7px}.guide-evidence textarea{width:100%;padding:9px;border:1px solid var(--line);background:var(--paper)}@media(max-width:900px){.workflow-guide{grid-template-columns:1fr;grid-template-areas:"core" "rail" "evidence"}.guide-rail{border-right:0;border-bottom:1px solid var(--line)}.guide-rail ol{grid-template-columns:repeat(3,1fr)}.guide-evidence{grid-template-columns:1fr}}
</style>
</head>
<body data-aesthetic="editorial" data-composition="control-deck">
<main class="page">
<header class="mast"><div><span class="eyebrow">editorial / mobile card table / BEGINNER</span><h1>Mobile Cards for Meal Plans</h1><p class="intro">A mobile card table for meal planning scenarios, featuring real content, interactive controls, clear state feedback, and responsive layouts across sizes.</p></div><span class="scenario">Meal plan</span></header>
<div class="composition-deck"><div class="deck-bar"><span>CONTROL DECK · 04</span><span>Mobile card table</span><span class="deck-lights" aria-hidden="true"><i></i><i></i><i></i></span></div><section class="demo" aria-label="Meal Plan Mobile Card Table Interaction Area"><div class="workflow-guide"><nav class="guide-rail" aria-label="Meal Plan Guide"><span class="eyebrow">Meal Plan GUIDE</span><ol><li data-workflow-guide-step="0" aria-current="step"><b>1</b><span>Meal plan filter view</span></li><li data-workflow-guide-step="1"><b>2</b><span>Meal Plan Comparison View</span></li><li data-workflow-guide-step="2"><b>3</b><span>Meal plan summary view</span></li></ol><div class="guide-actions"><button id="workflowGuideBack" class="action" type="button" disabled>Previous</button><button id="workflowGuideNext" class="action primary" type="button">Complete this step</button></div><div id="workflowGuideProgress" role="progressbar" aria-label="Meal plan completion" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div></nav><section id="workflowCore" class="workflow-core guide-core" data-guide-step="0" aria-describedby="workflowGuideInstruction"><p id="workflowGuideInstruction">Please complete the operations related to “Meal Plan Filter View” in the main example.</p><!-- 11DZ_CORE_START:tables-data-table-to-cards --><div class="responsive-table-demo"><header class="table-special-tools"><div><span class="eyebrow">RESPONSIVE RECORDS</span><h2>Cross-Size Meal Plan Records</h2></div><button id="tableCardModeToggle" class="action" type="button" aria-pressed="false" data-core-bridge="tables-data-table-to-cards">Preview Card Mode</button></header><div id="responsiveRecordTable" class="responsive-record-table special-table-shell"><table class="special-table"><caption>Cross-Size Meal Plan Records</caption><thead><tr><th>Project</th><th>Value</th><th>Status</th></tr></thead><tbody><tr><td><span class="responsive-cell-label" aria-hidden="true">Project</span><span class="responsive-cell-value">Meal plan reminders</span></td><td><span class="responsive-cell-label" aria-hidden="true">Value</span><span class="responsive-cell-value">18</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">To be processed</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Project</span><span class="responsive-cell-value">Meal Plan Favorites</span></td><td><span class="responsive-cell-label" aria-hidden="true">Value</span><span class="responsive-cell-value">31</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">In Progress</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Project</span><span class="responsive-cell-value">Meal plan overview</span></td><td><span class="responsive-cell-label" aria-hidden="true">Value</span><span class="responsive-cell-value">44</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">Completed</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Project</span><span class="responsive-cell-value">Meal plan</span></td><td><span class="responsive-cell-label" aria-hidden="true">Value</span><span class="responsive-cell-value">57</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">To be processed</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Project</span><span class="responsive-cell-value">Meal Plan Inspiration</span></td><td><span class="responsive-cell-label" aria-hidden="true">Value</span><span class="responsive-cell-value">70</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">In Progress</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Project</span><span class="responsive-cell-value">Meal Plan Records</span></td><td><span class="responsive-cell-label" aria-hidden="true">Value</span><span class="responsive-cell-value">83</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">Completed</span></td></tr></tbody></table></div></div><!-- 11DZ_CORE_END --></section><aside class="guide-evidence"><details id="workflowGuideDetails"><summary>View acceptance requirements</summary><ul><li>The meal plan filter view requires a visible state change at least once</li><li>The meal plan comparison view needs a visible state change at once</li><li>The meal plan summary view needs a visible state change once</li></ul></details><form id="workflowGuideEvidenceForm"><label>This step evidence<textarea id="workflowGuideEvidence" rows="3" placeholder="Record the observed state"></textarea></label><input class="action" type="submit" value="Save evidence"></form><output id="workflowGuideSummary">0 / 3 Steps Complete</output></aside></div><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:tables-data-table-to-cards */
const cardMedia=matchMedia('(max-width:620px)');const responsiveRecordTable=document.querySelector('#responsiveRecordTable');const tableCardModeToggle=document.querySelector('#tableCardModeToggle');function announceTableMode(){const forced=responsiveRecordTable.classList.contains('force-cards');announce(forced||cardMedia.matches?'Table converted to card records':'Using desktop table view');}tableCardModeToggle.addEventListener('click',()=>{const forced=responsiveRecordTable.classList.toggle('force-cards');tableCardModeToggle.setAttribute('aria-pressed',String(forced));tableCardModeToggle.textContent=forced?'Restore auto layout':'Preview Card Mode';announceTableMode();});cardMedia.addEventListener?.('change',announceTableMode);announceTableMode();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"tables-data-table-to-cards","selector":"[data-core-bridge=\"tables-data-table-to-cards\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Core Version '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowGuideCore=document.querySelector('#workflowCore');const workflowGuideStages=["Meal plan filter view","Meal Plan Comparison View","Meal plan summary view"];const workflowGuideState={step:0,completed:new Set(),evidence:new Map(),consumedVersion:0};function workflowGuideDrive(){const step=workflowGuideState.step;workflowGuideCore.dataset.guideStep=String(step);document.querySelector('#workflowGuideInstruction').textContent='Please complete the main example ‘'+workflowGuideStages[step]+'Related actions.”';document.querySelectorAll('[data-workflow-guide-step]').forEach((item,index)=>{item.classList.toggle('is-complete',workflowGuideState.completed.has(index));if(index===step)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current');});document.querySelector('#workflowGuideBack').disabled=step===0;document.querySelector('#workflowGuideNext').textContent=step===workflowGuideStages.length-1?'Application view':'Complete this step';const percent=Math.round(workflowGuideState.completed.size/workflowGuideStages.length*100);const progress=document.querySelector('#workflowGuideProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';document.querySelector('#workflowGuideSummary').textContent=workflowGuideState.completed.size+' / '+workflowGuideStages.length+' Step complete · '+workflowBridgeSummary();announce('Meal plan current step:'+workflowGuideStages[step]);}function workflowGuideAdvance(direction){if(direction>0){const bridge=workflowBridgeActivate();const version=Number(workflowGuideCore.dataset.workflowVersion||0);if(version<=workflowGuideState.consumedVersion){announce('Please complete the visible state change in the main example first');return;}workflowGuideState.consumedVersion=version;workflowGuideState.completed.add(workflowGuideState.step);announce('Main case changes recorded · '+bridge.summary);}workflowGuideState.step=Math.max(0,Math.min(workflowGuideStages.length-1,workflowGuideState.step+direction));workflowGuideDrive();}document.querySelector('#workflowGuideBack').addEventListener('click',()=>workflowGuideAdvance(-1));document.querySelector('#workflowGuideNext').addEventListener('click',()=>workflowGuideAdvance(1));document.querySelector('#workflowGuideEvidenceForm').addEventListener('submit',event=>{event.preventDefault();const version=Number(workflowGuideCore.dataset.workflowVersion||0);if(version<=workflowGuideState.consumedVersion){announce('Evidence not saved: the main example has no new changes yet');return;}const text=document.querySelector('#workflowGuideEvidence').value.trim();workflowGuideState.evidence.set(workflowGuideState.step,text||'Visible status check completed');workflowGuideState.completed.add(workflowGuideState.step);workflowGuideState.consumedVersion=version;workflowGuideDrive();announce('Evidence for this step has been saved · '+workflowBridgeSummary());});document.querySelector('#workflowGuideDetails').addEventListener('toggle',event=>announce(event.currentTarget.open?'Acceptance requirements expanded':'Acceptance requirements collapsed'));workflowGuideDrive();
workflowBridgeReset();
</script>
</body>
</html>