スタンフォード大学の主要な Cardinal red は #8c1515 です。Digital red #b1040e はインタラクティブ要素やアクセントに使う色で、大学のアイデンティティにおける Cardinal の代わりにはなりません。Digital blue #006cb8 はリンクに使用し、より濃いインタラクション時の色には #00548f を使用します。
このサンプルでは、展開式の詳細表示アクションに digital red を使い、背景には控えめなニュートラルカラーを使用しています。スタンフォード大学のワードマーク、シール、公式アイデンティティバーは含まれていません。大学で使用する場合は、認可されたアイデンティティ素材と大学のブランド規則に従ってください。技術リファレンスの使用は、大学からの推奨や承認を意味するものではありません。
公式のカード例は、スペーシング、タイポグラフィ、背景、アクションのユーティリティを組み合わせたセマンティックな HTML です。この構成では、イベントのカテゴリとタイトルを分け、日付と会場をテキストで示し、実際のボタンで概要をその場に表示します。Decanter の Card prop API を独自に作り出してはいません。
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Decanter editorial composition</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5f2;color:#2e2d29;font:18px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif}.cc{margin-inline:20px;max-width:1500px;padding-block:40px}h1{font-family:Georgia,serif;font-size:1.520875em;line-height:1.2;margin:24px 0}h2{font:700 1.3225em/1.25 Georgia,serif;margin:12px 0}p{margin:16px 0}.overline{letter-spacing:.12em;font-size:14px;font-weight:700}.filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-block:24px;border-block:1px solid #c0c0bf;margin-block:32px}select{font:inherit;background:white;border:1px solid #767674;padding:8px}.cards{display:grid;grid-template-columns:1fr;gap:20px}article{background:white;padding:24px;border-top:4px solid #8c1515}article time{font-size:16px;color:#53565a}.topic{font-size:14px;font-weight:600;letter-spacing:.04em}.abstract{border-top:1px solid #d5d5d4;padding-top:16px}.action{font:600 16px/1.3 Arial,sans-serif;background:#b1040e;color:white;border:0;padding:12px 20px;cursor:pointer}.action:hover{background:#820000;text-decoration:underline}.reset{font:inherit;color:#006cb8;background:none;border:0;text-decoration:underline;padding:8px 0;cursor:pointer}:focus-visible{outline:3px solid #00548f;outline-offset:4px}small{display:block;font-size:14px;color:#53565a;margin-top:32px}[hidden]{display:none!important}@media(min-width:576px){.cc{margin-inline:30px}}@media(min-width:768px){body{font-size:21px}.cc{margin-inline:50px}h1{font-size:1.728em}h2{font-size:1.44em}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:992px){.cc{margin-inline:80px}.cards{gap:36px}h1{font-size:1.953125em}h2{font-size:1.5625em}}@media(min-width:1200px){.cc{margin-inline:100px}.cards{gap:40px}}@media(min-width:1500px){body{font-size:23px}.cards{gap:48px}}@media(min-width:1700px){.cc{margin-inline:auto}}
</style><main class="cc"><p class="overline">RESEARCH CONVERSATIONS · ORIGINAL EXAMPLES</p><h1>Ideas take shape in conversation.</h1><p>A compact editorial collection interpreting Decanter’s responsive type and screen-edge rules.</p><div class="filters"><label for="topic">Topic</label><select id="topic"><option value="all">All topics</option><option value="environment">Environment</option><option value="archives">Archives</option><option value="astronomy">Astronomy</option></select><span id="count" role="status">2 example events</span></div><div class="cards"><article data-topic="environment"><p class="topic">ENVIRONMENT</p><h2>Reading the changing coast</h2><time datetime="2026-10-12">12 October · Fictional seminar room</time><p>How field notes reveal changes that a single measurement cannot capture.</p><button class="action" type="button" aria-expanded="false" aria-controls="coast">Show session details</button><div class="abstract" id="coast" hidden><p>This original sample session compares written observations, sketches and repeat measurements. The conversation asks how researchers describe uncertainty when a landscape changes gradually.</p></div></article><article data-topic="archives"><p class="topic">ARCHIVES</p><h2>The stories between records</h2><time datetime="2026-10-19">19 October · Fictional reading room</time><p>Exploring how context connects objects in a community archive.</p><button class="action" type="button" aria-expanded="false" aria-controls="archive">Show session details</button><div class="abstract" id="archive" hidden><p>This original example considers correspondence, oral history and catalogue descriptions together. It examines how a collection can preserve disagreement without erasing individual perspectives.</p></div></article></div><div id="empty" hidden><h2>No events in this example topic</h2><p>Choose another topic or return to the full collection.</p><button type="button" class="reset" id="reset">Show all topics</button></div><small>Independent OpenDesign specimen. Original content, local font fallbacks and interpreted Decanter layout rules. No Stanford identity or real event listing.</small></main><script>const topic=document.querySelector('#topic'),cards=[...document.querySelectorAll('article')];function filter(){let count=0;cards.forEach(c=>{c.hidden=topic.value!=='all'&&topic.value!==c.dataset.topic;if(!c.hidden)count++;const b=c.querySelector('button');b.setAttribute('aria-expanded','false');b.textContent='Show session details';c.querySelector('.abstract').hidden=true});document.querySelector('#count').textContent=count+' example events';document.querySelector('#empty').hidden=count!==0}topic.onchange=filter;document.querySelector('#reset').onclick=()=>{topic.value='all';filter();topic.focus()};document.querySelectorAll('.action').forEach(b=>b.onclick=()=>{let open=b.getAttribute('aria-expanded')!=='true';b.setAttribute('aria-expanded',String(open));b.textContent=open?'Hide session details':'Show session details';document.getElementById(b.getAttribute('aria-controls')).hidden=!open});</script></html>
