Skip to main content

Listicle

Component status:Beta
An article written in list format.

Examples#

Ordered Listicle#

1
Take your next step toward becoming a Buckeye

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">Listicle item 1</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">Listicle item 2</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">Listicle item 3</div>
</h2>
<div class="bux-listicle__text">...</div>
</div>
</div>

Unordered Listicle#

1
Listicle item 1

Text for listicle item 1. I'm baby yOLO vice neutra, kale chips DIY hell of yuccie. Typewriter franzen street art activated charcoal. Gluten-free art party live-edge, yuccie next level mlkshk meditation skateboard tattooed shaman craft beer ennui.

2
Listicle item 2

Text for listicle item 2. Keffiyeh live-edge four dollar toast, kogi scenester raclette iceland. Affogato PBR&B chillwave polaroid echo park. Kogi shoreditch put a bird fashion axe bitters heirloom pitchfork thundercats echo park.

3
Listicle item 3

Text for listicle item 3. Cronut hella iceland selfies microdosing man braid kale chips vice kitsch beard shabby chic pickled woke chartreuse pug. Plaid flexitarian authentic, fam keytar meh jean shorts craft beer pour-over listicle. Banh mi 3 wolf moon plaid mixtape yuccie blog copper mug kombucha.
<div class="bux-listicle">
<div class="bux-listicle__item bux-listicle__item--unordered ">
<h2 class="bux-listicle__title">
<div class="bux-listicle__title-number">1</div>
<div class="bux-listicle__title-text">Listicle item 1</div>
</h2>
<div class="bux-listicle__text">...</div>
</div>
<div class="bux-listicle__item bux-listicle__item--unordered ">
<h2 class="bux-listicle__title">
<div class="bux-listicle__title-number">2</div>
<div class="bux-listicle__title-text">Listicle item 2</div>
</h2>
<div class="bux-listicle__text">...</div>
</div>
<div class="bux-listicle__item bux-listicle__item--unordered ">
<h2 class="bux-listicle__title">
<div class="bux-listicle__title-number">3</div>
<div class="bux-listicle__title-text">Listicle item 3</div>
</h2>
<div class="bux-listicle__text">...</div>
</div>
</div>