How to Add Pros and Cons Lists to Your Blogger Posts

A pros and cons list helps readers weigh a product, a tool, or a decision at a glance. Each item gets a green check or a red cross, and the list adapts to light and dark mode on its own.

Paste every example on this page in the post editor's HTML view, not in Compose view.

Three layouts

The lists are the same in all three layouts. Only the wrapper around them changes.

1. Stacked

Write the two lists one after the other. This works best for long items.

• Free and open source
• Loads fast on mobile
• Works in light and dark mode

• English only for now
• Needs HTML view to edit

<ul class="pros">
  <li>First advantage</li>
  <li>Second advantage</li>
</ul>
<ul class="cons">
  <li>First drawback</li>
  <li>Second drawback</li>
</ul>

2. Side by side

Wrap both lists in <div class="proscons">. They sit next to each other, and on narrow screens they move one under the other.

<div class="proscons">
  <ul class="pros">
    <li>First advantage</li>
  </ul>
  <ul class="cons">
    <li>First drawback</li>
  </ul>
</div>

3. Cards

Add card to the wrapper to put each list in its own colored card.

<div class="proscons card">
  <ul class="pros">
    <li>First advantage</li>
  </ul>
  <ul class="cons">
    <li>First drawback</li>
  </ul>
</div>

You can also use a single list on its own. Write <ul class="pros card"> to show just one card.

Custom title

The titles are Pros and Cons by default. To change one, add data-title to that list.

<ul class="pros" data-title="What we liked">...</ul>
<ul class="cons" data-title="What could be better">...</ul>

Icons only, no title

To hide the title and keep only the icons, leave data-title empty.

• No setup needed
• Works on every device

<ul class="pros" data-title="">...</ul>

Write it as data-title="" with nothing between the quotes. If you remove the attribute completely, the default title comes back.

Quick reference

You want	Write
Advantages list	<ul class="pros">
Drawbacks list	<ul class="cons">
Side by side	<div class="proscons">
Side by side in cards	<div class="proscons card">
One list in a card	<ul class="pros card">
Your own title	data-title="Your title"
Icons only	data-title=""