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

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

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

3 Title 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. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </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. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </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. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Listicle

Available variables:

- modifier:         Sets the listicle variant. Either null or unordered.
- heading_level:    Integer. Sets the listicle title heading level.
- items:            Array of listicle items.
- item.title:       Title of the listicle item.
- item.text:        Content for the listicle item.

#}

<div class="bux-listicle">
	{% for item in items %}
		<div class="bux-listicle__item {% if modifier %} bux-listicle__item--{{modifier}} {% endif %}">
			<h{{heading_level|default(2)}} class="bux-listicle__title">
				<span class="bux-listicle__title-number">{{ loop.index }}</span>
				<span class="bux-listicle__title-text">{{ item.title }}</span>
			</h{{heading_level|default(2)}}>
			<div class="bux-listicle__text">{{ item.text }}</div>
		</div>
	{% endfor %}
</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. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </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. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </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. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Listicle

Available variables:

- modifier:         Sets the listicle variant. Either null or unordered.
- heading_level:    Integer. Sets the listicle title heading level.
- items:            Array of listicle items.
- item.title:       Title of the listicle item.
- item.text:        Content for the listicle item.

#}

<div class="bux-listicle">
	{% for item in items %}
		<div class="bux-listicle__item {% if modifier %} bux-listicle__item--{{modifier}} {% endif %}">
			<h{{heading_level|default(2)}} class="bux-listicle__title">
				<span class="bux-listicle__title-number">{{ loop.index }}</span>
				<span class="bux-listicle__title-text">{{ item.title }}</span>
			</h{{heading_level|default(2)}}>
			<div class="bux-listicle__text">{{ item.text }}</div>
		</div>
	{% endfor %}
</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