Docs Content - defuss-shadcn

On this page (2)

Component Skill — components/docs-content/component-skill.md

Native basis

An <article>: breadcrumbs, <h1>, a lead, meta (updated <time>, edit link), prose (.mk-docs-content-prose) with headings, lists, inline and block code, a table and callouts (data-tone), and previous / next links.

Built from

Breadcrumb.

Web Platform APIs

<article><time><table>text-wrap

Classes

.mk-docs-content.mk-docs-content-title.mk-docs-content-lead.mk-docs-content-meta.mk-docs-content-prose.mk-docs-content-callout.mk-docs-content-pager

Data attributes

data-tone="note|warning|tip" on callouts.

§Default

Breadcrumbs, title, lead and meta, then prose with inline and block code, a list, a table and three callouts (data-tone note / warning / tip - each says its kind in text), and previous / next.

<article class="mk-docs-content" aria-labelledby="dc-title">
  <nav class="breadcrumb" aria-label="Breadcrumb"><ol class="breadcrumb-list"><li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Docs</a></li><li class="breadcrumb-separator" aria-hidden="true">/</li><li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Guides</a></li><li class="breadcrumb-separator" aria-hidden="true">/</li><li class="breadcrumb-item"><span class="breadcrumb-page" aria-current="page">Offline sync</span></li></ol></nav>
  <h1 class="mk-docs-content-title" id="dc-title">Offline sync</h1>
  <p class="mk-docs-content-lead">How Acme keeps working without a connection, and what happens when two people edit the same thing.</p>
  <div class="mk-docs-content-meta"><span>Updated <time datetime="2026-09-28">28 Sep 2026</time></span><span>6 min read</span><a href="#"><i data-lucide="pencil"></i> Edit this page</a></div>
  <div class="mk-docs-content-prose">
    <p>Every change you make is written to your device first. When you are back online, Acme sends the changes in the order you made them - nothing waits for the network.</p>
    <h2 id="dc-enable">Turn it on</h2>
    <p>Offline sync is on by default for new workspaces. For older ones, enable it in <code>Settings → Sync</code> or with the CLI:</p>
    <pre><code>acme workspace sync --offline on</code></pre>
    <aside class="mk-docs-content-callout" role="note"><i data-lucide="info"></i><p><strong>Note:</strong> the first sync downloads the whole workspace - on a slow connection this can take a few minutes.</p></aside>
    <h2 id="dc-conflicts">Conflicts</h2>
    <p>When two people change the same field offline, the later change wins and the earlier one is kept in the history:</p>
    <ul><li>Text merges character by character.</li><li>Fields like status keep the last value.</li><li>Deletions always win over edits.</li></ul>
    <table><thead><tr><th>Change</th><th>Resolution</th></tr></thead><tbody><tr><td>Both edit a paragraph</td><td>Merged</td></tr><tr><td>Both set a status</td><td>Latest wins</td></tr><tr><td>One deletes, one edits</td><td>Deleted</td></tr></tbody></table>
    <aside class="mk-docs-content-callout" data-tone="warning" role="note"><i data-lucide="triangle-alert"></i><p><strong>Warning:</strong> clearing your browser data before syncing deletes unsynced changes.</p></aside>
    <aside class="mk-docs-content-callout" data-tone="tip" role="note"><i data-lucide="lightbulb"></i><p><strong>Tip:</strong> the cloud icon in the header shows how many changes are waiting.</p></aside>
  </div>
  <nav class="mk-docs-content-pager" aria-label="Pagination"><a href="#" rel="prev"><small>Previous</small><strong>← Workspaces</strong></a><a href="#" rel="next"><small>Next</small><strong>Permissions →</strong></a></nav>
</article>

§CSS view file

/* -- Docs Content (website · Docs & Help) ---------------------------------

   Presents one documentation topic with explanations and examples - the trail, title, lead, prose with code, callouts and tables, and the next page. */

@layer components {

  /* every box in the block measures border-box - the same on any page */

  :where(.mk-docs-content, .mk-docs-content *, .mk-docs-content ::before, .mk-docs-content ::after) { box-sizing: border-box; }

  .mk-docs-content { display: grid; gap: 1rem; width: 100%; max-width: 44rem; }

  .mk-docs-content-title { margin: 0; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }

  .mk-docs-content-lead { margin: 0; color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }

  .mk-docs-content-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--muted-foreground); font-size: 0.8125rem;

    & a { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; }

    & svg { width: 0.875rem; height: 0.875rem; }

  .mk-docs-content-prose {

    line-height: 1.75;

    & > * + * { margin-block-start: 1rem; }

    & h2 { margin-block-start: 2.25rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; }

    & h3 { margin-block-start: 1.75rem; font-size: 1.125rem; font-weight: 600; }

    & p, & ul, & ol { margin-block-end: 0; color: color-mix(in oklch, var(--foreground) 85%, var(--muted-foreground)); }

    & li + li { margin-block-start: 0.375rem; }

    & a { color: var(--primary); text-underline-offset: 3px; }

    & :not(pre) > code { padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); background: var(--muted); font-family: var(--font-mono); font-size: 0.875em; }

    & pre { padding: 1rem 1.125rem; overflow-x: auto; border: 0; border-radius: var(--radius-lg); background: oklch(0.18 0.01 260); color: oklch(0.93 0 0); font-size: 0.8125rem; line-height: 1.65; }

    & pre code { padding: 0; border: 0; background: none; color: inherit; font-family: var(--font-mono); }

    & table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

    & th, & td { padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--border); text-align: start; }

    & th { color: var(--muted-foreground); font-weight: 600; }

  .mk-docs-content-callout {

    --_c: oklch(0.6 0.15 250);

    display: grid;

    grid-template-columns: auto minmax(0, 1fr);

    gap: 0.75rem;

    padding: 1rem 1.125rem;

    border-inline-start: 3px solid var(--_c);

    border-radius: 0 var(--radius-md) var(--radius-md) 0;

    background: color-mix(in oklab, var(--_c) 8%, var(--background));

    font-size: 0.9375rem;

    & > svg { width: 1.125rem; height: 1.125rem; margin-block-start: 0.2rem; color: var(--_c); }

    & p { margin: 0; }

    & strong { color: var(--_c); }

    &[data-tone="warning"] { --_c: oklch(0.65 0.15 70); }

    &[data-tone="tip"] { --_c: oklch(0.6 0.15 150); }

  .mk-docs-content-pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem; margin-block-start: 2rem;

    & a { display: grid; gap: 0.125rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; }

    & a:hover { border-color: color-mix(in oklch, var(--foreground) 30%, var(--border)); }

    & a[rel="next"] { text-align: end; }

    & small { color: var(--muted-foreground); font-size: 0.8125rem; }

    & strong { color: var(--primary); }

  /* -- Accessibility ------------------------------------------- */

  @media (forced-colors: active) {

    .mk-docs-content-callout { border-inline-start-color: CanvasText; }

Comments, ideas or improvements? Edit this page's source on GitHub

Docs ContentBLK

§CSS view file