Dibuho
1 min

Composition patterns built on top of Semtic and Pinta. See the package page for what each one is for and why it exists; this page is just the rendered result.

dibuho-mark

<dibuho-mark>

html 
<p>That's the <dibuho-mark>important part</dibuho-mark> of the sentence.</p>
<p>Override the stroke color with <code>color</code>: <dibuho-mark color="#e63946">custom color</dibuho-mark>.</p>

That's the important part of the sentence.

Override the stroke color with color: custom color.

dibuho-timeline

<dibuho-timeline>

html 
<dibuho-timeline>
  <dibuho-timeline-item category="Release" color="#355c7d" date="2026-09-16" title="v2 shipped" url="/packages/dibuho/" tags="js, cli">
    <p>Short summary of what shipped in this release.</p>
  </dibuho-timeline-item>
  <dibuho-timeline-item category="Note" color="#6c5b7b" date="2026-08-02" title="Untitled note, no link">
    <p>An entry with no <code>url</code> -- the title stays plain text.</p>
  </dibuho-timeline-item>
  <dibuho-timeline-item title="Minimal entry, only a title">
  </dibuho-timeline-item>
</dibuho-timeline>

Every attribute except title is optional; each region (marker icon, category/date row, tags) disappears rather than rendering empty when unset, as the third, minimal entry above shows.

  1. Release

    v2 shipped

    jscli

    Short summary of what shipped in this release.

    2.
  2. Note

    Untitled note, no link

    An entry with no url -- the title stays plain text.

    3.

  3. Minimal entry, only a title

    4.

dibuho-container-panel

<dibuho-container-panel>

html 
<dibuho-container-panel title="Account details">
  <p>Body content goes here, wrapped in a Semtic panel with an optional header.</p>
</dibuho-container-panel>

<dibuho-cancel-button>

html 
<dibuho-cancel-button fallback="/components/dibuho/">Cancel</dibuho-cancel-button>

Uses same-origin browser history to go back when there is any; falls back to fallback otherwise.