Listicle

Component status:Beta

An article written in list format.

Example

1

Take your next step toward becoming a Buckeye

Tbdbitl Fisher first day of classes Brutus home to world-class faculty prepare our students to enter their careers as thought leaders flow of ideas Marion reflecting our world's medley of ideas, beliefs, backgrounds and cultures classsroom Lima we are all Buckeyes, but the myriad ways in which we differ make us stronger.

2

Empower people and their potential

Urban Arts Space homecoming week cutting edge of research and innovation passionate students & innovative researchers highest-ranked public university in Ohio Fisher WOSU cutting edge of research and innovation bringing together ideas and disciplines to create bold, new connections nurturing an inclusive, equitable environment for all.

3

Highest-ranked public university in Ohio

Consectetur adipiscing elit we believe there is a power inside each and every one of us to create vibrant futures buckeye ipsum nurturing an inclusive, equitable environment for all biodiversity Moritz tbdbitl Columbus Ohio Union people are at the heart of our strengths our strengths are an authentic and distinctive combination of qualities reflective of who we are.

<div class="bux-listicle">
  <div class="bux-listicle__item">
    <h2 class="bux-listicle__title">
      <div class="bux-listicle__title-number">1</div>
      <div class="bux-listicle__title-text">Take your next step toward becoming a Buckeye</div>
    </h2>
    <div class="bux-listicle__text">...</div>
  </div>
  <div class="bux-listicle__item">
    <h2 class="bux-listicle__title">
      <div class="bux-listicle__title-number">2</div>
      <div class="bux-listicle__title-text">Empower people and their potential</div>
    </h2>
    <div class="bux-listicle__text">...</div>
  </div>
  <div class="bux-listicle__item">
    <h2 class="bux-listicle__title">
      <div class="bux-listicle__title-number">3</div>
      <div class="bux-listicle__title-text">Highest-ranked public university in Ohio</div>
    </h2>
    <div class="bux-listicle__text">...</div>
  </div>
</div>

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