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 24 24" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <path d="M4 7h4.5l1.8 2H20"/>
      <rect x="4" y="9" width="16" height="10" rx="2" ry="2"/>
    </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="3" y="3" width="14" height="18" rx="2" ry="2"/>
          <path d="M14 3l4 4h-4z"/>
          <path d="M7 11l-2 2l2 2"/>
          <path d="M13 11l2 2l-2 2"/>
          <path d="M10 11v4"/>
        </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 5h10a2 2 0 0 1 2 2v12c-2-.9-4-1.6-6-1.6S8 18.1 6 19V7a2 2 0 0 1 2-2z"/>
          <path d="M6 9h12"/>
        </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="3" y="5" width="18" height="14" rx="2" ry="2"/>
          <circle cx="8" cy="10" r="1.4"/>
          <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="M9 16l-4-4l4-4"/>
          <path d="M15 16l4-4l-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;
    margin-bottom: var(--block-spacing-y);
  }
  .cs__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 10px 0;
  }
  .cs__folder {
    width: 20px;
    height: auto;
    display: block;
    flex: 0 0 auto;
    stroke: var(--text-color);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
  }
  .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.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
  }
  .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>