Modals ​

Bootstrap

Bootstrap modal and offcanvas (side panel). Markup below; when to use which → Rules.

Sqrl custom

Standard task modal: Bootstrap modal-content (20px radius, overlay shadow via theme) with padded modal-header, modal-body, modal-footer. Header icon tile modal-icon is Sqrl custom (contextual bg-*-subtle + text-*, flat glyph — Iconography) + serif modal-title (21px) + btn-close. Body = form (row g-3 or stacked fields). Footer = actions right-aligned — Cancel btn-secondary, primary btn-primary.

New flow

html
<div class="modal-content">
  <div class="modal-header">
    <div class="d-flex align-items-center gap-3 me-auto min-w-0">
      <span
        class="modal-icon bg-success-subtle text-success"
        aria-hidden="true"
      >
        <i class="bi bi-diagram-3"></i>
      </span>
      <h2 class="modal-title mb-0">New flow</h2>
    </div>
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <!-- body content -->
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary">Cancel</button>
    <button type="button" class="btn btn-primary">Create</button>
  </div>
</div>

Padding comes from Bootstrap modal-header / modal-body / modal-footer (theme: 1.5rem). No header/footer divider lines.

Confirmation ​

Short copy-only modal: modal-dialog modal-dialog-centered modal-sm (centered on the viewport). Centered title and body copy; no header close — dismiss via Cancel (and the primary action). Footer actions share the row at full width (theme: flex-grow-1 on each .btn). No icon tile. Destructive primary btn-danger.

Delete contact

Anouk Peters will be removed from Van den Berg Logistics. Activities stay on the account.

Side panel ​

Sqrl custom

Bootstrap offcanvas-end: square edges (no border radius), offcanvas-header (modal-icon tile — Sqrl custom — + offcanvas-title + close, border-bottom via theme), and offcanvas-body. Example: a notifications drawer with stacked toast cards.

Notifications

Changes saved
Contact details were updated.
New task assigned
Follow up with Van den Berg Logistics before Friday.
html
<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="offcanvas"
  data-bs-target="#notificationsOffcanvas"
  aria-controls="notificationsOffcanvas"
>
  Open notifications
</button>

<div
  class="offcanvas offcanvas-end"
  tabindex="-1"
  id="notificationsOffcanvas"
  aria-labelledby="notificationsOffcanvasTitle"
>
  <div class="offcanvas-header">
    <div class="d-flex align-items-center gap-3 me-auto min-w-0">
      <span class="modal-icon bg-info-subtle text-info" aria-hidden="true">
        <i class="bi bi-bell"></i>
      </span>
      <h2 class="offcanvas-title h3 mb-0" id="notificationsOffcanvasTitle">
        Notifications
      </h2>
    </div>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="offcanvas"
      aria-label="Close"
    ></button>
  </div>
  <div class="offcanvas-body d-flex flex-column gap-3">
    <div class="toast show mb-0 w-100" role="status" aria-live="polite">
      <div class="toast-header">
        <i class="bi bi-check-circle-fill text-success" aria-hidden="true"></i>
        <strong class="me-auto">Changes saved</strong>
        <button
          type="button"
          class="btn-close btn-close-sm"
          aria-label="Close"
        ></button>
      </div>
      <div class="toast-body">Contact details were updated.</div>
    </div>
    <!-- more notification toasts -->
  </div>
</div>

Rules ​

  • Focused create/edit or confirmation — blocks the page until dismissed (backdrop + --shadow-overlay).
  • Standard task modal: modal-icon (Sqrl custom) + contextual Bootstrap subtle/text utilities + modal-title in header; form in body; Cancel + one primary action in footer (right-aligned).
  • Confirmation: modal-sm + modal-dialog-centered; centered title and body; no btn-close in the header — Cancel dismisses; footer .btn actions equal full width; name the object; destructive → btn-danger with explicit label.
  • Cancel is always btn-secondary. Primary verb matches the task (“Create”, “Save changes”).

Side panel ​

  • Secondary content beside the main view (notifications, filters, record detail) — use offcanvas-end, not a centered modal.
  • No border radius on the panel (theme); offcanvas-header with modal-icon (Sqrl custom) + offcanvas-title + btn-close; header border-bottom (theme).
  • Stack related items in offcanvas-body (e.g. full-width toast cards with gap-3).