List Blocks

List blocks allow you to easily organize your content into a list structure, either by creating a separate block for each section of the list down the page, or creating a smaller list section within your article.

Examples

Listing block within the grid

How to make listing block within the grid

Listing block with a background shape

<div class="stk-snippets-listing-block__cover stk-grid stk-layout__overhangs_both" data-ce-tag="grid" data-stk-css="stk8YH69">
  <div data-col-width="4" class="stk-grid-col stk-theme_00000__pad_ver_1 stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-grid" data-ce-tag="grid">
      <div data-col-width="1" class="stk-grid-col" data-ce-tag="grid-col">
        <p class="stk-reset stk-theme_00000__mb_0" data-ce-tag="paragraph">2.</p>
        <hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__separator_top stk-theme_00000__mb_0">
        <h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header align-left stk-theme_00000__mb_05">Solomon R. Guggenheim Museum</h3>
        <p data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_text align-left stk-theme_00000__mb_05 stk-theme_00000__mb_0-m">1071 Fifth Avenue at 89th Street, Manhattan, New York City</p>
        <hr class="stk-reset stk-theme_00000__separator_basic_divider stk-mobile-hidden">
      </div>
      <div data-col-width="3" data-ce-tag="grid-col" class="stk-grid-col stk-grid-col_last stk-theme_00000__pad_default-m">
        <p class="stk-reset stk-theme_00000__mb_0 stk-mobile-hidden ce-element--empty stk-element_no-text"></p>
        <figure class="stk-snippets-listing-block__img stk-layout__overhangs_right stk-reset stk-image-figure" data-ce-tag="image-figure">
          <div class="stk-mask" data-ce-tag="mask"></div>
        </figure>
      </div>
    </div>
  </div>
</div>

<div data-ce-tag="grid" class="stk-snippets-listing-block__content stk-grid">
  <div data-col-width="1" class="stk-grid-col" data-ce-tag="grid-col">
    <hr class="stk-theme_00000__separator_basic_divider stk-mobile-hidden stk-reset">
    <p data-ce-tag="paragraph" class="stk-reset align-left stk-theme_00000__style_small_text"><span class="stk-reset"><strong class="stk-reset">Architectural style:</strong> Modern<br><strong class="stk-reset">Founded:</strong> 1939, Manhattan, New York<br><strong class="stk-reset">Architect:</strong> Frank Lloyd Wright</span></p>
    <hr class="stk-theme_00000__separator_basic_divider stk-desktop-hidden stk-reset">
  </div>
  <div data-col-width="3" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <p data-ce-tag="paragraph" class="stk-reset">The <strong class="stk-reset">Solomon R. Guggenheim Museum</strong>, often referred to as The Guggenheim, is an art museum located at 1071 Fifth Avenue on the corner of East 89th Street in the Upper East Side neighborhood of Manhattan, New York City. It is the permanent home of a continuously expanding collection of Impressionist, Post-Impressionist, early Modern, and contemporary art and also features special exhibitions throughout the year. 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. It adopted its current name after the death of its founder Solomon R. Guggenheim in 1952.</p>
  </div>
</div>

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 background color in the component CSS.

Content Experience Impact

List-based articles (also sometimes referred to as “listicles”) provide a logical structure to your article, improving content comprehension and making it easier for a reader to scan and quickly understand the high-level information, choosing where they’d like to dig in deeper. Plus, giving your audience a predictable content structure makes the reading experience more enjoyable. Research has also shown that dividing your content into a list helps the reader more easily digest the information because it’s broken into smaller pieces. Similarly, including a list section within your content can help organize certain types of information into a way that’s easier to quickly understand.

Dos

  • Make sure each section of your list has a uniform structure, in both the content design and in the grammatical format of your header. (e.g., Your headers should all be complete sentences or all start with the same verb conjugation, rather than switching it up throughout.)

  • Consider how smaller lists within your content can help break up what might be dense paragraphs into easily-digestible content, while also helping provide visual interest on the page by changing up the structure.

  • Number your lists! The human eye is naturally drawn to numerals in the text because they’re a different shape. Plus, if you tell the reader how many points there are in your list in the title or intro, numbering you list will encourage them to scan or read until the end.

Don'ts

  • Don’t make every article a list format. For one, your audience will get tired of this structure. Also, not every piece of content makes sense as a list. For instance, a narrative article would be better with a different structure, whereas something with distinct steps or multiple points makes sense as a list.

Learn More

Improving Content Comprehension With Layouts Setka

What Makes Listicles So Effective? Copypress

7 Tips for Writing a Great Listicle Compose.ly

Extra Inspiration

PreviousParallel NarrativeNextData Highlights

Last updated

Was this helpful?