Mga pattern ng artikulo

Mga callout

Apat na bandila para sa isang bitag, isang tip, isang babala o isang neutral na tala, bawat isa ay may sariling kulay at icon. Hinihila nila ang isang mahalagang punto palabas ng daloy nang hindi ito sinisira.

Blockquote

Isang hinugot na sipi, ipinakita sa pamamagitan ng isang berdeng linya sa kaliwa sa isang may-tint na panel. Ginagamit para sa isang tunay na sipi, hindi para sa diin: ang diin ay para sa bold.

Code

Ang inline code ay nasa isang may-tint na chip. Ang mga block ay may header na may wika at mga kontrol na Copy at Expand, may syntax highlight gamit ang Shiki sa isang light at isang dark na tema, at umaabot sila nang full-bleed sa mga gilid ng screen sa isang telepono kaya may puwang ang isang malapad na linya.

const tokens = getDesignTokens();
renderTable(tokens.colors);

Ang code block ay maaari ring may file-path header: mono strip sa itaas ng code na nagpapangalan sa file na kinabibilangan nito. Sa phone, may pangatlong control na sumasama sa Copy at Expand: Wrap, na nagti-tiklop ng mahahabang linya sa halip na i-scroll ang mga ito.

Mga table

Hindi kailanman gumagamit ang artikulo ng hubad na HTML table. Ang classic na table ay nasa loob ng bordered na card na may sticky na unang column at monospace na header strip; at kung saan mag-aaway ang mga row at ang column ng phone, nagiging bespoke na card ang data. Lahat ng limang pattern, ni-render mula sa totoong mga class:

Simpleng table

Ang magaan na table ng docs na ito: mono uppercase na header strip sa badge tint, napakanipis na row divider, nakabalot sa rounded na scrollable card. Para sa token-at-value na data na kasya sa tatlo o apat na column; ang mas malapad ay para sa mga bespoke table pattern sa itaas. Ang mga table-mini class.

Kapag ang isang row ay may higit sa tatlo o apat na column, huwag itong hayaang mag-scroll pagilid: magdagdag ng table-stack at bigyan ang bawat cell ng data-label. Mula 700 pixels, pareho pa rin ang table; sa phone, nagtatago ang header row at bawat row ay nagsasalansan sa label-value pairs — ganito binabasa ang type scale sa Typography page. Markahan ang title cell ng row ng stack-lead at ang panghuling note ng stack-end. At kapag maging ang pairs ay masyadong malapad, bitawan ang table: ang mga colour swatch ay lumalabas bilang wrapping list.

<div class="table-mini-wrap">
  <table class="table-mini table-stack">
    <thead>…</thead>
    <tbody>
      <tr>
        <td class="stack-lead"><code>--fs-h1</code></td>
        <td data-label="Desktop">34px</td>
        <td data-label="Mobile">30px</td>
      </tr>
    </tbody>
  </table>
</div>

Mga advice card

Ipinanganak sa docs na ito at na-promote sa site: magkapares na Do at Don’t card para magbigay ng payo nang walang pader ng teksto. Bawat card ay isang figure na may may-label na head, example stage at caption. Available sa mga artikulo bilang plain HTML gamit ang mga dodont class.

<div class="dodont-grid">
  <figure class="dodont dodont-do">
    <p class="dodont-head">Do</p>
    <div class="dodont-stage">…halimbawa…</div>
    <figcaption class="dodont-caption">Kung bakit gumagana.</figcaption>
  </figure>
  …
</div>

Mga compare column

Dalawang column na may border, berde ang tuktok ng pinapaboran at neutral ang kabila: kung ano ang isinasalin laban sa kung ano ang nananatili, kung ano ang bigay ng library laban sa halaga nito. Ang mga compare class, available sa mga artikulo.

• Gawin

  • compare-yes

• Huwag

  • compare-no

Mga divider at dot list

Ang horizontal rule sa isang artikulo ay lumalabas bilang maikling nakagitnang berdeng bar, ang section divider. At ang green-dot list — ang bullet ng mga role description at ng booking page — ay available sa mga artikulo bilang dot-list.

• Mga divider at dot list
• Mga compare column

Mga diagram

Ang mga architecture diagram ay mga static na imahe na iginuhit gamit ang mismong tokens ng site: walang diagram library na naipapadala sa mambabasa. Ang tokens ang nagbibigay-tema sa resulta (green na nodes, neutral na arrows), kaya nagre-recolor ito kasama ng theme tulad ng lahat, at ang control sa sulok ang nagbubukas nito nang full screen. Ito ay tunay na diagram mula sa isang na-publish na artikulo:

Contents

Ang mahabang artikulo ay may dalang table of contents: ang totoong Toc component ay nire-render bilang sticky na sidebar card mula 1024 pixels, at ang parehong mga heading ang nagpapakain sa contents sheet sa likod ng progress ring ng reading bar sa ilalim niyon.

Nabigasyon ng series

Ang post na kabilang sa isang series ay bumubukas na may pahalang na shelf ng mga numerong part card: ang kasalukuyang part ay naka-outline ng berde, ang iba ay nagli-link sa buong series. Malayang nagsi-scroll ang shelf sa mobile; nagdadagdag ng mga arrow control ang desktop.

Mag-subscribe

Ang newsletter band na nagtatapos sa isang post: isang maikling pitch, isang email field, at isang tala tungkol sa double opt-in. Ito ang tunay na component, na na-render nang live.

Kung saan ito matatagpuan

global.css: .prose blockquote.callout-*, .code-block-* at .prose pre, ang pamilyang .dt-card, at ang SubscribeForm.astro.