With the Unstyled style, FeedLetter adds no CSS to your Wall of Love. The wall takes your website’s fonts and colors, and the layout and the look of the cards come from your own CSS.

The starter CSS below gives you white cards in masonry columns, like the Minimal style. Add it to your website’s stylesheet, or put it in a <style> tag next to the embed code, and change the values at the top to match your design.

Want the ready-made look instead? Choose the Minimal style in the wall’s settings. Its full CSS is at feedletter.co/embed/wolcss/minimal.css.

Starter CSS

/* Wall of Love starter CSS. Change the values to match your website. */
#feedletter-wol {
  --wol-gap: 20px;
  --wol-card-background: #ffffff;
  --wol-card-text: #1f2328;
  --wol-card-muted: #5f6368;
  --wol-card-border: rgb(16 24 40 / 0.08);
  --wol-card-radius: 14px;
}

#feedletter-wol,
#feedletter-wol * {
  box-sizing: border-box;
}

/* Grid: masonry columns */
#feedletter-wol .wol {
  column-count: 3;
  column-gap: var(--wol-gap);
}

@media (max-width: 900px) {
  #feedletter-wol .wol {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  #feedletter-wol .wol {
    column-count: 1;
  }
}

/* Cards */
#feedletter-wol .item {
  display: flex;
  gap: 14px;
  break-inside: avoid;
  margin-bottom: var(--wol-gap);
  padding: 22px;
  border: 1px solid var(--wol-card-border);
  border-radius: var(--wol-card-radius);
  background: var(--wol-card-background);
  color: var(--wol-card-text);
}

#feedletter-wol .item p {
  margin: 0;
}

/* the vote emoji */
#feedletter-wol .item-left {
  font-size: 28px;
  line-height: 1;
}

/* the comment */
#feedletter-wol .item-content > p:first-child {
  margin-bottom: 12px;
  line-height: 1.6;
}

#feedletter-wol .item-name {
  font-size: 14px;
  font-weight: 600;
}

#feedletter-wol .item-timestamp {
  font-size: 13px;
  color: var(--wol-card-muted);
}

/* the survey name */
#feedletter-wol .item-timestamp ~ .item-name,
#feedletter-wol .item-name ~ .item-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--wol-card-muted);
}

#feedletter-wol .feedletter-brand {
  font-size: 13px;
  text-align: center;
}

/* Carousel: only needed with the Carousel layout */
#feedletter-wol .feedletter-carousel {
  display: flex;
  align-items: center;
  gap: 16px;
}

#feedletter-wol .feedletter-carousel-container {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

#feedletter-wol .feedletter-carousel-container .wol {
  display: flex;
  column-count: auto;
  column-gap: 0;
}

/* 1 to 3 cards per view; the gap sits on the right of each card */
#feedletter-wol .feedletter-carousel-container .item {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0 var(--wol-gap) 0 0;
}

@media (min-width: 700px) {
  #feedletter-wol .feedletter-carousel-container .item {
    flex-basis: calc((100% - var(--wol-gap)) / 2);
  }
}

@media (min-width: 1000px) {
  #feedletter-wol .feedletter-carousel-container .item {
    flex-basis: calc((100% - 2 * var(--wol-gap)) / 3);
  }
}

#feedletter-wol .feedletter-carousel-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--wol-card-border);
  border-radius: 50%;
  background: var(--wol-card-background);
  color: var(--wol-card-text);
  cursor: pointer;
}

#feedletter-wol .feedletter-carousel-button svg {
  width: 14px;
  height: 14px;
}

#feedletter-wol .feedletter-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

#feedletter-wol .feedletter-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  cursor: pointer;
}

#feedletter-wol .feedletter-carousel-dot-selected {
  opacity: 1;
}

The Wall’s HTML

Every feedback is an .item card inside .wol:

<div id="feedletter-wol">
  <div class="wol">
    <div class="item">
      <div class="item-left"><p>😍</p></div>
      <div class="item-content">
        <p>The reader's comment</p>
        <p class="item-name">By Maya</p>
        <p class="item-timestamp">Oct 24, 2026, 9:14 AM</p>
        <p class="item-name">The survey name</p>
      </div>
    </div>
  </div>
  <div class="feedletter-brand">Wall of Love Powered by <a href="https://feedletter.co">FeedLetter.co</a></div>
</div>

The “By” line, the date, the survey name and the branding line only show when they are turned on in the wall’s settings.

The Carousel’s HTML

With the Carousel layout, the cards sit in a slider between two arrow buttons, with a row of dots below:

<div id="feedletter-wol">
  <div class="feedletter-carousel">
    <button class="feedletter-carousel-button feedletter-carousel-button-prev" type="button">…</button>
    <div class="feedletter-carousel-container">
      <div class="wol">
        <!-- the .item cards -->
      </div>
    </div>
    <button class="feedletter-carousel-button feedletter-carousel-button-next" type="button">…</button>
  </div>
  <div class="feedletter-carousel-dots">
    <button class="feedletter-carousel-dot feedletter-carousel-dot-selected" type="button"></button>
    <!-- one dot per card -->
  </div>
</div>

For the slider to work, .feedletter-carousel-container needs overflow: hidden and the .wol inside it needs display: flex. The starter CSS covers both.