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
<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>
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
<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>
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.
