core-module-pack v0.1

Core Module Pack

Reusable plain HTML and CSS modules for apps, dashboards, miniapps, interfaces and websites.

section-header

Use when: a section needs a label, title and short context.

Workspace

Project Overview

Current status, decisions and next actions.

<header class="section-header">
  <p class="section-label">Workspace</p>
  <h3>Project Overview</h3>
  <p>Current status, decisions and next actions.</p>
</header>

status-card

Use when: a module, project or workflow needs a visible status.

working

Core module pack

Reusable modules are ready for copy and preview.

<article class="card status-card">
  <div class="status-row">
    <span class="status">working</span>
  </div>
  <h3>Core module pack</h3>
  <p>Reusable modules are ready for copy and preview.</p>
</article>

info-card

Use when: one compact card should explain a concept, decision or reference.

Astro boundary

Astro is the preview shell. Modules stay portable.

<article class="card info-card">
  <h3>Astro boundary</h3>
  <p>Astro is the preview shell. Modules stay portable.</p>
</article>

metric-card

Use when: a short measurable value needs emphasis.

12

Core modules

<article class="card metric-card">
  <p class="metric-value">12</p>
  <p class="metric-label">Core modules</p>
</article>

action-button

Use when: a clear primary command is needed.

Open modules 
<a class="action-button" href="#module-list">Open modules</a>

button-row

Use when: two or three related actions belong together.

Primary action Secondary action 
<div class="button-row">
  <a class="button" href="#module-list">Primary action</a>
  <a class="button button-secondary" href="#pack-header">Secondary action</a>
</div>

panel

Use when: related content needs a calm bounded area.

Next action

Copy only the module needed for the current build.

<section class="panel">
  <h3>Next action</h3>
  <p>Copy only the module needed for the current build.</p>
</section>

note-panel

Use when: an instruction, constraint or decision should stand out gently.

<aside class="panel note-panel">
  <h3>Agent note</h3>
  <p>Keep the canonical module source outside Astro-specific syntax.</p>
</aside>

checklist-panel

Use when: a task, review or release needs a short checklist.

Build check

  • Inspect files.
  • Copy module.
  • Run build.
<section class="panel checklist-panel">
  <h3>Build check</h3>
  <ul class="checklist">
    <li>Inspect files.</li>
    <li>Copy module.</li>
    <li>Run build.</li>
  </ul>
</section>

empty-state

Use when: a list, panel or miniapp has no content yet.

No modules selected

Choose a reusable module to begin.

<section class="empty-state">
  <h3>No modules selected</h3>
  <p>Choose a reusable module to begin.</p>
</section>

tag-list

Use when: a small set of categories, states or constraints should scan quickly.

  • portable
  • plain HTML
  • no dependencies
<ul class="tag-list" aria-label="Module tags">
  <li class="tag">portable</li>
  <li class="tag">plain HTML</li>
  <li class="tag">no dependencies</li>
</ul>