<div><span class="lbl">Three-column wall with source labels</span>
<section class="wl" aria-labelledby="wl-title">
<div class="wl-head"><p class="wl-kicker">Wall of love</p><h2 id="wl-title">1,900 notes from people who switched to Fieldnote</h2><p>Sent to us by email, posted in the community forum and left in app reviews. We asked before sharing each one.</p></div>
<ul class="wl-wall" role="list">
<li><figure class="wl-card">
<figcaption><span class="wl-av" style="--wl-av:conic-gradient(from 200deg,#f97316,#facc15,#fb7185,#f97316)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Jun Park</span><span class="wl-role">UX researcher</span></span><span class="wl-src">Social post</span></figcaption>
<blockquote><p>Fieldnote is the first notes app where I can find things again. Tags I never have to think about.</p></blockquote>
</figure></li>
<li><figure class="wl-card" style="--wl-tint:#fef9c3;--wl-line:#fde68a">
<figcaption><span class="wl-av" style="--wl-av:radial-gradient(circle at 30% 30%,#a5b4fc 0 30%,transparent 31%),linear-gradient(135deg,#4f46e5,#0ea5e9)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Dr. Elif Kaya</span><span class="wl-role">Vet, Kaya Animal Clinic</span></span><span class="wl-src">Via email</span></figcaption>
<blockquote><p>We are a two-vet practice and we write a lot of notes in a hurry. They used to live in three places: a paper diary, a shared document and my phone. Now the morning handover is one page, it is the same page on both our phones, and last month we did not miss a single follow-up call. That has never happened before.</p></blockquote>
</figure></li>
<li><figure class="wl-card">
<figcaption><span class="wl-av" style="--wl-av:linear-gradient(135deg,#10b981 0 50%,#064e3b 50% 100%)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Tom Hale</span><span class="wl-role">Novelist</span></span><span class="wl-src">App review</span></figcaption>
<blockquote><p>Offline mode actually works. I wrote a whole chapter on a ferry with no signal and it synced before we docked.</p></blockquote>
</figure></li>
<li><figure class="wl-card" style="--wl-tint:#e0f2fe;--wl-line:#bae6fd">
<figcaption><span class="wl-av" style="--wl-av:radial-gradient(circle,#fde68a 0 34%,#db2777 35% 100%)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Mira Sandberg</span><span class="wl-role">Software engineer</span></span><span class="wl-src">Community forum</span></figcaption>
<blockquote><p>The export is plain Markdown with the folders intact. That is why I trusted it with ten years of notes.</p></blockquote>
</figure></li>
<li><figure class="wl-card">
<figcaption><span class="wl-av" style="--wl-av:conic-gradient(from 45deg,#0f172a 0 25%,#38bdf8 0 50%,#0f172a 0 75%,#38bdf8 0)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Lucía Romero</span><span class="wl-role">Secondary school teacher</span></span><span class="wl-src">Support chat</span></figcaption>
<blockquote><p>I asked how to merge two notebooks and got an answer in four minutes, from a person who had clearly done it herself.</p></blockquote>
</figure></li>
<li><figure class="wl-card" style="--wl-tint:#dcfce7;--wl-line:#bbf7d0">
<figcaption><span class="wl-av" style="--wl-av:radial-gradient(circle at 70% 70%,#fef3c7 0 22%,transparent 23%),linear-gradient(160deg,#7c3aed,#c026d3)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Kwame Asante</span><span class="wl-role">PhD student, marine biology</span></span><span class="wl-src">Customer survey</span></figcaption>
<blockquote><p>Our lab notebook is finally searchable. Sample IDs, photos of the plates and the protocol all sit in one note, and the whole group can read it.</p></blockquote>
</figure></li>
<li><figure class="wl-card">
<figcaption><span class="wl-av" style="--wl-av:radial-gradient(circle at 30% 30%,#a5b4fc 0 30%,transparent 31%),linear-gradient(135deg,#4f46e5,#0ea5e9)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Ben Adler</span><span class="wl-role">Product manager</span></span><span class="wl-src">Social post</span></figcaption>
<blockquote><p>Three apps down to one. My home screen has room to breathe.</p></blockquote>
</figure></li>
<li><figure class="wl-card" style="--wl-tint:#fce7f3;--wl-line:#fbcfe8">
<figcaption><span class="wl-av" style="--wl-av:conic-gradient(from 200deg,#f97316,#facc15,#fb7185,#f97316)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Hana Kobayashi</span><span class="wl-role">Building surveyor</span></span><span class="wl-src">Via email</span></figcaption>
<blockquote><p>We use it for site visits. Photos, voice memos and the checklist go into one note, and it has synced to the office before we are back in the van.</p></blockquote>
</figure></li>
<li><figure class="wl-card">
<figcaption><span class="wl-av" style="--wl-av:linear-gradient(135deg,#10b981 0 50%,#064e3b 50% 100%)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Ada Okonkwo</span><span class="wl-role">Copy editor</span></span><span class="wl-src">App review</span></figcaption>
<blockquote><p>Fast. Quiet. No streaks and no badges, just my notes.</p></blockquote>
</figure></li>
</ul>
</section></div>
<div><span class="lbl">Collapsed wall with a fade and a link</span>
<section class="wl" aria-label="More notes from Fieldnote users">
<div class="wl-clip">
<ul class="wl-wall wl-wall--sm" role="list">
<li><figure class="wl-card">
<blockquote><p>Search is instant, even with four thousand notes.</p></blockquote>
<figcaption><span class="wl-av" style="--wl-av:radial-gradient(circle at 30% 30%,#a5b4fc 0 30%,transparent 31%),linear-gradient(135deg,#4f46e5,#0ea5e9)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Priyanka Das</span><span class="wl-role">App review</span></span></figcaption>
</figure></li>
<li><figure class="wl-card" style="--wl-tint:#fef9c3;--wl-line:#fde68a">
<blockquote><p>The daily note template changed my mornings. I plan the day in six lines.</p></blockquote>
<figcaption><span class="wl-av" style="--wl-av:radial-gradient(circle,#fde68a 0 34%,#db2777 35% 100%)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Joel Martin</span><span class="wl-role">Social post</span></span></figcaption>
</figure></li>
<li><figure class="wl-card">
<blockquote><p>Handwriting search that works on my scrawl.</p></blockquote>
<figcaption><span class="wl-av" style="--wl-av:conic-gradient(from 45deg,#0f172a 0 25%,#38bdf8 0 50%,#0f172a 0 75%,#38bdf8 0)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Yusuf Demir</span><span class="wl-role">Community forum</span></span></figcaption>
</figure></li>
<li><figure class="wl-card">
<blockquote><p>Our whole onboarding guide lives here now, and new starters actually read it.</p></blockquote>
<figcaption><span class="wl-av" style="--wl-av:conic-gradient(from 200deg,#f97316,#facc15,#fb7185,#f97316)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Clara Weiss</span><span class="wl-role">Via email</span></span></figcaption>
</figure></li>
<li><figure class="wl-card" style="--wl-tint:#e0f2fe;--wl-line:#bae6fd">
<blockquote><p>Two years in, sync has not failed me once.</p></blockquote>
<figcaption><span class="wl-av" style="--wl-av:radial-gradient(circle at 70% 70%,#fef3c7 0 22%,transparent 23%),linear-gradient(160deg,#7c3aed,#c026d3)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Mateo Silva</span><span class="wl-role">App review</span></span></figcaption>
</figure></li>
<li><figure class="wl-card">
<blockquote><p>I love that it never nags me.</p></blockquote>
<figcaption><span class="wl-av" style="--wl-av:linear-gradient(135deg,#10b981 0 50%,#064e3b 50% 100%)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Inès Laurent</span><span class="wl-role">Social post</span></span></figcaption>
</figure></li>
<li><figure class="wl-card">
<blockquote><p>Moved six hundred recipes over in an afternoon, photos included.</p></blockquote>
<figcaption><span class="wl-av" style="--wl-av:radial-gradient(circle at 30% 30%,#a5b4fc 0 30%,transparent 31%),linear-gradient(135deg,#4f46e5,#0ea5e9)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Rosa Bianchi</span><span class="wl-role">Customer survey</span></span></figcaption>
</figure></li>
<li><figure class="wl-card" style="--wl-tint:#dcfce7;--wl-line:#bbf7d0">
<blockquote><p>The web clipper keeps the formatting. Small thing, big difference.</p></blockquote>
<figcaption><span class="wl-av" style="--wl-av:radial-gradient(circle,#fde68a 0 34%,#db2777 35% 100%)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Sam Whitfield</span><span class="wl-role">Community forum</span></span></figcaption>
</figure></li>
<li><figure class="wl-card">
<blockquote><p>Our tabletop campaign wiki runs on Fieldnote. Every map, every name.</p></blockquote>
<figcaption><span class="wl-av" style="--wl-av:conic-gradient(from 45deg,#0f172a 0 25%,#38bdf8 0 50%,#0f172a 0 75%,#38bdf8 0)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Niamh Byrne</span><span class="wl-role">Social post</span></span></figcaption>
</figure></li>
<li><figure class="wl-card">
<blockquote><p>Shared notebooks made our wedding planning bearable.</p></blockquote>
<figcaption><span class="wl-av" style="--wl-av:conic-gradient(from 200deg,#f97316,#facc15,#fb7185,#f97316)" aria-hidden="true"></span><span class="wl-who"><span class="wl-name">Arjun Mehta</span><span class="wl-role">Via email</span></span></figcaption>
</figure></li>
</ul>
</div>
<p class="wl-more"><a href="#all-reviews">Read all 1,900 notes</a></p>
</section></div>
CSS
/* Wall of love: a masonry of mixed-length quotes built with CSS multi-column layout, so every card keeps
its own height. Each card is a figure with the figcaption first (abstract avatar, name, source label). */
.wl{--wl-ink:#18181b;--wl-muted:#52525b;--wl-gap:18px}
.wl-head{max-width:620px;margin:0 auto 40px;text-align:center}
.wl-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#be185d}
.wl-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:#db2777}
.wl-head h2{margin-top:10px;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);font-weight:800;line-height:1.12;letter-spacing:-.025em;color:var(--wl-ink);text-wrap:balance}
.wl-head h2+p{margin-top:12px;font-size:1.05rem;color:var(--wl-muted)}
.wl-wall{columns:1;column-gap:var(--wl-gap);margin:0;padding:0;list-style:none}
@media (min-width:768px){.wl-wall{columns:2}}
@media (min-width:992px){.wl-wall{columns:3}}
.wl-wall>li{break-inside:avoid;margin-bottom:var(--wl-gap)}
.wl-card{margin:0;padding:20px 22px;background:var(--wl-tint,#fff);border:1px solid var(--wl-line,#e7e5e4);border-radius:16px;
box-shadow:0 1px 2px rgba(24,24,27,.04)}
.wl-card figcaption{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.wl-av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--wl-av)}
.wl-card figcaption{gap:12px}
.wl-who{flex:1;min-width:0;line-height:1.35}
.wl-name{display:block;font-weight:700;color:var(--wl-ink)}
.wl-role{display:block;font-size:.85rem;color:var(--wl-muted)}
.wl-src{flex:none;align-self:flex-start;padding:3px 9px;border:1px solid rgba(24,24,27,.14);border-radius:999px;background:rgba(255,255,255,.7);
font-size:.72rem;font-weight:600;white-space:nowrap;color:#3f3f46}
.wl-card blockquote{margin:0;font-size:.98rem;line-height:1.6;color:var(--wl-ink)}
/* Collapsed wall: four short columns, clipped with a fade and a link to the full page */
.wl-clip{max-height:400px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.wl-wall--sm{--wl-gap:14px}
@media (min-width:576px){.wl-wall--sm{columns:2}}
@media (min-width:768px){.wl-wall--sm{columns:3}}
@media (min-width:992px){.wl-wall--sm{columns:4}}
.wl-wall--sm .wl-card{padding:16px 18px}
.wl-wall--sm figcaption{margin:16px 0 0}
.wl-wall--sm .wl-av{width:28px;height:28px}
.wl-wall--sm .wl-name{font-size:.9rem}
.wl-more{position:relative;display:flex;justify-content:center;margin-top:-48px}
.wl-more a{padding:12px 22px;border-radius:999px;background:var(--wl-ink);color:#fff;font-weight:700;text-decoration:none;
box-shadow:0 10px 24px -12px rgba(24,24,27,.5)}
.wl-more a:hover{background:#3f3f46}
.wl-more a:focus-visible{outline:3px solid #db2777;outline-offset:3px}
Bootstrap 5 code
Requires: Bootstrap 5.3.8 CSS
HTML
<div><span class="lbl">Three-column wall with source labels</span>
<section class="wl" aria-labelledby="wl-title">
<div class="wl-head text-center"><p class="wl-kicker mb-0">Wall of love</p><h2 id="wl-title">1,900 notes from people who switched to Fieldnote</h2><p class="lead">Sent to us by email, posted in the community forum and left in app reviews. We asked before sharing each one.</p></div>
<ul class="wl-wall list-unstyled mb-0" role="list">
<li><figure class="card wl-card mb-0"><div class="card-body">
<figcaption class="d-flex align-items-center mb-3"><span class="wl-av" style="--wl-av:conic-gradient(from 200deg,#f97316,#facc15,#fb7185,#f97316)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Jun Park</span><span class="d-block wl-role">UX researcher</span></span><span class="badge rounded-pill wl-src align-self-start">Social post</span></figcaption>
<blockquote class="mb-0"><p class="mb-0">Fieldnote is the first notes app where I can find things again. Tags I never have to think about.</p></blockquote>
</div></figure></li>
<li><figure class="card wl-card mb-0" style="--wl-tint:#fef9c3;--wl-line:#fde68a"><div class="card-body">
<figcaption class="d-flex align-items-center mb-3"><span class="wl-av" style="--wl-av:radial-gradient(circle at 30% 30%,#a5b4fc 0 30%,transparent 31%),linear-gradient(135deg,#4f46e5,#0ea5e9)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Dr. Elif Kaya</span><span class="d-block wl-role">Vet, Kaya Animal Clinic</span></span><span class="badge rounded-pill wl-src align-self-start">Via email</span></figcaption>
<blockquote class="mb-0"><p class="mb-0">We are a two-vet practice and we write a lot of notes in a hurry. They used to live in three places: a paper diary, a shared document and my phone. Now the morning handover is one page, it is the same page on both our phones, and last month we did not miss a single follow-up call. That has never happened before.</p></blockquote>
</div></figure></li>
<li><figure class="card wl-card mb-0"><div class="card-body">
<figcaption class="d-flex align-items-center mb-3"><span class="wl-av" style="--wl-av:linear-gradient(135deg,#10b981 0 50%,#064e3b 50% 100%)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Tom Hale</span><span class="d-block wl-role">Novelist</span></span><span class="badge rounded-pill wl-src align-self-start">App review</span></figcaption>
<blockquote class="mb-0"><p class="mb-0">Offline mode actually works. I wrote a whole chapter on a ferry with no signal and it synced before we docked.</p></blockquote>
</div></figure></li>
<li><figure class="card wl-card mb-0" style="--wl-tint:#e0f2fe;--wl-line:#bae6fd"><div class="card-body">
<figcaption class="d-flex align-items-center mb-3"><span class="wl-av" style="--wl-av:radial-gradient(circle,#fde68a 0 34%,#db2777 35% 100%)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Mira Sandberg</span><span class="d-block wl-role">Software engineer</span></span><span class="badge rounded-pill wl-src align-self-start">Community forum</span></figcaption>
<blockquote class="mb-0"><p class="mb-0">The export is plain Markdown with the folders intact. That is why I trusted it with ten years of notes.</p></blockquote>
</div></figure></li>
<li><figure class="card wl-card mb-0"><div class="card-body">
<figcaption class="d-flex align-items-center mb-3"><span class="wl-av" style="--wl-av:conic-gradient(from 45deg,#0f172a 0 25%,#38bdf8 0 50%,#0f172a 0 75%,#38bdf8 0)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Lucía Romero</span><span class="d-block wl-role">Secondary school teacher</span></span><span class="badge rounded-pill wl-src align-self-start">Support chat</span></figcaption>
<blockquote class="mb-0"><p class="mb-0">I asked how to merge two notebooks and got an answer in four minutes, from a person who had clearly done it herself.</p></blockquote>
</div></figure></li>
<li><figure class="card wl-card mb-0" style="--wl-tint:#dcfce7;--wl-line:#bbf7d0"><div class="card-body">
<figcaption class="d-flex align-items-center mb-3"><span class="wl-av" style="--wl-av:radial-gradient(circle at 70% 70%,#fef3c7 0 22%,transparent 23%),linear-gradient(160deg,#7c3aed,#c026d3)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Kwame Asante</span><span class="d-block wl-role">PhD student, marine biology</span></span><span class="badge rounded-pill wl-src align-self-start">Customer survey</span></figcaption>
<blockquote class="mb-0"><p class="mb-0">Our lab notebook is finally searchable. Sample IDs, photos of the plates and the protocol all sit in one note, and the whole group can read it.</p></blockquote>
</div></figure></li>
<li><figure class="card wl-card mb-0"><div class="card-body">
<figcaption class="d-flex align-items-center mb-3"><span class="wl-av" style="--wl-av:radial-gradient(circle at 30% 30%,#a5b4fc 0 30%,transparent 31%),linear-gradient(135deg,#4f46e5,#0ea5e9)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Ben Adler</span><span class="d-block wl-role">Product manager</span></span><span class="badge rounded-pill wl-src align-self-start">Social post</span></figcaption>
<blockquote class="mb-0"><p class="mb-0">Three apps down to one. My home screen has room to breathe.</p></blockquote>
</div></figure></li>
<li><figure class="card wl-card mb-0" style="--wl-tint:#fce7f3;--wl-line:#fbcfe8"><div class="card-body">
<figcaption class="d-flex align-items-center mb-3"><span class="wl-av" style="--wl-av:conic-gradient(from 200deg,#f97316,#facc15,#fb7185,#f97316)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Hana Kobayashi</span><span class="d-block wl-role">Building surveyor</span></span><span class="badge rounded-pill wl-src align-self-start">Via email</span></figcaption>
<blockquote class="mb-0"><p class="mb-0">We use it for site visits. Photos, voice memos and the checklist go into one note, and it has synced to the office before we are back in the van.</p></blockquote>
</div></figure></li>
<li><figure class="card wl-card mb-0"><div class="card-body">
<figcaption class="d-flex align-items-center mb-3"><span class="wl-av" style="--wl-av:linear-gradient(135deg,#10b981 0 50%,#064e3b 50% 100%)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Ada Okonkwo</span><span class="d-block wl-role">Copy editor</span></span><span class="badge rounded-pill wl-src align-self-start">App review</span></figcaption>
<blockquote class="mb-0"><p class="mb-0">Fast. Quiet. No streaks and no badges, just my notes.</p></blockquote>
</div></figure></li>
</ul>
</section></div>
<div><span class="lbl">Collapsed wall with a fade and a link</span>
<section class="wl" aria-label="More notes from Fieldnote users">
<div class="wl-clip">
<ul class="wl-wall wl-wall--sm list-unstyled mb-0" role="list">
<li><figure class="card wl-card mb-0"><div class="card-body">
<blockquote class="mb-0"><p class="mb-0">Search is instant, even with four thousand notes.</p></blockquote>
<figcaption class="d-flex align-items-center mt-3 mb-0"><span class="wl-av" style="--wl-av:radial-gradient(circle at 30% 30%,#a5b4fc 0 30%,transparent 31%),linear-gradient(135deg,#4f46e5,#0ea5e9)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Priyanka Das</span><span class="d-block wl-role">App review</span></span></figcaption>
</div></figure></li>
<li><figure class="card wl-card mb-0" style="--wl-tint:#fef9c3;--wl-line:#fde68a"><div class="card-body">
<blockquote class="mb-0"><p class="mb-0">The daily note template changed my mornings. I plan the day in six lines.</p></blockquote>
<figcaption class="d-flex align-items-center mt-3 mb-0"><span class="wl-av" style="--wl-av:radial-gradient(circle,#fde68a 0 34%,#db2777 35% 100%)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Joel Martin</span><span class="d-block wl-role">Social post</span></span></figcaption>
</div></figure></li>
<li><figure class="card wl-card mb-0"><div class="card-body">
<blockquote class="mb-0"><p class="mb-0">Handwriting search that works on my scrawl.</p></blockquote>
<figcaption class="d-flex align-items-center mt-3 mb-0"><span class="wl-av" style="--wl-av:conic-gradient(from 45deg,#0f172a 0 25%,#38bdf8 0 50%,#0f172a 0 75%,#38bdf8 0)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Yusuf Demir</span><span class="d-block wl-role">Community forum</span></span></figcaption>
</div></figure></li>
<li><figure class="card wl-card mb-0"><div class="card-body">
<blockquote class="mb-0"><p class="mb-0">Our whole onboarding guide lives here now, and new starters actually read it.</p></blockquote>
<figcaption class="d-flex align-items-center mt-3 mb-0"><span class="wl-av" style="--wl-av:conic-gradient(from 200deg,#f97316,#facc15,#fb7185,#f97316)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Clara Weiss</span><span class="d-block wl-role">Via email</span></span></figcaption>
</div></figure></li>
<li><figure class="card wl-card mb-0" style="--wl-tint:#e0f2fe;--wl-line:#bae6fd"><div class="card-body">
<blockquote class="mb-0"><p class="mb-0">Two years in, sync has not failed me once.</p></blockquote>
<figcaption class="d-flex align-items-center mt-3 mb-0"><span class="wl-av" style="--wl-av:radial-gradient(circle at 70% 70%,#fef3c7 0 22%,transparent 23%),linear-gradient(160deg,#7c3aed,#c026d3)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Mateo Silva</span><span class="d-block wl-role">App review</span></span></figcaption>
</div></figure></li>
<li><figure class="card wl-card mb-0"><div class="card-body">
<blockquote class="mb-0"><p class="mb-0">I love that it never nags me.</p></blockquote>
<figcaption class="d-flex align-items-center mt-3 mb-0"><span class="wl-av" style="--wl-av:linear-gradient(135deg,#10b981 0 50%,#064e3b 50% 100%)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Inès Laurent</span><span class="d-block wl-role">Social post</span></span></figcaption>
</div></figure></li>
<li><figure class="card wl-card mb-0"><div class="card-body">
<blockquote class="mb-0"><p class="mb-0">Moved six hundred recipes over in an afternoon, photos included.</p></blockquote>
<figcaption class="d-flex align-items-center mt-3 mb-0"><span class="wl-av" style="--wl-av:radial-gradient(circle at 30% 30%,#a5b4fc 0 30%,transparent 31%),linear-gradient(135deg,#4f46e5,#0ea5e9)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Rosa Bianchi</span><span class="d-block wl-role">Customer survey</span></span></figcaption>
</div></figure></li>
<li><figure class="card wl-card mb-0" style="--wl-tint:#dcfce7;--wl-line:#bbf7d0"><div class="card-body">
<blockquote class="mb-0"><p class="mb-0">The web clipper keeps the formatting. Small thing, big difference.</p></blockquote>
<figcaption class="d-flex align-items-center mt-3 mb-0"><span class="wl-av" style="--wl-av:radial-gradient(circle,#fde68a 0 34%,#db2777 35% 100%)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Sam Whitfield</span><span class="d-block wl-role">Community forum</span></span></figcaption>
</div></figure></li>
<li><figure class="card wl-card mb-0"><div class="card-body">
<blockquote class="mb-0"><p class="mb-0">Our tabletop campaign wiki runs on Fieldnote. Every map, every name.</p></blockquote>
<figcaption class="d-flex align-items-center mt-3 mb-0"><span class="wl-av" style="--wl-av:conic-gradient(from 45deg,#0f172a 0 25%,#38bdf8 0 50%,#0f172a 0 75%,#38bdf8 0)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Niamh Byrne</span><span class="d-block wl-role">Social post</span></span></figcaption>
</div></figure></li>
<li><figure class="card wl-card mb-0"><div class="card-body">
<blockquote class="mb-0"><p class="mb-0">Shared notebooks made our wedding planning bearable.</p></blockquote>
<figcaption class="d-flex align-items-center mt-3 mb-0"><span class="wl-av" style="--wl-av:conic-gradient(from 200deg,#f97316,#facc15,#fb7185,#f97316)" aria-hidden="true"></span><span class="wl-who"><span class="d-block fw-bold wl-name">Arjun Mehta</span><span class="d-block wl-role">Via email</span></span></figcaption>
</div></figure></li>
</ul>
</div>
<p class="wl-more d-flex justify-content-center mb-0"><a class="btn btn-dark rounded-pill" href="#all-reviews">Read all 1,900 notes</a></p>
</section></div>
CSS
/* Bootstrap has no masonry layout, so the wall is CSS multi-column; the cards are .card and the
source labels .badge, coloured through Bootstrap's CSS variables. */
.wl{--wl-ink:#18181b;--wl-muted:#52525b;--wl-gap:18px}
.wl-head{max-width:620px;margin:0 auto 40px}
.wl-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#be185d}
.wl-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:#db2777}
.wl-head h2{margin:10px 0 0;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);font-weight:800;line-height:1.12;letter-spacing:-.025em;color:var(--wl-ink);text-wrap:balance}
.wl-head .lead{margin:12px 0 0;font-size:1.05rem;color:var(--wl-muted)}
.wl-wall{columns:1;column-gap:var(--wl-gap)}
@media (min-width:768px){.wl-wall{columns:2}}
@media (min-width:992px){.wl-wall{columns:3}}
.wl-wall>li{break-inside:avoid;margin-bottom:var(--wl-gap)}
.wl-card{--bs-card-spacer-y:20px;--bs-card-spacer-x:22px;--bs-card-bg:var(--wl-tint,#fff);--bs-card-border-color:var(--wl-line,#e7e5e4);
--bs-card-border-radius:16px;color:var(--wl-ink);box-shadow:0 1px 2px rgba(24,24,27,.04)}
.wl-av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--wl-av)}
.wl-card figcaption{gap:12px}
.wl-who{flex:1;min-width:0;line-height:1.35}
.wl-role{font-size:.85rem;color:var(--wl-muted)}
.wl-src{--bs-badge-padding-x:9px;--bs-badge-padding-y:3px;--bs-badge-font-size:.72rem;--bs-badge-font-weight:600;--bs-badge-color:#3f3f46;
line-height:1.5;border:1px solid rgba(24,24,27,.14);background:rgba(255,255,255,.7)}
.wl-card blockquote{font-size:.98rem;line-height:1.6}
.wl-clip{max-height:400px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.wl-wall--sm{--wl-gap:14px}
@media (min-width:576px){.wl-wall--sm{columns:2}}
@media (min-width:768px){.wl-wall--sm{columns:3}}
@media (min-width:992px){.wl-wall--sm{columns:4}}
.wl-wall--sm .wl-card{--bs-card-spacer-y:16px;--bs-card-spacer-x:18px}
.wl-wall--sm .wl-av{width:28px;height:28px}
.wl-wall--sm .wl-name{font-size:.9rem}
.wl-more{position:relative;margin-top:-48px}
.wl-more .btn{--bs-btn-padding-x:22px;--bs-btn-padding-y:12px;--bs-btn-font-weight:700;--bs-btn-bg:var(--wl-ink);--bs-btn-border-color:var(--wl-ink);
--bs-btn-hover-bg:#3f3f46;--bs-btn-hover-border-color:#3f3f46;box-shadow:0 10px 24px -12px rgba(24,24,27,.5)}
.wl-more .btn:focus-visible{outline:3px solid #db2777;outline-offset:3px;box-shadow:none}
Tailwind 4 code
Requires: Tailwind CSS 4
HTML
<div><span class="mb-[18px] block text-[.72rem] tracking-[.12em] text-[#52525b] uppercase">Three-column wall with source labels</span>
<section aria-labelledby="wl-title">
<div class="mx-auto mb-10 max-w-[620px] text-center"><p class="inline-flex items-center gap-2 text-[.8rem] font-bold tracking-[.12em] text-[#be185d] uppercase before:size-2 before:rounded-full before:bg-[#db2777] before:content-['']">Wall of love</p><h2 id="wl-title" class="mt-2.5 text-[clamp(1.6rem,1.2rem+1.6vw,2.3rem)] leading-[1.12] font-extrabold tracking-[-.025em] text-balance text-[#18181b]">1,900 notes from people who switched to Fieldnote</h2><p class="mt-3 text-[1.05rem] text-[#52525b]">Sent to us by email, posted in the community forum and left in app reviews. We asked before sharing each one.</p></div>
<ul class="columns-1 gap-[18px] md:columns-2 lg:columns-3" role="list">
<li class="mb-[18px] break-inside-avoid"><figure class="rounded-2xl border border-[#e7e5e4] bg-white px-[22px] py-5 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<figcaption class="flex items-center gap-3 mb-4"><span class="size-10 flex-none rounded-full bg-[conic-gradient(from_200deg,#f97316,#facc15,#fb7185,#f97316)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[#18181b]">Jun Park</span><span class="block text-[.85rem] text-[#52525b]">UX researcher</span></span><span class="flex-none self-start rounded-full border border-black/14 bg-white/70 px-[9px] py-[3px] text-[.72rem] font-semibold whitespace-nowrap text-[#3f3f46]">Social post</span></figcaption>
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>Fieldnote is the first notes app where I can find things again. Tags I never have to think about.</p></blockquote>
</figure></li>
<li class="mb-[18px] break-inside-avoid"><figure class="rounded-2xl border border-[#fde68a] bg-[#fef9c3] px-[22px] py-5 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<figcaption class="flex items-center gap-3 mb-4"><span class="size-10 flex-none rounded-full bg-[radial-gradient(circle_at_30%_30%,#a5b4fc_0_30%,transparent_31%),linear-gradient(135deg,#4f46e5,#0ea5e9)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[#18181b]">Dr. Elif Kaya</span><span class="block text-[.85rem] text-[#52525b]">Vet, Kaya Animal Clinic</span></span><span class="flex-none self-start rounded-full border border-black/14 bg-white/70 px-[9px] py-[3px] text-[.72rem] font-semibold whitespace-nowrap text-[#3f3f46]">Via email</span></figcaption>
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>We are a two-vet practice and we write a lot of notes in a hurry. They used to live in three places: a paper diary, a shared document and my phone. Now the morning handover is one page, it is the same page on both our phones, and last month we did not miss a single follow-up call. That has never happened before.</p></blockquote>
</figure></li>
<li class="mb-[18px] break-inside-avoid"><figure class="rounded-2xl border border-[#e7e5e4] bg-white px-[22px] py-5 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<figcaption class="flex items-center gap-3 mb-4"><span class="size-10 flex-none rounded-full bg-[linear-gradient(135deg,#10b981_0_50%,#064e3b_50%_100%)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[#18181b]">Tom Hale</span><span class="block text-[.85rem] text-[#52525b]">Novelist</span></span><span class="flex-none self-start rounded-full border border-black/14 bg-white/70 px-[9px] py-[3px] text-[.72rem] font-semibold whitespace-nowrap text-[#3f3f46]">App review</span></figcaption>
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>Offline mode actually works. I wrote a whole chapter on a ferry with no signal and it synced before we docked.</p></blockquote>
</figure></li>
<li class="mb-[18px] break-inside-avoid"><figure class="rounded-2xl border border-[#bae6fd] bg-[#e0f2fe] px-[22px] py-5 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<figcaption class="flex items-center gap-3 mb-4"><span class="size-10 flex-none rounded-full bg-[radial-gradient(circle,#fde68a_0_34%,#db2777_35%_100%)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[#18181b]">Mira Sandberg</span><span class="block text-[.85rem] text-[#52525b]">Software engineer</span></span><span class="flex-none self-start rounded-full border border-black/14 bg-white/70 px-[9px] py-[3px] text-[.72rem] font-semibold whitespace-nowrap text-[#3f3f46]">Community forum</span></figcaption>
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>The export is plain Markdown with the folders intact. That is why I trusted it with ten years of notes.</p></blockquote>
</figure></li>
<li class="mb-[18px] break-inside-avoid"><figure class="rounded-2xl border border-[#e7e5e4] bg-white px-[22px] py-5 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<figcaption class="flex items-center gap-3 mb-4"><span class="size-10 flex-none rounded-full bg-[conic-gradient(from_45deg,#0f172a_0_25%,#38bdf8_0_50%,#0f172a_0_75%,#38bdf8_0)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[#18181b]">Lucía Romero</span><span class="block text-[.85rem] text-[#52525b]">Secondary school teacher</span></span><span class="flex-none self-start rounded-full border border-black/14 bg-white/70 px-[9px] py-[3px] text-[.72rem] font-semibold whitespace-nowrap text-[#3f3f46]">Support chat</span></figcaption>
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>I asked how to merge two notebooks and got an answer in four minutes, from a person who had clearly done it herself.</p></blockquote>
</figure></li>
<li class="mb-[18px] break-inside-avoid"><figure class="rounded-2xl border border-[#bbf7d0] bg-[#dcfce7] px-[22px] py-5 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<figcaption class="flex items-center gap-3 mb-4"><span class="size-10 flex-none rounded-full bg-[radial-gradient(circle_at_70%_70%,#fef3c7_0_22%,transparent_23%),linear-gradient(160deg,#7c3aed,#c026d3)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[#18181b]">Kwame Asante</span><span class="block text-[.85rem] text-[#52525b]">PhD student, marine biology</span></span><span class="flex-none self-start rounded-full border border-black/14 bg-white/70 px-[9px] py-[3px] text-[.72rem] font-semibold whitespace-nowrap text-[#3f3f46]">Customer survey</span></figcaption>
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>Our lab notebook is finally searchable. Sample IDs, photos of the plates and the protocol all sit in one note, and the whole group can read it.</p></blockquote>
</figure></li>
<li class="mb-[18px] break-inside-avoid"><figure class="rounded-2xl border border-[#e7e5e4] bg-white px-[22px] py-5 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<figcaption class="flex items-center gap-3 mb-4"><span class="size-10 flex-none rounded-full bg-[radial-gradient(circle_at_30%_30%,#a5b4fc_0_30%,transparent_31%),linear-gradient(135deg,#4f46e5,#0ea5e9)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[#18181b]">Ben Adler</span><span class="block text-[.85rem] text-[#52525b]">Product manager</span></span><span class="flex-none self-start rounded-full border border-black/14 bg-white/70 px-[9px] py-[3px] text-[.72rem] font-semibold whitespace-nowrap text-[#3f3f46]">Social post</span></figcaption>
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>Three apps down to one. My home screen has room to breathe.</p></blockquote>
</figure></li>
<li class="mb-[18px] break-inside-avoid"><figure class="rounded-2xl border border-[#fbcfe8] bg-[#fce7f3] px-[22px] py-5 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<figcaption class="flex items-center gap-3 mb-4"><span class="size-10 flex-none rounded-full bg-[conic-gradient(from_200deg,#f97316,#facc15,#fb7185,#f97316)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[#18181b]">Hana Kobayashi</span><span class="block text-[.85rem] text-[#52525b]">Building surveyor</span></span><span class="flex-none self-start rounded-full border border-black/14 bg-white/70 px-[9px] py-[3px] text-[.72rem] font-semibold whitespace-nowrap text-[#3f3f46]">Via email</span></figcaption>
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>We use it for site visits. Photos, voice memos and the checklist go into one note, and it has synced to the office before we are back in the van.</p></blockquote>
</figure></li>
<li class="mb-[18px] break-inside-avoid"><figure class="rounded-2xl border border-[#e7e5e4] bg-white px-[22px] py-5 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<figcaption class="flex items-center gap-3 mb-4"><span class="size-10 flex-none rounded-full bg-[linear-gradient(135deg,#10b981_0_50%,#064e3b_50%_100%)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[#18181b]">Ada Okonkwo</span><span class="block text-[.85rem] text-[#52525b]">Copy editor</span></span><span class="flex-none self-start rounded-full border border-black/14 bg-white/70 px-[9px] py-[3px] text-[.72rem] font-semibold whitespace-nowrap text-[#3f3f46]">App review</span></figcaption>
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>Fast. Quiet. No streaks and no badges, just my notes.</p></blockquote>
</figure></li>
</ul>
</section></div>
<div><span class="mb-[18px] block text-[.72rem] tracking-[.12em] text-[#52525b] uppercase">Collapsed wall with a fade and a link</span>
<section aria-label="More notes from Fieldnote users">
<div class="max-h-[400px] overflow-hidden [mask-image:linear-gradient(#000_55%,transparent)]">
<ul class="columns-1 gap-3.5 sm:columns-2 md:columns-3 lg:columns-4" role="list">
<li class="mb-[14px] break-inside-avoid"><figure class="rounded-2xl border border-[#e7e5e4] bg-white px-[18px] py-4 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>Search is instant, even with four thousand notes.</p></blockquote>
<figcaption class="flex items-center gap-3 mt-4"><span class="size-7 flex-none rounded-full bg-[radial-gradient(circle_at_30%_30%,#a5b4fc_0_30%,transparent_31%),linear-gradient(135deg,#4f46e5,#0ea5e9)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[.9rem] text-[#18181b]">Priyanka Das</span><span class="block text-[.85rem] text-[#52525b]">App review</span></span></figcaption>
</figure></li>
<li class="mb-[14px] break-inside-avoid"><figure class="rounded-2xl border border-[#fde68a] bg-[#fef9c3] px-[18px] py-4 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>The daily note template changed my mornings. I plan the day in six lines.</p></blockquote>
<figcaption class="flex items-center gap-3 mt-4"><span class="size-7 flex-none rounded-full bg-[radial-gradient(circle,#fde68a_0_34%,#db2777_35%_100%)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[.9rem] text-[#18181b]">Joel Martin</span><span class="block text-[.85rem] text-[#52525b]">Social post</span></span></figcaption>
</figure></li>
<li class="mb-[14px] break-inside-avoid"><figure class="rounded-2xl border border-[#e7e5e4] bg-white px-[18px] py-4 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>Handwriting search that works on my scrawl.</p></blockquote>
<figcaption class="flex items-center gap-3 mt-4"><span class="size-7 flex-none rounded-full bg-[conic-gradient(from_45deg,#0f172a_0_25%,#38bdf8_0_50%,#0f172a_0_75%,#38bdf8_0)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[.9rem] text-[#18181b]">Yusuf Demir</span><span class="block text-[.85rem] text-[#52525b]">Community forum</span></span></figcaption>
</figure></li>
<li class="mb-[14px] break-inside-avoid"><figure class="rounded-2xl border border-[#e7e5e4] bg-white px-[18px] py-4 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>Our whole onboarding guide lives here now, and new starters actually read it.</p></blockquote>
<figcaption class="flex items-center gap-3 mt-4"><span class="size-7 flex-none rounded-full bg-[conic-gradient(from_200deg,#f97316,#facc15,#fb7185,#f97316)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[.9rem] text-[#18181b]">Clara Weiss</span><span class="block text-[.85rem] text-[#52525b]">Via email</span></span></figcaption>
</figure></li>
<li class="mb-[14px] break-inside-avoid"><figure class="rounded-2xl border border-[#bae6fd] bg-[#e0f2fe] px-[18px] py-4 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>Two years in, sync has not failed me once.</p></blockquote>
<figcaption class="flex items-center gap-3 mt-4"><span class="size-7 flex-none rounded-full bg-[radial-gradient(circle_at_70%_70%,#fef3c7_0_22%,transparent_23%),linear-gradient(160deg,#7c3aed,#c026d3)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[.9rem] text-[#18181b]">Mateo Silva</span><span class="block text-[.85rem] text-[#52525b]">App review</span></span></figcaption>
</figure></li>
<li class="mb-[14px] break-inside-avoid"><figure class="rounded-2xl border border-[#e7e5e4] bg-white px-[18px] py-4 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>I love that it never nags me.</p></blockquote>
<figcaption class="flex items-center gap-3 mt-4"><span class="size-7 flex-none rounded-full bg-[linear-gradient(135deg,#10b981_0_50%,#064e3b_50%_100%)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[.9rem] text-[#18181b]">Inès Laurent</span><span class="block text-[.85rem] text-[#52525b]">Social post</span></span></figcaption>
</figure></li>
<li class="mb-[14px] break-inside-avoid"><figure class="rounded-2xl border border-[#e7e5e4] bg-white px-[18px] py-4 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>Moved six hundred recipes over in an afternoon, photos included.</p></blockquote>
<figcaption class="flex items-center gap-3 mt-4"><span class="size-7 flex-none rounded-full bg-[radial-gradient(circle_at_30%_30%,#a5b4fc_0_30%,transparent_31%),linear-gradient(135deg,#4f46e5,#0ea5e9)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[.9rem] text-[#18181b]">Rosa Bianchi</span><span class="block text-[.85rem] text-[#52525b]">Customer survey</span></span></figcaption>
</figure></li>
<li class="mb-[14px] break-inside-avoid"><figure class="rounded-2xl border border-[#bbf7d0] bg-[#dcfce7] px-[18px] py-4 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>The web clipper keeps the formatting. Small thing, big difference.</p></blockquote>
<figcaption class="flex items-center gap-3 mt-4"><span class="size-7 flex-none rounded-full bg-[radial-gradient(circle,#fde68a_0_34%,#db2777_35%_100%)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[.9rem] text-[#18181b]">Sam Whitfield</span><span class="block text-[.85rem] text-[#52525b]">Community forum</span></span></figcaption>
</figure></li>
<li class="mb-[14px] break-inside-avoid"><figure class="rounded-2xl border border-[#e7e5e4] bg-white px-[18px] py-4 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>Our tabletop campaign wiki runs on Fieldnote. Every map, every name.</p></blockquote>
<figcaption class="flex items-center gap-3 mt-4"><span class="size-7 flex-none rounded-full bg-[conic-gradient(from_45deg,#0f172a_0_25%,#38bdf8_0_50%,#0f172a_0_75%,#38bdf8_0)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[.9rem] text-[#18181b]">Niamh Byrne</span><span class="block text-[.85rem] text-[#52525b]">Social post</span></span></figcaption>
</figure></li>
<li class="mb-[14px] break-inside-avoid"><figure class="rounded-2xl border border-[#e7e5e4] bg-white px-[18px] py-4 shadow-[0_1px_2px_rgba(24,24,27,.04)]">
<blockquote class="text-[.98rem] leading-[1.6] text-[#18181b]"><p>Shared notebooks made our wedding planning bearable.</p></blockquote>
<figcaption class="flex items-center gap-3 mt-4"><span class="size-7 flex-none rounded-full bg-[conic-gradient(from_200deg,#f97316,#facc15,#fb7185,#f97316)]" aria-hidden="true"></span><span class="min-w-0 flex-1 leading-[1.35]"><span class="block font-bold text-[.9rem] text-[#18181b]">Arjun Mehta</span><span class="block text-[.85rem] text-[#52525b]">Via email</span></span></figcaption>
</figure></li>
</ul>
</div>
<p class="relative -mt-12 flex justify-center"><a class="rounded-full bg-[#18181b] px-[22px] py-3 font-bold text-white no-underline shadow-[0_10px_24px_-12px_rgba(24,24,27,.5)] hover:bg-[#3f3f46] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#db2777]" href="#all-reviews">Read all 1,900 notes</a></p>
</section></div>
About this set
A wall of love: lots of customer notes of very different lengths packed into a masonry layout, the way SaaS sites show off the messages people send them. The three-column wall gives each note a header with an abstract gradient avatar, the name and role, and a small source label such as Via email, Community forum, App review or Support chat, with a few cards tinted butter, sky, pink or mint to break up the white. The collapsed wall packs ten short notes into four narrow columns, fades the bottom away with a CSS mask and puts a Read all 1,900 notes link, styled as a pill button, over the fade, for a home page that should hint at volume and link to the full wall. The masonry is CSS multi-column layout with break-inside: avoid, so every card keeps its natural height without a script, and reading order follows each column from top to bottom. Source labels tell visitors where each quote came from, which makes a wall of praise easier to believe.
What’s included
Masonry with CSS columns, no JavaScript
Source label on every note: email, forum, app review, survey
Abstract gradient avatars instead of photos
Collapsed variant with a mask fade and a link to the full wall
One, two or three columns; up to four in the compact wall
Accessibility
Notes are figures in a list, with the figcaption naming the person and where the note came from. The avatars are aria-hidden shapes. The collapsed wall only clips content visually and contains no hidden controls, and its button is a real link with a 3px pink focus outline.
Customise it
Change --wl-ink, --wl-muted and --wl-gap on .wl, a card's tint with --wl-tint and --wl-line, and each avatar with --wl-av. In Bootstrap the cards take --bs-card-* variables; in Tailwind edit columns-*, the bg- tint and the gradient in each avatar's bg-[...] class.
