PageSourceSearch

https://getassistant.io/basecamp-docs-files-grid/

html getassistant.io collected 2026-10-02 01:03:08 UTC 51,688 bytes, 180 lines download raw bytes

1<!DOCTYPE html><html lang="en"> <head><!-- Google tag (gtag.js) is loaded from components/analytics.ts, not here, so
2         that one gate governs both GA4 and PostHog (dev + internal traffic). --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="icon" type="image/png" href="/favicon.png"><link rel="sitemap" href="/sitemap-index.xml"><link rel="alternate" type="application/rss+xml" title="Assistant for Basecamp Blog" href="/rss.xml"><link rel="ai-catalog" type="application/ai-catalog+json" href="/.well-known/ai-catalog.json"><meta name="generator" content="Astro v5.18.1"><title>Docs &amp; Files Grid View for Basecamp</title><meta name="description" content="Turn Basecamp's flat Docs &#38; Files list into a visual grid: image thumbnails, folder previews, color labels, and drag-and-drop filing saved back to Basecamp."><link rel="canonical" href="https://getassistant.io/basecamp-docs-files-grid/">
2<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://getassistant.io/#organization","name":"Assistant for Basecamp","url":"https://getassistant.io/","logo":"https://getassistant.io/favicon.png"},{"@type":"WebSite","@id":"https://getassistant.io/#website","name":"Assistant for Basecamp","url":"https://getassistant.io/","publisher":{"@id":"https://getassistant.io/#organization"}},{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Why does Basecamp show Docs & Files as a plain list?","acceptedAnswer":{"@type":"Answer","text":"Basecamp 4 had a visual layout for Docs & Files; Basecamp 5 flattened it into a list. Fine for a handful of files, painful for a project with fifty screenshots, briefs, and folders. Assistant brings the visual view back as a toggle."}},{"@type":"Question","name":"What do the grid cards show?","acceptedAnswer":{"@type":"Answer","text":"Image files get real thumbnails, folders preview what's inside them, and every card shows its comment count, any custom-field pills, and the color it has in Basecamp. Click the card's color dot to change it right from the grid. You recognize files by sight instead of reading a column of names."}},{"@type":"Question","name":"Does drag-and-drop change anything for my team?","acceptedA
2nswer":{"@type":"Answer","text":"Yes, in a good way: reorders and moves are saved to Basecamp itself, so the list view shows the same thing to everyone. Drops work both directions, into folders and back out to the top level, with live hints showing what each drop will do. Only the List/Grid choice is personal."}},{"@type":"Question","name":"Can I customize the grid?","acceptedAnswer":{"@type":"Answer","text":"Yes. A gear next to the List | Grid toggle lets you show or hide author names, dates, icons, and color labels, and pick how many cards per row and how many folder rows show before scrolling. Choices apply to you alone and sync across devices."}},{"@type":"Question","name":"Can I keep the list view?","acceptedAnswer":{"@type":"Answer","text":"Yes. It's a toggle at the top of Docs & Files, and your choice syncs per user across devices. You can live in the grid while a teammate stays on the list. Nobody is forced into anything."}},{"@type":"Question","name":"What does it cost?","acceptedAnswer":{"@type":"Answer","text":"The grid is part of the one plan: $29/month or $290/year for your whole Basecamp account, unlimited users. 7-day free trial, no credit card."}}]}]}</script>
2<meta property="og:type" content="website"><meta property="og:url" content="https://getassistant.io/basecamp-docs-files-grid/"><meta property="og:title" content="Docs &#38; Files Grid View for Basecamp — Assistant for Basecamp"><meta property="og:description" content="Turn Basecamp's flat Docs &#38; Files list into a visual grid: image thumbnails, folder previews, color labels, and drag-and-drop filing saved back to Basecamp."><meta property="og:image" content="https://getassistant.io/images/docs-files-grid.jpg"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Docs &#38; Files Grid View for Basecamp — Assistant for Basecamp"><meta name="twitter:description" content="Turn Basecamp's flat Docs &#38; Files list into a visual grid: image thumbnails, folder previews, color labels, and drag-and-drop filing saved back to Basecamp."><meta name="twitter:image" content="https://getassistant.io/images/docs-files-grid.jpg"><meta name="theme-color" content="#1d4ed8">
2<script async preferred-sources-control="manual" src="https://news.google.com/swg/js/v1/publisher.js"></script>
2<script>
3      (self.PREFERRED_SOURCE = self.PREFERRED_SOURCE || []).push(function (preferredSource) {
4        preferredSource.init({ theme: "light", lang: "en" });
5        document.addEventListener("click", function (event) {
6          var trigger = event.target.closest && event.target.closest("[data-preferred-source]");
7          if (!trigger) return;
8          event.preventDefault();
9          preferredSource.addPreferredSource();
10        });
11      });
12    </script>
12<meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate">
12<script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.QITS68ck.js"></script>
12<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap"></noscript><link rel="stylesheet" href="/_astro/_slug_.DzGj7tMX.css">
13<style>.ph[data-astro-cid-s5hxusys]{text-align:center;padding:4rem 1rem 3rem}.ph--band[data-astro-cid-s5hxusys]{background:var(--color-accent)}.ph__eyebrow[data-astro-cid-s5hxusys]{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin-bottom:.75rem}.ph__title[data-astro-cid-s5hxusys]{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.02em}.ph__subtitle[data-astro-cid-s5hxusys] a{color:inherit;text-decoration:underline;text-underline-offset:3px}.ph__subtitle[data-astro-cid-s5hxusys]{color:var(--color-muted-foreground);max-width:38rem;margin:1rem auto 0;line-height:1.6}
14</style>
14<script type="module" src="/_astro/page.Byp59hzS.js"></script>
14</head> <body> <a href="#main" class="skip-link">Skip to content</a> <header class="sticky top-0 z-40 border-b border-[var(--color-border)] bg-white/80 backdrop-blur" data-astro-cid-dmqpwcec> <nav class="container-wide flex h-16 items-center justify-between" data-astro-cid-dmqpwcec> <a href="/" class="flex items-center gap-2 font-semibold text-lg" data-astro-cid-dmqpwcec> <img src="/favicon.svg" alt="" width="28" height="28" class="rounded-md" data-astro-cid-dmqpwcec> <span data-astro-cid-dmqpwcec>Assistant</span> <span class="text-[var(--color-muted-foreground)] font-normal hidden sm:inline" data-astro-cid-dmqpwcec>for Basecamp</span> </a> <ul class="hidden lg:flex items-center gap-1 text-sm" data-astro-cid-dmqpwcec> <li data-astro-cid-dmqpwcec> <a href="/" class="px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>Home</a> </li> <li data-mega data-astro-cid-dmqpwcec> <button id="mega-features-btn" type="button" data-mega-toggle aria-expanded="false" aria-controls="mega-features-panel" class="inline-flex items-center gap-1 px-3 py-2 rounded-md transition-colors text-[var(--color-foreground)] font-semibold" data-astro-cid-dmqpwcec>
15Features
16<svg class="mega-chev h-3.5 w-3.5 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-dmqpwcec> <path d="m6 9 6 6 6-6" data-astro-cid-dmqpwcec></path> </svg> </button> <div id="mega-features-panel" class="hidden fixed left-1/2 top-16 z-50 w-[min(62rem,calc(100vw-2rem))] -translate-x-1/2 pt-3" data-astro-cid-dmqpwcec> <div class="rounded-2xl border border-[var(--color-border)] bg-white shadow-xl overflow-hidden" data-astro-cid-dmqpwcec> <div class="grid lg:grid-cols-[1fr_17.5rem]" data-astro-cid-dmqpwcec> <div class="p-4 grid grid-cols-2 gap-1 content-start" data-astro-cid-dmqpwcec> <a href="/basecamp-voice-transcription/" class="flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-[var(--color-muted)]" data-astro-cid-dmqpwcec> <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent)] text-[var(--color-primary)]" data-astro-cid-dmqpwcec> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M12 17v4"/><path d="M8 21h8"/></svg> </span> <span data-astro-cid-dmqpwcec> <span class="block text-sm font-semibold text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Voice note transcription  </span> <span class="block text-xs text-[var(--color-muted-foreground)] leading-relaxed mt-0.5" data-astro-cid-dmqpwcec>Turn any Basecamp voice note into text the whole team can read and search.</span> </span> </a><a href="/basecamp-kanban/" class="flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-[var(--color-muted)]" data-astro-cid-dmqpwcec> <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent)] text-[var(--color-primary)]" data-astro-cid-dmqpwcec> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="M15 3v13"/></svg> </span> <span data-astro-cid-dmqpwcec> <span class="block text-sm font-semibold text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Kanban board  </span> <span class="block text-xs text-[var(--color-muted-foreground)] leading-relaxed mt-0.5" data-astro-cid-dmqpwcec>A drag-and-drop board over your to-do lists and card tables, one project or all of them.</span> </span> </a><a href="/basecamp-custom-fields/" class="flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-[var(--color-muted)]" data-astro-cid-dmqpwcec> <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent)] text-[var(--color-primary)]" data-astro-cid-dmqpwcec> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2H2v10l9.29 9.29a2 2 0 0 0 2.83 0l7.17-7.17a2 2 0 0 0 0-2.83Z"/><circle cx="7" cy="7" r="1"/></svg> </span> <span data-astro-cid-dmqpwcec> <span class="block text-sm font-semibold text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Custom fields  </span> <span class="block text-xs text-[var(--color-muted-foreground)] leading-relaxed mt-0.5" data-astro-cid-dmqpwcec>Priority, status, dates, and more on to-dos, cards, messages, documents, and files.</span> </span> </a><a href="/basecamp-automations/" class="flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-[var(--color-muted)]" data-astro-cid-dmqpwcec> <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent)] text-[var(--color-primary)]" data-astro-cid-dmqpwcec> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> </span> <span data-astro-cid-dmqpwcec> <span class="block text-sm font-semibold text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Automations  </span> <span class="block text-xs text-[var(--color-muted-foreground)] leading-relaxed mt-0.5" data-astro-cid-dmqpwcec>Rules that update fields, assign people, and post comments for you.</span> </span> </a><a href="/mcp/" class="flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-[var(--color-muted)]" data-astro-cid-dmqpwcec> <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent)] text-[var(--color-primary)]" data-astro-cid-dmqpwcec> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg> </span> <span data-astro-cid-dmqpwcec> <span class="block text-sm font-semibold text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> MCP for AI agents  </span> <span class="block text-xs text-[var(--color-muted-foreground)] leading-relaxed mt-0.5" data-astro-cid-dmqpwcec>
16Let Claude Code or Codex set fields, statuses, views, and automation rules through Assistant.</span> </span> </a><a href="/basecamp-docs-files-grid/" class="flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-[var(--color-muted)]" data-astro-cid-dmqpwcec> <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent)] text-[var(--color-primary)]" data-astro-cid-dmqpwcec> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> </span> <span data-astro-cid-dmqpwcec> <span class="block text-sm font-semibold text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Docs &amp; Files grid  </span> <span class="block text-xs text-[var(--color-muted-foreground)] leading-relaxed mt-0.5" data-astro-cid-dmqpwcec>A visual grid with thumbnails, folder previews, color labels, and drag-and-drop filing.</span> </span> </a><a href="/basecamp-card-table-duplication/" class="flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-[var(--color-muted)]" data-astro-cid-dmqpwcec> <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent)] text-[var(--color-primary)]" data-astro-cid-dmqpwcec> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="14" height="14" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg> </span> <span data-astro-cid-dmqpwcec> <span class="block text-sm font-semibold text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Card Table duplication  </span> <span class="block text-xs text-[var(--color-muted-foreground)] leading-relaxed mt-0.5" data-astro-cid-dmqpwcec>Clone a whole card table with its cards, comments, and attachments.</span> </span> </a><a href="/basecamp-integrations/" class="flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-[var(--color-muted)]" data-astro-cid-dmqpwcec> <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent)] text-[var(--color-primary)]" data-astro-cid-dmqpwcec> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg> </span> <span data-astro-cid-dmqpwcec> <span class="block text-sm font-semibold text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Campfire &amp; webhooks  </span> <span class="block text-xs text-[var(--color-muted-foreground)] leading-relaxed mt-0.5" data-astro-cid-dmqpwcec>Updates in your Campfire chat, completions kept in sync.</span> </span> </a><a href="/basecamp-enhancements/" class="flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-[var(--color-muted)]" data-astro-cid-dmqpwcec> <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent)] text-[var(--color-primary)]" data-astro-cid-dmqpwcec> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.9 3.9 11 1l1.1 2.9L15 5l-2.9 1.1L11 9 9.9 6.1 7 5Z"/><path d="M18.9 14.9 20 12l1.1 2.9L24 16l-2.9 1.1L20 20l-1.1-2.9L16 16Z" transform="translate(-3 0)"/><path d="M5.4 15.4 6.5 12l1.1 3.4L11 16.5l-3.4 1.1L6.5 21l-1.1-3.4L2 16.5Z"/></svg> </span> <span data-astro-cid-dmqpwcec> <span class="block text-sm font-semibold text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Everyday enhancements <span class="free-badge" data-astro-cid-dmqpwcec>7 free features</span> </span> <span class="block text-xs text-[var(--color-muted-foreground)] leading-relaxed mt-0.5" data-astro-cid-dmqpwcec>Unread highlighting, copy links, multi-line subtasks, and more.</span> </span> </a> </div> <aside class="hidden lg:flex flex-col justify-between p-6 text-white" style="background: linear-gradient(155deg, #386beb, #7359f2)" data-astro-cid-dmqpwcec> <div data-astro-cid-dmqpwcec> <p class="text-base font-bold" data-astro-cid-dmqpwcec>Try everything free</p> <ul class="mt-3 space-y-2 text-sm text-blue-100" data-astro-cid-dmqpwcec> <li class="flex items-start gap-2" data-astro-cid-dmqpwcec><span class="mt-0.5" data-astro-cid-dmqpwcec>
16✓</span> 7-day trial of every feature, no credit card</li> <li class="flex items-start gap-2" data-astro-cid-dmqpwcec><span class="mt-0.5" data-astro-cid-dmqpwcec>✓</span> 7 everyday enhancements stay free forever</li> <li class="flex items-start gap-2" data-astro-cid-dmqpwcec><span class="mt-0.5" data-astro-cid-dmqpwcec>✓</span> One install covers your whole account</li> <li class="flex items-start gap-2" data-astro-cid-dmqpwcec><span class="mt-0.5" data-astro-cid-dmqpwcec>✓</span> $29/mo for the rest, unlimited users</li> </ul> </div> <a href="https://chromewebstore.google.com/detail/assistant-for-basecamp/cdgmiodbpcfipmijfhjmplhckfokkkoc" target="_blank" rel="noreferrer" class="btn bg-white text-[var(--color-primary)] hover:bg-gray-100 text-sm mt-6" data-ph-event="install_clicked" data-ph-source="mega-menu" data-astro-cid-dmqpwcec>
17Install free on Chrome
18</a> </aside> </div> <div class="flex items-center justify-between border-t border-[var(--color-border)] bg-[var(--color-muted)] px-6 py-3 text-sm" data-astro-cid-dmqpwcec> <a href="/features/" class="font-medium text-[var(--color-primary)] hover:underline" data-astro-cid-dmqpwcec>View all features →</a> <a href="/changelog/" class="text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>What's new</a> </div> </div> </div> </li> <li data-astro-cid-dmqpwcec> <a href="/pricing/" class="px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>Pricing</a> </li><li data-astro-cid-dmqpwcec> <a href="/help/" class="px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>Help</a> </li><li data-astro-cid-dmqpwcec> <a href="/contact/" class="px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>Contact</a> </li><li data-astro-cid-dmqpwcec> <a href="/blog/" class="px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>Blog</a> </li><li data-astro-cid-dmqpwcec> <a href="/changelog/" class="px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>Changelog</a> </li><li data-astro-cid-dmqpwcec> <a href="/about/" class="px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>About</a> </li> </ul> <div class="flex items-center gap-2" data-astro-cid-dmqpwcec> <a data-auth="signed-in" href="https://app.getassistant.io/dashboard" class="btn btn-ghost text-sm !hidden" hidden data-astro-cid-dmqpwcec>
19Dashboard
20</a> <a href="https://chromewebstore.google.com/detail/assistant-for-basecamp/cdgmiodbpcfipmijfhjmplhckfokkkoc" target="_blank" rel="noreferrer" class="btn btn-primary text-sm" data-ph-event="install_clicked" data-ph-source="nav" data-astro-cid-dmqpwcec>
21Install free
22</a> <button id="mobile-menu-button" type="button" class="lg:hidden inline-flex items-center justify-center rounded-md p-2 text-[var(--color-muted-foreground)] transition-colors hover:text-[var(--color-foreground)]" aria-label="Open menu" aria-controls="mobile-menu" aria-expanded="false" data-astro-cid-dmqpwcec> <svg id="mobile-menu-icon-open" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" data-astro-cid-dmqpwcec> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" data-astro-cid-dmqpwcec></path> </svg> <svg id="mobile-menu-icon-close" class="h-5 w-5 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" data-astro-cid-dmqpwcec> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" data-astro-cid-dmqpwcec></path> </svg> </button> </div> </nav> <div id="mobile-menu" class="hidden border-t border-[var(--color-border)] bg-white lg:hidden max-h-[calc(100dvh-4rem)] overflow-y-auto" data-astro-cid-dmqpwcec> <ul class="container-wide flex flex-col gap-1 py-3 text-sm" data-astro-cid-dmqpwcec> <li data-astro-cid-dmqpwcec> <a href="/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>Home</a> </li> <li data-astro-cid-dmqpwcec> <button type="button" data-acc-toggle="mobile-features-list" aria-expanded="true" class="flex w-full items-center justify-between px-3 py-2 rounded-md transition-colors text-[var(--color-foreground)] font-semibold" data-astro-cid-dmqpwcec>
23Features
24<svg class="acc-chev h-4 w-4 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-dmqpwcec> <path d="m6 9 6 6 6-6" data-astro-cid-dmqpwcec></path> </svg> </button> <ul id="mobile-features-list" class=" ml-3 border-l border-[var(--color-border)] pl-3 py-1 flex flex-col gap-0.5" data-astro-cid-dmqpwcec> <li data-astro-cid-dmqpwcec> <a href="/features/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>All features</a> </li> <li data-astro-cid-dmqpwcec> <a href="/basecamp-voice-transcription/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Voice note transcription  </a> </li><li data-astro-cid-dmqpwcec> <a href="/basecamp-kanban/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Kanban board  </a> </li><li data-astro-cid-dmqpwcec> <a href="/basecamp-custom-fields/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Custom fields  </a> </li><li data-astro-cid-dmqpwcec> <a href="/basecamp-automations/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Automations  </a> </li><li data-astro-cid-dmqpwcec> <a href="/mcp/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> MCP for AI agents  </a> </li><li data-astro-cid-dmqpwcec> <a href="/basecamp-docs-files-grid/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-foreground)] font-semibold" data-astro-cid-dmqpwcec> Docs &amp; Files grid  </a> </li><li data-astro-cid-dmqpwcec> <a href="/basecamp-card-table-duplication/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Card Table duplication  </a> </li><li data-astro-cid-dmqpwcec> <a href="/basecamp-integrations/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Campfire &amp; webhooks  </a> </li><li data-astro-cid-dmqpwcec> <a href="/basecamp-enhancements/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec> Everyday enhancements <span class="free-badge" data-astro-cid-dmqpwcec>7 free features</span> </a> </li> </ul> </li> <li data-astro-cid-dmqpwcec> <a href="/pricing/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>Pricing</a> </li><li data-astro-cid-dmqpwcec> <a href="/help/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>Help</a> </li><li data-astro-cid-dmqpwcec> <a href="/contact/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>Contact</a> </li><li data-astro-cid-dmqpwcec> <a href="/blog/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>Blog</a> </li><li data-astro-cid-dmqpwcec> <a href="/changelog/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>Changelog</a> </li><li data-astro-cid-dmqpwcec> <a href="/about/" class="block px-3 py-2 rounded-md transition-colors text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]" data-astro-cid-dmqpwcec>About</a> </li> </ul> </div> </header>  <!--
25  Nav behavior. One document-level delegated script instead of per-element
26  listeners: the <ClientRouter /> in Base.astro swaps the DOM on client-side
27  navigation without re-running identical inline scripts, so anything bound
28  directly to nav elements dies after the first navigation. Delegation on
29  `document` (which persists) keeps the menus working on every page.
30--> 
30<script>
31  (function () {
32    if (window.__afbNavInit) return;
33    window.__afbNavInit = true;
34
35    var closeTimer = null;
36    var hoverOK = window.matchMedia("(hover: hover) and (pointer: fine)");
37
38    function el(id) {
39      return document.getElementById(id);
40    }
41    function megaOpen() {
42      var p = el("mega-features-panel");
43      return !!p && !p.classList.contains("hidden");
44    }
45    function setMega(open) {
46      var b = el("mega-features-btn");
47      var p = el("mega-features-panel");
48      if (!b || !p) return;
49      p.classList.toggle("hidden", !open);
50      b.setAttribute("aria-expanded", open ? "true" : "false");
51    }
52    function mobileOpen() {
53      var m = el("mobile-menu");
54      return !!m && !m.classList.contains("hidden");
55    }
56    function setMobile(open) {
57      var m = el("mobile-menu");
58      var b = el("mobile-menu-button");
59      if (!m || !b) return;
60      m.classList.toggle("hidden", !open);
61      b.setAttribute("aria-expanded", open ? "true" : "false");
62      b.setAttribute("aria-label", open ? "Close menu" : "Open menu");
63      var io = el("mobile-menu-icon-open");
64      var ic = el("mobile-menu-icon-close");
65      if (io) io.classList.toggle("hidden", open);
66      if (ic) ic.classList.toggle("hidden", !open);
67    }
68
69    document.addEventListener("click", function (e) {
70      var t = e.target;
71      if (!t || !t.closest) return;
72
73      if (t.closest("[data-mega-toggle]")) {
74        // Mouse users already opened it via hover; a real click keeps it open
75        // (closing happens on hover-out, Escape, or outside click). Keyboard
76        // (e.detail === 0) and touch devices get a plain toggle.
77        if (hoverOK.matches && e.detail > 0) setMega(true);
78        else setMega(!megaOpen());
79        return;
80      }
81      if (t.closest("#mega-features-panel a")) {
82        setMega(false);
83      } else if (!t.closest("[data-mega]")) {
84        setMega(false);
85      }
86
87      if (t.closest("#mobile-menu-button")) {
88        setMobile(!mobileOpen());
89        return;
90      }
91      var acc = t.closest("[data-acc-toggle]");
92      if (acc) {
93        var list = el(acc.getAttribute("data-acc-toggle"));
94        if (list) {
95          var nowHidden = list.classList.toggle("hidden");
96          acc.setAttribute("aria-expanded", nowHidden ? "false" : "true");
97        }
98        return;
99      }
100      if (t.closest("#mobile-menu a")) setMobile(false);
101    });
102
103    document.addEventListener("pointerover", function (e) {
104      if (!hoverOK.matches) return;
105      if (e.target && e.target.closest && e.target.closest("[data-mega]")) {
106        clearTimeout(closeTimer);
107        setMega(true);
108      }
109    });
110
111    document.addEventListener("pointerout", function (e) {
112      if (!hoverOK.matches) return;
113      if (!e.target || !e.target.closest || !e.target.closest("[data-mega]")) return;
114      var to = e.relatedTarget;
115      if (to && to.closest && to.closest("[data-mega]")) return;
116      clearTimeout(closeTimer);
117      closeTimer = setTimeout(function () {
118        setMega(false);
119      }, 150);
120    });
121
122    document.addEventListener("keydown", function (e) {
123      if (e.key !== "Escape") return;
124      if (megaOpen()) {
125        setMega(false);
126        var b = el("mega-features-btn");
127        if (b) b.focus();
128      }
129      if (mobileOpen()) setMobile(false);
130    });
131
132    window.addEventListener("resize", function () {
133      if (window.innerWidth >= 1024) setMobile(false);
134    });
135
136    // Signed-in state: swap Install/Dashboard buttons. Re-applied after every
137    // client-side navigation (astro:page-load also fires on first load).
138    function syncAuth() {
139      try {
140        var loggedIn = document.cookie.split("; ").some(function (c) {
141          return c.indexOf("ga_logged_in=1") === 0;
142        });
143        if (!loggedIn) return;
144        document.querySelectorAll('[data-auth="signed-out"]').forEach(function (n) {
145          n.hidden = true;
146          n.classList.add("!hidden");
147        });
148        document.querySelectorAll('[data-auth="signed-in"]').forEach(function (n) {
149          n.hidden = false;
150          n.classList.remove("!hidden");
151        });
152      } catch (err) {}
153    }
154    syncAuth();
155    document.addEventListener("astro:page-load", syncAuth);
156  })();
157</script>
157 <main id="main" tabindex="-1">  <div class="ph ph--band" data-astro-cid-s5hxusys> <div class="container-narrow" data-astro-cid-s5hxusys> <p class="ph__eyebrow" data-astro-cid-s5hxusys>Docs &amp; Files grid</p> <h1 class="ph__title" data-astro-cid-s5hxusys>Fifty files. One flat list. Good luck.</h1> <p class="ph__subtitle" data-astro-cid-s5hxusys>Basecamp 5 shows Docs &amp; Files as a plain list, so finding that one screenshot means reading filenames one by one. Assistant adds a grid view with real thumbnails, the layout Basecamp 4 users have been missing.</p>  <div class="flex flex-col sm:flex-row gap-3 justify-center mt-8"> <a href="https://chromewebstore.google.com/detail/assistant-for-basecamp/cdgmiodbpcfipmijfhjmplhckfokkkoc" target="_blank" rel="noreferrer" class="btn btn-primary text-base px-6 py-3" data-ph-event="install_clicked" data-ph-source="docs-grid-hero">
158Install free on Chrome
159</a> <a href="/pricing/" class="btn btn-secondary text-base px-6 py-3">
160See pricing
161</a> </div>  </div> </div>   <section class="pt-4 pb-16 md:pb-20"> <div class="container-wide"> <figure class="reveal max-w-5xl mx-auto rounded-2xl border border-[var(--color-border)] bg-white shadow-xl overflow-hidden"> <img src="/images/docs-files-grid.jpg" alt="Before and after: Basecamp's Docs & Files as a plain list without Assistant, and as a card grid with scrollable folder previews and color-coded cards with it" class="w-full h-auto" loading="eager"> </figure> </div> </section>  <section class="py-16 md:py-20 bg-[var(--color-muted)]"> <div class="container-narrow text-center"> <h2 class="reveal text-3xl md:text-4xl font-bold tracking-tight mb-4">
162Recognize files by sight, not by filename.
163</h2> <p class="reveal text-lg text-[var(--color-muted-foreground)] max-w-2xl mx-auto" style="--rd:70ms">
164A design review project isn't a spreadsheet. Mockups, briefs, and reference shots deserve a view where you can see them.
165</p> </div> <div class="container-wide mt-12"> <div class="grid md:grid-cols-3 gap-5 max-w-5xl mx-auto"> <div class="reveal rounded-2xl border border-[var(--color-border)] bg-white p-6" style="--rd:0ms"> <h3 class="font-semibold mb-1.5">Thumbnails and previews</h3> <p class="text-sm text-[var(--color-muted-foreground)] leading-relaxed">Images render as real thumbnails, and folder cards preview what's inside. The "which one was v3-final" hunt ends here.</p> </div> <div class="reveal rounded-2xl border border-[var(--color-border)] bg-white p-6" style="--rd:90ms"> <h3 class="font-semibold mb-1.5">Context on every card</h3> <p class="text-sm text-[var(--color-muted-foreground)] leading-relaxed">Comment counts, custom-field pills, and Basecamp color labels. Click a card's color dot to change it right from the grid.</p> </div> <div class="reveal rounded-2xl border border-[var(--color-border)] bg-white p-6" style="--rd:180ms"> <h3 class="font-semibold mb-1.5">Drag anywhere, for real</h3> <p class="text-sm text-[var(--color-muted-foreground)] leading-relaxed">Reorder, file into folders, or drag items back out to the top level. Live hints show what each drop will do, and every move saves to Basecamp, so the list view matches for everyone.</p> </div> </div> </div> </section>  <section class="py-16 md:py-20"> <div class="container-narrow text-center"> <h2 class="reveal text-3xl md:text-4xl font-bold tracking-tight mb-4">A toggle, not a takeover.</h2> <p class="reveal text-lg text-[var(--color-muted-foreground)] max-w-2xl mx-auto" style="--rd:70ms">
166List and Grid sit side by side at the top of Docs & Files. Your choice is yours alone and syncs per user, so the teammate who loves the list keeps the list. The only thing everyone shares is the file order.
167</p> <p class="reveal text-lg text-[var(--color-muted-foreground)] max-w-2xl mx-auto mt-4" style="--rd:140ms">
168And the grid itself is yours to tune: a gear beside the toggle shows or hides author names, dates, icons, and color labels, and sets cards per row and folder rows shown. Per user, synced across devices.
169</p> </div> <div class="container-wide mt-10"> <figure class="reveal max-w-4xl mx-auto rounded-2xl border border-[var(--color-border)] bg-white shadow-lg overflow-hidden" style="--rd:180ms"> <img src="/images/grid-view-options.jpg" alt="The Docs & Files grid with the Grid view options popover open: checkboxes for author names, dates, doc and folder icons, and color labels, plus cards-per-row and folder-rows-shown pickers" class="w-full h-auto" loading="lazy"> </figure> </div> </section>  <section class="py-16 md:py-20 bg-[var(--color-muted)]"> <div class="container-narrow text-center mb-10"> <h2 class="reveal text-3xl md:text-4xl font-bold tracking-tight">From list to grid in three steps.</h2> </div> <div class="container-wide"> <div class="grid md:grid-cols-3 gap-5 max-w-5xl mx-auto"> <div class="reveal rounded-2xl border border-[var(--color-border)] bg-white p-6" style="--rd:0ms"> <div class="text-sm font-bold text-[var(--color-primary)] mb-2">1</div> <h3 class="font-semibold mb-1.5">Install the extension</h3> <p class="text-sm text-[var(--color-muted-foreground)] leading-relaxed">From the Chrome Web Store. Anyone on the account connects it once; everyone on it is covered.</p> </div> <div class="reveal rounded-2xl border border-[var(--color-border)] bg-white p-6" style="--rd:90ms"> <div class="text-sm font-bold text-[var(--color-primary)] mb-2">2</div> <h3 class="font-semibold mb-1.5">Open Docs & Files</h3> <p class="text-sm text-[var(--color-muted-foreground)] leading-relaxed">In any project. You'll see the new List/Grid toggle at the top of the section.</p> </div> <div class="reveal rounded-2xl border border-[var(--color-border)] bg-white p-6" style="--rd:180ms"> <div class="text-sm font-bold text-[var(--color-primary)] mb-2">3</div> <h3 class="font-semibold mb-1.5">Switch to Grid</h3> <p class="text-sm text-[var(--color-muted-foreground)] leading-relaxed">Thumbnails, previews, and drag-to-reorder, instantly. Full guide in the <a href="/help/docs-files-grid/" class="text-[var(--color-primary)] hover:underline">help center</a>.</p> </div> </div> </div> </section>  <section class="py-16 md:py-20"> <div class="container-narrow"> <h2 class="reveal text-3xl md:text-4xl font-bold tracking-tight text-center mb-10">Docs & Files grid, answered.</h2> <div class="space-y-4"> <details class="reveal rounded-2xl border border-[var(--color-border)] bg-[var(--color-muted)] p-5 group"> <summary class="font-semibold cursor-pointer list-none flex items-center justify-between"> Why does Basecamp show Docs &amp;
169 Files as a plain list? <span class="text-[var(--color-muted-foreground)] group-open:rotate-45 transition-transform">+</span> </summary> <p class="text-sm text-[var(--color-muted-foreground)] leading-relaxed mt-3">Basecamp 4 had a visual layout for Docs &amp; Files; Basecamp 5 flattened it into a list. Fine for a handful of files, painful for a project with fifty screenshots, briefs, and folders. Assistant brings the visual view back as a toggle.</p> </details><details class="reveal rounded-2xl border border-[var(--color-border)] bg-[var(--color-muted)] p-5 group"> <summary class="font-semibold cursor-pointer list-none flex items-center justify-between"> What do the grid cards show? <span class="text-[var(--color-muted-foreground)] group-open:rotate-45 transition-transform">+</span> </summary> <p class="text-sm text-[var(--color-muted-foreground)] leading-relaxed mt-3">Image files get real thumbnails, folders preview what&#39;s inside them, and every card shows its comment count, any custom-field pills, and the color it has in Basecamp. Click the card&#39;s color dot to change it right from the grid. You recognize files by sight instead of reading a column of names.</p> </details><details class="reveal rounded-2xl border border-[var(--color-border)] bg-[var(--color-muted)] p-5 group"> <summary class="font-semibold cursor-pointer list-none flex items-center justify-between"> Does drag-and-drop change anything for my team? <span class="text-[var(--color-muted-foreground)] group-open:rotate-45 transition-transform">+</span> </summary> <p class="text-sm text-[var(--color-muted-foreground)] leading-relaxed mt-3">Yes, in a good way: reorders and moves are saved to Basecamp itself, so the list view shows the same thing to everyone. Drops work both directions, into folders and back out to the top level, with live hints showing what each drop will do. Only the List/Grid choice is personal.</p> </details><details class="reveal rounded-2xl border border-[var(--color-border)] bg-[var(--color-muted)] p-5 group"> <summary class="font-semibold cursor-pointer list-none flex items-center justify-between"> Can I customize the grid? <span class="text-[var(--color-muted-foreground)] group-open:rotate-45 transition-transform">+</span> </summary> <p class="text-sm text-[var(--color-muted-foreground)] leading-relaxed mt-3">Yes. A gear next to the List | Grid toggle lets you show or hide author names, dates, icons, and color labels, and pick how many cards per row and how many folder rows show before scrolling. Choices apply to you alone and sync across devices.</p> </details><details class="reveal rounded-2xl border border-[var(--color-border)] bg-[var(--color-muted)] p-5 group"> <summary class="font-semibold cursor-pointer list-none flex items-center justify-between"> Can I keep the list view? <span class="text-[var(--color-muted-foreground)] group-open:rotate-45 transition-transform">+</span> </summary> <p class="text-sm text-[var(--color-muted-foreground)] leading-relaxed mt-3">Yes. It&#39;s a toggle at the top of Docs &amp; Files, and your choice syncs per user across devices. You can live in the grid while a teammate stays on the list. Nobody is forced into anything.</p> </details><details class="reveal rounded-2xl border border-[var(--color-border)] bg-[var(--color-muted)] p-5 group"> <summary class="font-semibold cursor-pointer list-none flex items-center justify-between"> What does it cost? <span class="text-[var(--color-muted-foreground)] group-open:rotate-45 transition-transform">+</span> </summary> <p class="text-sm text-[var(--color-muted-foreground)] leading-relaxed mt-3">The grid is part of the one plan: $29/month or $290/year for your whole Basecamp account, unlimited users. 7-day free trial, no credit card.</p> </details> </div> </div> </section> <section class="py-24"> <div class="container-wide"> <div class="reveal relative overflow-hidden rounded-3xl text-white p-12 md:p-20 text-center" style="background: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 55%, #7c3aed 100%)"> <span class="cta-glow" style="background:#60a5fa;
169 top:-130px; left:-90px"></span> <span class="cta-glow" style="background:#a78bfa; bottom:-150px; right:-70px"></span> <div class="cta-dots" aria-hidden="true"></div> <div class="relative"> <h2 class="text-4xl md:text-5xl font-bold tracking-tight mb-4">See your files again.</h2> <p class="text-lg md:text-xl text-blue-100 mb-8 max-w-xl mx-auto">Install the free extension and flip Docs &amp; Files to a grid in minutes. 7-day trial, no credit card.</p> <div class="flex flex-col sm:flex-row gap-3 justify-center"> <a href="https://chromewebstore.google.com/detail/assistant-for-basecamp/cdgmiodbpcfipmijfhjmplhckfokkkoc" target="_blank" rel="noreferrer" class="btn bg-white text-[var(--color-primary)] hover:bg-gray-100" data-ph-event="install_clicked" data-ph-source="docs-grid-page-cta"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <circle cx="12" cy="12" r="4"></circle> <line x1="21.17" y1="8" x2="12" y2="8"></line> <line x1="3.95" y1="6.06" x2="8.54" y2="14"></line> <line x1="10.88" y1="21.94" x2="15.46" y2="14"></line> </svg>
170Install free on Chrome
171</a> <a href="https://app.getassistant.io/login" class="btn bg-blue-900/40 text-white hover:bg-blue-900/60 border-blue-400/30" data-ph-event="signin_clicked" data-ph-source="docs-grid-page-cta">
172Sign in
173</a> </div> </div> </div> </div> </section>  </main> <footer class="border-t border-[var(--color-border)] bg-[var(--color-muted)]"> <div class="container-wide py-12 grid gap-10 md:grid-cols-4"> <div class="md:col-span-1"> <a href="/" class="flex items-center gap-2 font-semibold text-lg"> <img src="/favicon.svg" alt="" width="28" height="28" class="rounded-md">
174Assistant
175</a> <p class="mt-3 text-sm text-[var(--color-muted-foreground)] max-w-xs">
176The companion for Basecamp. Kanban, tags, statuses, custom fields, and automations, built for teams that live in Basecamp.
177</p>  <button type="button" data-preferred-source data-ph-event="preferred_source_clicked" data-ph-source="footer" class="mt-4 text-sm text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] underline underline-offset-4 cursor-pointer">
178Add to Google preferred sources
179</button> </div> <div> <p class="font-semibold text-sm mb-3">Product</p> <ul class="space-y-2 text-sm text-[var(--color-muted-foreground)]"> <li><a href="/features/" class="hover:text-[var(--color-foreground)]">All features</a></li> <li><a href="/basecamp-voice-transcription/" class="hover:text-[var(--color-foreground)]">Voice note transcription</a></li><li><a href="/basecamp-kanban/" class="hover:text-[var(--color-foreground)]">Kanban board</a></li><li><a href="/basecamp-custom-fields/" class="hover:text-[var(--color-foreground)]">Custom fields</a></li><li><a href="/basecamp-automations/" class="hover:text-[var(--color-foreground)]">Automations</a></li><li><a href="/mcp/" class="hover:text-[var(--color-foreground)]">MCP for AI agents</a></li> <li><a href="/pricing/" class="hover:text-[var(--color-foreground)]">Pricing</a></li> <li><a href="/changelog/" class="hover:text-[var(--color-foreground)]">Changelog</a></li> <li> <a href="https://chromewebstore.google.com/detail/assistant-for-basecamp/cdgmiodbpcfipmijfhjmplhckfokkkoc" target="_blank" rel="noreferrer" class="hover:text-[var(--color-foreground)]" data-ph-event="install_clicked" data-ph-source="footer">Chrome Web Store</a> </li> </ul> </div> <div> <p class="font-semibold text-sm mb-3">Resources</p> <ul class="space-y-2 text-sm text-[var(--color-muted-foreground)]"> <li><a href="/help/" class="hover:text-[var(--color-foreground)]">Help center</a></li> <li><a href="/blog/" class="hover:text-[var(--color-foreground)]">Blog</a></li> <li><a href="/blog/assistant-for-basecamp-vs-tracked/" class="hover:text-[var(--color-foreground)]">Assistant vs Tracked</a></li> <li><a href="/blog/basecamp-alternatives-2026/" class="hover:text-[var(--color-foreground)]">Basecamp alternatives</a></li> <li><a href="/contact/" class="hover:text-[var(--color-foreground)]">Contact support</a></li> <li><a href="mailto:[email protected]" class="hover:text-[var(--color-foreground)]">[email protected]</a></li> </ul> </div> <div> <p class="font-semibold text-sm mb-3">Company</p> <ul class="space-y-2 text-sm text-[var(--color-muted-foreground)]"> <li><a href="/about/" class="hover:text-[var(--color-foreground)]">About</a></li> <li><a href="/privacy/" class="hover:text-[var(--color-foreground)]">Privacy</a></li> <li><a href="/terms/" class="hover:text-[var(--color-foreground)]">Terms</a></li> <li><a href="https://app.getassistant.io" class="hover:text-[var(--color-foreground)]" data-ph-event="signin_clicked" data-ph-source="footer">Sign in</a></li> </ul> </div> </div> <div class="border-t border-[var(--color-border)]"> <div class="container-wide py-6 flex flex-col sm:flex-row justify-between gap-3 text-xs text-[var(--color-muted-foreground)]"> <p>© 2026 Assistant for Basecamp. Not affiliated with 37signals or Basecamp.</p> <p>Made for teams that live in Basecamp.</p> </div> </div> </footer> <div class="lb" data-lb hidden aria-hidden="true" data-astro-cid-gixpwe
179iw> <div class="lb__backdrop" data-lb-close data-astro-cid-gixpweiw></div> <div class="lb__dialog" role="dialog" aria-modal="true" aria-label="Image viewer" data-astro-cid-gixpweiw> <figure class="lb__figure" data-astro-cid-gixpweiw> <img class="lb__img" data-lb-img src="" alt="" data-astro-cid-gixpweiw> <figcaption class="lb__caption" data-lb-caption data-astro-cid-gixpweiw></figcaption> </figure> <button class="lb__btn lb__btn--close" data-lb-close type="button" aria-label="Close viewer" data-astro-cid-gixpweiw> <svg viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-gixpweiw><path d="M18 6 6 18M6 6l12 12" data-astro-cid-gixpweiw></path></svg> </button> <button class="lb__btn lb__btn--prev" data-lb-prev type="button" aria-label="Previous image" data-astro-cid-gixpweiw> <svg viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-gixpweiw><path d="m15 18-6-6 6-6" data-astro-cid-gixpweiw></path></svg> </button> <button class="lb__btn lb__btn--next" data-lb-next type="button" aria-label="Next image" data-astro-cid-gixpweiw> <svg viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-gixpweiw><path d="m9 18 6-6-6-6" data-astro-cid-gixpweiw></path></svg> </button> <p class="lb__count" data-lb-count aria-live="polite" data-astro-cid-gixpweiw></p> </div> </div> 
179<script type="module">const p=/\.(avif|gif|jpe?g|png|svg|webp)(\?.*)?$/i;let r=[],o=0,g=null;function a(){const e=document.querySelector("[data-lb]");return{root:e,image:e.querySelector("[data-lb-img]"),caption:e.querySelector("[data-lb-caption]"),count:e.querySelector("[data-lb-count]"),previousButton:e.querySelector("[data-lb-prev]"),nextButton:e.querySelector("[data-lb-next]")}}function m(){const e=document.querySelector("[data-lb]");return!!(e&&!e.hidden)}function h(e){if(!e.closest("main")||e.closest("[data-no-lightbox], [data-lb]"))return!1;const t=e.closest("a");return t&&!p.test(t.getAttribute("href")??"")?!1:e.getBoundingClientRect().width>=120||e.naturalWidth>=120}function s(e){const{image:t,caption:u,count:l,previousButton:n,nextButton:i}=a();o=(e+r.length)%r.length;const c=r[o];t.src=c.currentSrc||c.src,t.alt=c.alt,u.textContent=c.alt;const d=r.length>1;l.textContent=d?`${o+1} of ${r.length}`:"",n.hidden=!d,i.hidden=!d}function f(e){const{root:t}=a();r=[...(e.closest("article")??e.closest("main")).querySelectorAll("img")].filter(h),g=document.activeElement,t.hidden=!1,t.setAttribute("aria-hidden","false"),document.body.style.overflow="hidden",s(r.indexOf(e)),t.querySelector("[data-lb-close]").focus()}function y(){const{root:e,image:t}=a();e.hidden=!0,e.setAttribute("aria-hidden","true"),document.body.style.overflow="",t.src="",g?.focus()}function b(e){e.dataset.lbBound||!h(e)||(e.dataset.lbBound="1",e.
179style.cursor="zoom-in",e.tabIndex=0,e.setAttribute("role","button"),e.getAttribute("aria-label")||e.setAttribute("aria-label",`${e.alt||"Image"}, open larger`),e.addEventListener("click",t=>{t.preventDefault(),f(e)}),e.addEventListener("keydown",t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),f(e))}))}function v(){const{root:e,previousButton:t,nextButton:u}=a();for(const n of e.querySelectorAll("[data-lb-close]"))n.addEventListener("click",y);t.addEventListener("click",()=>s(o-1)),u.addEventListener("click",()=>s(o+1));let l=null;e.addEventListener("touchstart",n=>{l=n.changedTouches[0].clientX},{passive:!0}),e.addEventListener("touchend",n=>{if(l===null)return;const i=n.changedTouches[0].clientX-l;Math.abs(i)>45&&s(o+(i<0?1:-1)),l=null},{passive:!0});for(const n of document.querySelectorAll("main img"))b(n),!n.dataset.lbBound&&!n.complete&&n.addEventListener("load",()=>b(n),{once:!0})}document.addEventListener("keydown",e=>{m()&&(e.key==="Escape"?y():e.key==="ArrowLeft"?s(o-1):e.key==="ArrowRight"&&s(o+1))});document.addEventListener("astro:page-load",v);</script>
179  
179<script type="module" src="/_astro/Base.astro_astro_type_script_index_0_lang.3EWr0YgP.js"></script>
179 
179<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"af47b5bd00254cdf8278da3e02cbda33","r":1,"spa":2}' crossorigin="anonymous"></script>
179
180</body> </html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.