Help Article - defuss-shadcn

On this page (2)

Component Skill — components/help-article/component-skill.md

Native basis

An <article>: breadcrumbs, the title, updated <time> and reading time, a lead, numbered steps (<ol>) with screenshots, a tip, a "still stuck?" <details>, a helpful-or-not question and related articles.

Built from

Breadcrumb, Feedback Form.

Web Platform APIs

<ol>CSS counters<details><time>:has()

Classes

.mk-help-article.mk-help-article-title.mk-help-article-meta.mk-help-article-lead.mk-help-article-steps.mk-help-article-tip.mk-help-article-stuck.mk-help-article-related

Data attributes

None.

§Default

Breadcrumbs, title and meta, a lead, numbered steps (CSS counters) with a screenshot and a <kbd>, a tip, "still stuck?" in a <details>, a CSS-only "was this helpful?" (Feedback Form, inline) and related articles.

<article class="mk-help-article" aria-labelledby="ha-title">
  <nav class="breadcrumb" aria-label="Breadcrumb"><ol class="breadcrumb-list"><li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Help</a></li><li class="breadcrumb-separator" aria-hidden="true">/</li><li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Billing</a></li><li class="breadcrumb-separator" aria-hidden="true">/</li><li class="breadcrumb-item"><span class="breadcrumb-page" aria-current="page">Change your billing email</span></li></ol></nav>
  <h1 class="mk-help-article-title" id="ha-title">Change your billing email</h1>
  <p class="mk-help-article-meta">Updated <time datetime="2026-09-12">12 Sep 2026</time> · 2 min read</p>
  <p class="mk-help-article-lead">Invoices and payment reminders go to the billing email. Only workspace owners can change it.</p>
  <ol class="mk-help-article-steps">
    <li><div><strong>Open Settings</strong><p>Press <kbd>⌘</kbd> <kbd>,</kbd> or choose Settings from your avatar menu.</p></div></li>
    <li><div><strong>Go to Billing → Details</strong><p>You'll see the current billing email under "Invoices".</p><img src="images/mk-wide.png" alt="The Billing details screen with the billing email field highlighted"></div></li>
    <li><div><strong>Enter the new address and save</strong><p>We send a confirmation link to the new address. The change applies once it is confirmed.</p></div></li>
  </ol>
  <div class="mk-help-article-tip"><i data-lucide="lightbulb"></i><p>Use a shared address like billing@yourcompany.com so invoices don't depend on one person.</p></div>
  <details class="mk-help-article-stuck"><summary>Still stuck?</summary><p>If you can't see Billing, you're not an owner of this workspace. Ask an owner, or <a href="#">contact support</a>.</p></details>
  <form class="mk-feedback-form" data-variant="inline" action="#" method="post">
    <fieldset><legend>Was this article helpful?</legend><div class="mk-feedback-form-yesno"><label><input type="radio" name="ha-helpful" value="yes"><i data-lucide="thumbs-up"></i> Yes</label><label><input type="radio" name="ha-helpful" value="no"><i data-lucide="thumbs-down"></i> No</label></div></fieldset>
    <p class="mk-feedback-form-thanks" role="status">Thanks for letting us know.</p>
  </form>
  <ul class="mk-help-article-related"><li><h2>Related articles</h2></li><li><a href="#"><i data-lucide="file-text"></i>Download an invoice</a></li><li><a href="#"><i data-lucide="file-text"></i>Add a VAT number</a></li></ul>
</article>

§CSS view file

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

   Presents instructions for resolving one problem or completing one task - the steps with pictures, a tip, whether it helped and related articles. */

@layer components {

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

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

  .mk-help-article { display: grid; gap: 1.25rem; width: 100%; max-width: 42rem; }

  .mk-help-article-title { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }

  .mk-help-article-meta { margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; }

  .mk-help-article-lead { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: color-mix(in oklch, var(--foreground) 85%, var(--muted-foreground)); }

  .mk-help-article-steps { display: grid; gap: 1.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; counter-reset: mk-help;

    & li { counter-increment: mk-help; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem 1rem; }

    & li::before { content: counter(mk-help); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-size: 0.875rem; font-weight: 700; }

    & li > div { display: grid; gap: 0.5rem; padding-block-start: 0.25rem; }

    & strong { font-weight: 600; }

    & p { margin: 0; color: var(--muted-foreground); line-height: 1.6; }

    & img { display: block; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-lg); }

    & kbd { padding: 0.0625rem 0.375rem; border: 1px solid var(--border); border-block-end-width: 2px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.8125rem; }

  .mk-help-article-tip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; padding: 1rem 1.125rem; border-radius: var(--radius-lg); background: color-mix(in oklab, oklch(0.75 0.14 150) 12%, var(--background)); font-size: 0.9375rem;

    & svg { width: 1.125rem; height: 1.125rem; margin-block-start: 0.15rem; color: #15803d; }

    & p { margin: 0; }

  .mk-help-article-stuck { padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: var(--radius-lg);

    & summary { cursor: pointer; font-weight: 600; }

    & p { margin: 0.5rem 0 0; color: var(--muted-foreground); font-size: 0.9375rem; }

  .mk-help-article-related { display: grid; gap: 0.5rem; margin: 0; padding: 1.25rem 0 0; border-block-start: 1px solid var(--border); list-style: none;

    & h2 { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 600; }

    & a { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--primary); text-decoration: none; }

    & a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

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

  @media (forced-colors: active) {

    .mk-help-article-steps li::before { forced-color-adjust: none; background: Highlight; color: HighlightText; }

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

Help ArticleBLK

§CSS view file