app/src/content/embeds/demo/content-structure.html

<div class="cs" role="img" aria-label="Content folder structure: MDX, assets, embeds">
  <div class="cs__header">
    <svg class="cs__folder" viewBox="0 0 64 32" aria-hidden="true">
      <path d="M6 10h14l4 4h30"/>
      <rect x="4" y="14" width="56" height="12" rx="4" ry="4"/>
    </svg>
    <span class="cs__path">/app/src/content</span>
  </div>

  <div class="cs__grid">
    <div class="cs__box">
      <div class="cs__box-head">
        <svg class="cs__icon" viewBox="0 0 24 24" aria-hidden="true">
          <rect x="4" y="4" width="12" height="16" rx="2" ry="2"/>
          <path d="M16 4l4 4h-4z"/>
        </svg>
        <span class="cs__label">MDX</span>
      </div>
      <div class="cs__items">
        <div class="cs__item">article.mdx</div>
        <div class="cs__item"><a href="#chapters">chapters/</a>*.mdx</div>
      </div>
    </div>

    <div class="cs__box">
      <div class="cs__box-head">
        <svg class="cs__icon" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M6 4h10a2 2 0 0 1 2 2v14c-2-1-4-2-6-2s-4 1-6 2V6a2 2 0 0 1 2-2z"/>
          <path d="M6 8h10"/>
        </svg>
        <span class="cs__label">Bib</span>
      </div>
      <div class="cs__items">
        <div class="cs__item">bibliography.bib</div>
      </div>
    </div>
    <div class="cs__box">
      <div class="cs__box-head">
        <svg class="cs__icon" viewBox="0 0 24 24" aria-hidden="true">
          <rect x="4" y="6" width="16" height="12" rx="2" ry="2"/>
          <circle cx="8" cy="10" r="1.2"/>
          <path d="M6 16l4-3 2 2 3-2-1 3H6z"/>
        </svg>
        <span class="cs__label">assets/</span>
      </div>
      <div class="cs__items">
        <div class="cs__item">audio/</div>
        <div class="cs__item">image/</div>
        <div class="cs__item">data/</div>
      </div>
    </div>

    <div class="cs__box">
      <div class="cs__box-head">
        <svg class="cs__icon" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M8 16l-4-4 4-4"/>
          <path d="M16 16l4-4-4-4"/>
        </svg>
        <span class="cs__label">embeds/</span>
      </div>
      <div class="cs__items">
        <div class="cs__item"><a href="#htmlembed">*.html</a></div>
      </div>
    </div>
    
  </div>
</div>

<style>
  .cs {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-bg);
    color: var(--text-color);
    padding: 10px 12px 12px;
  }
  .cs__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 10px 0;
  }
  .cs__folder { width: 28px; height: 20px; display: block; stroke: var(--text-color); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .cs__path { font-weight: 600; font-size: 14px; }

  .cs__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .cs__box {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-bg);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    min-height: 120px;
  }
  .cs__box-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .cs__icon { width: 18px; height: 18px; display: block; stroke: var(--text-color); fill: none; stroke-width: 1.6; }
  .cs__label { font-weight: 700; font-size: 13px; }
  .cs__items { display: grid; gap: 4px; }
  .cs__item { font-size: 12px; color: var(--muted-color); }

  @media (max-width: 1180px) { .cs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px) { .cs__grid { grid-template-columns: 1fr; } }
</style>