Skip to main content

Listicle

Component status:Ready
Listicle displays a list within a news article or story in a scannable format.

Simply put, a Listicle is an article written in list-format. It is easy to scan, and outlines specifically what a reader can learn in the article. It helps the user to feel less overwhelmed by the amount of content.

Examples#

Ordered Listicle#

1Title of Ordered Listicle Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

2Title of Ordered Listicle Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

3Title of Ordered Listicle Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="bux-listicle">
<div class="bux-listicle__item ">
<h2 class="bux-listicle__title">
<span class="bux-listicle__title-number">1</span>
<span class="bux-listicle__title-text">Title of Ordered Listicle Item</span>
</h2>
<div class="bux-listicle__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="bux-listicle__item ">
<h2 class="bux-listicle__title">
<span class="bux-listicle__title-number">2</span>
<span class="bux-listicle__title-text">Title of Ordered Listicle Item</span>
</h2>
<div class="bux-listicle__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="bux-listicle__item ">
<h2 class="bux-listicle__title">
<span class="bux-listicle__title-number">3</span>
<span class="bux-listicle__title-text">Title of Ordered Listicle Item</span>
</h2>
<div class="bux-listicle__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>

Unordered Listicle#

1
Title of Unordered Listicle Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

2
Title of Unordered Listicle Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

3
Title of Unordered Listicle Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="bux-listicle">
<div class="bux-listicle__item bux-listicle__item--unordered ">
<h2 class="bux-listicle__title">
<span class="bux-listicle__title-number">1</span>
<span class="bux-listicle__title-text">Title of Unordered Listicle Item</span>
</h2>
<div class="bux-listicle__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="bux-listicle__item bux-listicle__item--unordered ">
<h2 class="bux-listicle__title">
<span class="bux-listicle__title-number">2</span>
<span class="bux-listicle__title-text">Title of Unordered Listicle Item</span>
</h2>
<div class="bux-listicle__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="bux-listicle__item bux-listicle__item--unordered ">
<h2 class="bux-listicle__title">
<span class="bux-listicle__title-number">3</span>
<span class="bux-listicle__title-text">Title of Unordered Listicle Item/span>
</h2>
<div class="bux-listicle__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>

Usage#

Dos#

  • Use a Listicle to educate the reader, such as a “Top 10” or “How to” list
    • Use an “Unordered Listicle” when the content doesn’t need to convey a specific order for list items
    • Use an “Ordered Listicle” variant when the sequence or count of items is important
  • Write each Listicle title to be a valuable takeaway – telling the what and how or the how and why
  • Consider 10 list items or less

Don’ts#

  • Don't use if content is time-based; consider a Timeline instead