Pull Quotes

Pull quotes allow you to take an especially interesting sentence from your content, and highlight it with larger text and a stand-out design to make sure nobody misses this prime information.

Examples

Full-width pull quote

How to make full-width pull quote

Pull quote on the side

How to Make Pull quote on the side

Full-width pull quote with the background shape

6 columns grid HTML

<div class="stk-snippets-quote-01 stk-container stk-snippets-css__pt_60px" data-ce-tag="container" data-container-name="Quote">
  <h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header"><u class="stk-reset">The museum was established by the Solomon R. Guggenheim Foundation in 1939 as the Museum of Non-Objective Painting, under the guidance of its first director, Hilla von Rebay.</u></h3>
</div>
<p class="stk-reset"></p>

CSS

.stk-snippets-quote-01 {
  margin-bottom: var(--theme-bottom-indent);
  background: url("data:image/svg+xml,%3Csvg fill='none' height='48' viewBox='0 0 60 48' width='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m26.9128 36.3758c0 2.8636-1.1634 5.3692-3.49 7.5168-2.2819 2.1477-4.9888 3.2215-8.1208 3.2215-4.9217 0-8.70245-1.6331-11.34227-4.8993-2.63982-3.2663-3.95973-7.7853-3.95973-13.5571 0-5.3691 2.25951-10.783 6.77852-16.2416 4.56378-5.45861 10.04478-9.59731 16.44298-12.4161l2.953 4.7651c-5.0559 2.46085-9.0157 5.3244-11.8792 8.5906s-4.51901 7.226-4.96644 11.8792h3.75834c2.7741 0 5.0336.3132 6.7786.9396 1.7449.6264 3.1543 1.4989 4.2282 2.6174 1.029 1.0739 1.7449 2.2596 2.1476 3.5571.4474 1.2975.6712 2.6398.6712 4.0268zm33.0872 0c0 2.8636-1.1633 5.3692-3.4899 7.5168-2.2819 2.1477-4.9888 3.2215-8.1208 3.2215-4.9217 0-8.7025-1.6331-11.3423-4.8993-2.6398-3.2663-3.9598-7.7853-3.9598-13.5571 0-5.3691 2.2596-10.783 6.7786-16.2416 4.5637-5.45861 10.0447-9.59731 16.4429-12.4161l2.953 4.7651c-5.0559 2.46085-9.0156 5.3244-11.8792 8.5906-2.8635 3.2662-4.519 7.226-4.9664 11.8792h3.7584c2.774 0 5.0336.3132 6.7785.9396 1.745.6264 3.1544 1.4989 4.2282 2.6174 1.0291 1.0739 1.745 2.2596 2.1477 3.5571.4474 1.2975.6711 2.6398.6711 4.0268z' fill='%2373c2ff'/%3E%3C/svg%3E") left top no-repeat;
}

.stk-snippets-quote-01 > :last-child {
  margin-bottom: 0;
}

.stk-snippets-css__pt_60px {padding-top: 60px;}

.stk-snippets-quote-01 u.stk-reset {
  text-decoration: none;
  background-image: linear-gradient(to right, #73C2FF 100%, transparent 100%);
  background-position: 0 0.95em;
  background-repeat: repeat-x;
  background-size: 10px 4px;
}

Select the code component with the same number of columns as in the grid system of your post.

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

You can also adjust userpic size, shapes, and colors in the component CSS.

Underlined pull quote on the side

HTML

<div class="stk-snippets-quote-02 stk-container" data-ce-tag="container" data-container-name="Custom quote">
  <div class="stk-snippets-quote-02__content stk-container" data-ce-tag="container" data-container-name="Custom quote content">
    <p data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_font_style-1490606809211">The museum was established by the Solomon R. Guggenheim Foundation in 1939 as the Museum of Non-Objective Painting, under the guidance of its first director, Hilla von Rebay.</p>
  </div>
  <figure class="stk-snippets-quote-02__photo stk-reset stk-image-figure" data-ce-tag="image-figure">
    <div data-ce-tag="mask" class="stk-mask"></div>
  </figure>
  <p class="stk-snippets-quote-02__author stk-reset stk-theme_00000__style_small_text stk-theme_00000__color_4507_custom_color_0"><strong class="stk-reset">KATE APPLESEED</strong>, Designer</p>
</div>
<p class="stk-reset"></p>

CSS

.stk-snippets-quote-02 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.stk-snippets-quote-02,
.stk-snippets-quote-02__content {
  margin-bottom: var(--theme-bottom-indent);
}
.stk-snippets-quote-02 > :last-child,
.stk-snippets-quote-02__content > :last-child {
  margin-bottom: 0;
}

.stk-snippets-quote-02__photo img {
  object-fit: cover;
  border-radius: 50%;
}

.stk-snippets-quote-02__photo .stk-mask {
  border: 4px solid white;
  border-radius: 50%;
}

.stk-snippets-quote-02__author:empty {
  min-width: 100px;
}

@media (min-width: 769px) {
  .stk-snippets-quote-02 {
    padding: 150px 80px 75px;
    background: #FFF5D3 url("data:image/svg+xml,%3Csvg fill='none' height='48' viewBox='0 0 60 48' width='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m26.9128 36.3758c0 2.8636-1.1634 5.3692-3.49 7.5168-2.2819 2.1477-4.9888 3.2215-8.1208 3.2215-4.9217 0-8.70245-1.6331-11.34227-4.8993-2.63982-3.2663-3.95973-7.7853-3.95973-13.5571 0-5.3691 2.25951-10.783 6.77852-16.2416 4.56378-5.45861 10.04478-9.59731 16.44298-12.4161l2.953 4.7651c-5.0559 2.46085-9.0157 5.3244-11.8792 8.5906s-4.51901 7.226-4.96644 11.8792h3.75834c2.7741 0 5.0336.3132 6.7786.9396 1.7449.6264 3.1543 1.4989 4.2282 2.6174 1.029 1.0739 1.7449 2.2596 2.1476 3.5571.4474 1.2975.6712 2.6398.6712 4.0268zm33.0872 0c0 2.8636-1.1633 5.3692-3.4899 7.5168-2.2819 2.1477-4.9888 3.2215-8.1208 3.2215-4.9217 0-8.7025-1.6331-11.3423-4.8993-2.6398-3.2663-3.9598-7.7853-3.9598-13.5571 0-5.3691 2.2596-10.783 6.7786-16.2416 4.5637-5.45861 10.0447-9.59731 16.4429-12.4161l2.953 4.7651c-5.0559 2.46085-9.0156 5.3244-11.8792 8.5906-2.8635 3.2662-4.519 7.226-4.9664 11.8792h3.7584c2.774 0 5.0336.3132 6.7785.9396 1.745.6264 3.1544 1.4989 4.2282 2.6174 1.0291 1.0739 1.745 2.2596 2.1477 3.5571.4474 1.2975.6711 2.6398.6711 4.0268z' fill='%23000000'/%3E%3C/svg%3E") 75px 75px no-repeat;
    clip-path: polygon(0% 0%, 100% 75px, 100% calc(100% - 75px), 0% 100%);
  }

  .stk-snippets-quote-02 > :first-child {
    flex-basis: calc(100% - 180px);
  }

  .stk-snippets-quote-02__photo {
    width: 148px; /* image width */
    height: 148px; /* image height */
  }

  .stk-snippets-quote-02__photo .stk-mask,
  .stk-snippets-quote-02__photo img {
    width: 140px; /* image width */
    height: 140px; /* image height */
  }
}

@media (max-width: 768px) {
  .stk-snippets-quote-02 {
    justify-content: unset;
    margin-left: -10px;
    margin-right: -10px;
    padding: 150px 20px 75px;
    background: #FFF5D3 url("data:image/svg+xml,%3Csvg fill='none' height='48' viewBox='0 0 60 48' width='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m26.9128 36.3758c0 2.8636-1.1634 5.3692-3.49 7.5168-2.2819 2.1477-4.9888 3.2215-8.1208 3.2215-4.9217 0-8.70245-1.6331-11.34227-4.8993-2.63982-3.2663-3.95973-7.7853-3.95973-13.5571 0-5.3691 2.25951-10.783 6.77852-16.2416 4.56378-5.45861 10.04478-9.59731 16.44298-12.4161l2.953 4.7651c-5.0559 2.46085-9.0157 5.3244-11.8792 8.5906s-4.51901 7.226-4.96644 11.8792h3.75834c2.7741 0 5.0336.3132 6.7786.9396 1.7449.6264 3.1543 1.4989 4.2282 2.6174 1.029 1.0739 1.7449 2.2596 2.1476 3.5571.4474 1.2975.6712 2.6398.6712 4.0268zm33.0872 0c0 2.8636-1.1633 5.3692-3.4899 7.5168-2.2819 2.1477-4.9888 3.2215-8.1208 3.2215-4.9217 0-8.7025-1.6331-11.3423-4.8993-2.6398-3.2663-3.9598-7.7853-3.9598-13.5571 0-5.3691 2.2596-10.783 6.7786-16.2416 4.5637-5.45861 10.0447-9.59731 16.4429-12.4161l2.953 4.7651c-5.0559 2.46085-9.0156 5.3244-11.8792 8.5906-2.8635 3.2662-4.519 7.226-4.9664 11.8792h3.7584c2.774 0 5.0336.3132 6.7785.9396 1.745.6264 3.1544 1.4989 4.2282 2.6174 1.0291 1.0739 1.745 2.2596 2.1477 3.5571.4474 1.2975.6711 2.6398.6711 4.0268z' fill='%23000000'/%3E%3C/svg%3E") 20px 75px no-repeat;
    clip-path: polygon(0% 0%, 100% 60px, 100% calc(100% - 60px), 0% 100%);
  }

  .stk-snippets-quote-02__photo {
    width: 108px; /* image width */
    height: 108px; /* image height */
    margin-right: 20px;
    margin-bottom: 0;
  }

  .stk-snippets-quote-02__photo .stk-mask,
  .stk-snippets-quote-02__photo img {
    width: 100px; /* image width */
    height: 100px; /* image height */
  }
}

@at-root {
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-quote-02 {
    justify-content: unset;
    margin-left: -10px;
    margin-right: -10px;
    padding: 150px 20px 75px;
    background: #FFF5D3 url("data:image/svg+xml,%3Csvg fill='none' height='48' viewBox='0 0 60 48' width='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m26.9128 36.3758c0 2.8636-1.1634 5.3692-3.49 7.5168-2.2819 2.1477-4.9888 3.2215-8.1208 3.2215-4.9217 0-8.70245-1.6331-11.34227-4.8993-2.63982-3.2663-3.95973-7.7853-3.95973-13.5571 0-5.3691 2.25951-10.783 6.77852-16.2416 4.56378-5.45861 10.04478-9.59731 16.44298-12.4161l2.953 4.7651c-5.0559 2.46085-9.0157 5.3244-11.8792 8.5906s-4.51901 7.226-4.96644 11.8792h3.75834c2.7741 0 5.0336.3132 6.7786.9396 1.7449.6264 3.1543 1.4989 4.2282 2.6174 1.029 1.0739 1.7449 2.2596 2.1476 3.5571.4474 1.2975.6712 2.6398.6712 4.0268zm33.0872 0c0 2.8636-1.1633 5.3692-3.4899 7.5168-2.2819 2.1477-4.9888 3.2215-8.1208 3.2215-4.9217 0-8.7025-1.6331-11.3423-4.8993-2.6398-3.2663-3.9598-7.7853-3.9598-13.5571 0-5.3691 2.2596-10.783 6.7786-16.2416 4.5637-5.45861 10.0447-9.59731 16.4429-12.4161l2.953 4.7651c-5.0559 2.46085-9.0156 5.3244-11.8792 8.5906-2.8635 3.2662-4.519 7.226-4.9664 11.8792h3.7584c2.774 0 5.0336.3132 6.7785.9396 1.745.6264 3.1544 1.4989 4.2282 2.6174 1.0291 1.0739 1.745 2.2596 2.1477 3.5571.4474 1.2975.6711 2.6398.6711 4.0268z' fill='%23000000'/%3E%3C/svg%3E") 20px 75px no-repeat;
    clip-path: polygon(0% 0%, 100% 60px, 100% calc(100% - 60px), 0% 100%);
  }

  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-quote-02 > :first-child {
    flex-basis: unset;
  }

  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-quote-02__photo {
    width: 108px; /* image width */
    height: 108px; /* image height */
    margin-right: 20px;
    margin-bottom: 0;
  }

  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-quote-02__photo .stk-mask,
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-quote-02__photo img {
    width: 100px; /* image width */
    height: 100px; /* image height */
  }
}

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

You can also adjust color in the component CSS.

Content Experience Impact

Pull quotes have been standard in the publishing industry since print days, and for good reason—they’re such a good way to make your page more visually appealing, acting almost like an image in the way they improve content engagement.

Plus, by highlighting some of the most compelling information, you can catch a user’s eye, making sure that even someone scanning the page doesn’t miss the best pieces of your article and potentially inspiring them to dig in further once they’ve read your amazing pull quote.

Dos

• Make sure a pull quote expresses a complete thought, but don’t feel like it has to express the entire thought. Think of it as a teaser to entice someone to read more.

• Leave plenty of padding around the pull quote so it doesn’t conflict with the body text around it.

• Keep the design of your pull quotes consistent throughout a piece of content to make it easy for a reader to spot them.

• Have fun with designing styles for your pull quotes! This is a little moment to further your brand and delight your reader with interesting information presented in an engaging way.

Don'ts

• Don’t place pull quotes right beside where that quote appears in the body text of the article—this can feel repetitive to a reader.

• Don’t break up words with line breaks within a pull quote—try to stylize so full words can fit on each line.

Learn More

10 Content Design Mistakes That Hurt Engagement—and How to Fix Them Fast Setka

The Power of Pull Quotes Scott Design Inc

How to Attract Attention With Pull Quotes CreativePro

Extra Inspiration