Content 內文欄

供文章與混排內容使用的垂直欄，子層保留自身的 margin 與自然寬度。

用法

<article sl-content>
  <h2>標題</h2>
  <p>段落文字……</p>
  <div sl-card>卡片</div>
  <div sl-notice>通知</div>
</article>

排版為 block，並非 flex。子層自身的 margin 保留，間距寫在後一個子層的上緣，與前一個子層的下 margin 合併取較大值。

卡片、通知等不帶 margin 的元件以間距隔開，標題與段落則依自身的節奏排列。

最前與最後的對外 margin 仍會清除，欄位上下緣不會一側較厚。

元件群須清除 margin、與容器同寬時，改用 sl-stack。

原始碼

<article sl-content sl-gap="lg">
  <h3>文件標題</h3>
  <p>標題與段落保留自身的 margin，相鄰子層之間另補間距；卡片與通知不帶 margin，間距即為兩者距離。</p>
  <div sl-card>卡片內容</div>
  <div sl-notice>通知內容</div>
</article>

間距

間距由 sl-gap 給定，寫在自身或外層，預設 md；僅調整單一容器時，覆寫 --sl-content-gap。

各間距的效果：

原始碼

<article sl-content>
  <h3>標題</h3>
  <p>段落內容，示範相鄰子層之間的間距。</p>
  <div sl-card>卡片內容</div>
</article>
<article sl-content sl-gap="sm">
  <h3>標題</h3>
  <p>段落內容，示範相鄰子層之間的間距。</p>
  <div sl-card>卡片內容</div>
</article>
<article sl-content sl-gap="md">
  <h3>標題</h3>
  <p>段落內容，示範相鄰子層之間的間距。</p>
  <div sl-card>卡片內容</div>
</article>
<article sl-content sl-gap="lg">
  <h3>標題</h3>
  <p>段落內容，示範相鄰子層之間的間距。</p>
  <div sl-card>卡片內容</div>
</article>