Pros and Cons List Template

Weigh the advantages and disadvantages of any topic with this clear, two-column comparison list.

This template is ideal for product reviews, decision-making articles, or any content where you need to present the opposing viewpoints for a single subject side-by-side.

A screenshot of a two-column list showing the pros and cons of a single topic.

Get Source Code Preview

About this Template

This component uses two distinct unordered lists, one for pros and one for cons, arranged within a responsive two-column grid. It provides clear visual cues, including color and accessible SVG icons, to differentiate between the positive and negative points. The entire template is self-contained and mobile-first, stacking the lists on small screens and placing them side-by-side on larger ones.

Features

Semantic List Structure: Employs two separate ul elements, which is a logical way to structure two distinct but related sets of points.
Clear Visual Differentiation: Uses icons and a defined color scheme to instantly communicate the nature of each list.
Responsive CSS Grid Layout: A mobile-first layout that elegantly adapts from one to two columns based on screen size.
Accessible Icons: The checkmark and cross SVG icons include a title element for screen readers, ensuring their meaning is conveyed to all users.
Self-Contained Code: Styles are completely scoped to the .pros-cons-template class to prevent any conflicts with your project's styles.

Code Breakdown

The main container, with a class of .pros-cons-container, is a CSS Grid element. A media query changes this from a single-column to a two-column layout on screens wider than 768px.

Inside the container are two div elements: one for the pros and one for the cons. Each of these contains a heading and a semantic ul. The list items use Flexbox to align the icon with the text. The icons are inline SVGs, which can be easily styled with CSS, including their color via the fill property.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pros and Cons List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8fafc;
            color: #334155;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Pros and Cons Component Styles - Copy from here
           ========================================================================== */
        .pros-cons-template {
            --proscons-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --pc-primary-text-color: #1e293b;
            --pc-secondary-text-color: #64748b;
            --pc-border-color: #e2e8f0;
            --pc-bg-color: #ffffff;
            --pc-pro-color: #16a34a;
            --pc-con-color: #dc2626;

font-family: var(--proscons-font-family);
            color: var(--pc-primary-text-color);
            width: 100%;
            max-width: 900px;
        }

.pros-cons-template *,
        .pros-cons-template *::before,
        .pros-cons-template *::after {
            box-sizing: border-box;
        }

.pros-cons-template .pros-cons-header {
            text-align: center;
            margin-bottom: 3rem;
        }

.pros-cons-template .pros-cons-header h1 {
            font-size: 2.25rem;
            margin: 0 0 0.5rem 0;
        }

.pros-cons-template .pros-cons-header p {
             font-size: 1.1rem;
             color: var(--pc-secondary-text-color);
        }

.pros-cons-container {
            display: grid;
            gap: 2rem;
        }
        
        @media (min-width: 768px) {
            .pros-cons-container {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        .pros-list-container, .cons-list-container {
            background-color: var(--pc-bg-color);
            border: 1px solid var(--pc-border-color);
            border-radius: .5rem;
            padding: 1.5rem;
        }
        
        .pros-list-container h2 {
            color: var(--pc-pro-color);
        }

.cons-list-container h2 {
             color: var(--pc-con-color);
        }

.pros-cons-container h2 {
            font-size: 1.25rem;
            margin: 0 0 1rem 0;
            padding-bottom: .75rem;
            border-bottom: 1px solid var(--pc-border-color);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .pros-cons-container ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .pros-cons-container li {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            margin-bottom: 1rem;
            line-height: 1.5;
            color: var(--pc-secondary-text-color);
        }
        
        .pros-cons-container li:last-child {
            margin-bottom: 0;
        }
        
        .pros-cons-container .icon {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            margin-top: .125em;
        }
        
        .pros-list-container .icon { fill: var(--pc-pro-color); }
        .cons-list-container .icon { fill: var(--pc-con-color); }

</style>
</head>
<body>

<div class="pros-cons-template">
    <header class="pros-cons-header">
        <h1>Upgrading to a Dragon for Your Daily Commute</h1>
        <p>A thorough analysis for the modern professional considering alternative transport.</p>
    </header>

<div class="pros-cons-container">
        
        <div class="pros-list-container">
            <h2>
                <svg class="icon" role="img" viewBox="0 0 20 20"><title>Pros:</title><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
                Pros
            </h2>
            <ul>
                <li><svg class="icon" role="img" viewBox="0 0 20 20"><title>Pro</title><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
                    Completely immune to traffic jams and road closures.
                </li>
                <li><svg class="icon" role="img" viewBox="0 0 20 20"><title>Pro</title><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
                    No one will ever take your reserved parking spot again.
                </li>
                <li><svg class="icon" role="img" viewBox="0 0 20 20"><title>Pro</title><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
                    Ability to roast marshmallows on the go is a significant convenience.
                </li>
            </ul>
        </div>

<div class="cons-list-container">
            <h2>
                <svg class="icon" role="img" viewBox="0 0 20 20"><title>Cons:</title><path d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
                Cons
            </h2>
            <ul>
                <li><svg class="icon" role="img" viewBox="0 0 20 20"><title>Con</title><path d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
                    Fueling costs (in livestock) are substantially higher than gasoline.
                </li>
                 <li><svg class="icon" role="img" viewBox="0 0 20 20"><title>Con</title><path d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
                    Difficult to find a mechanic who services "primordial fire-breathing megafauna."
                </li>
                <li><svg class="icon" role="img" viewBox="0 0 20 20"><title>Con</title><path d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
                    Regularly shedding giant, metallic scales tends to lower property values.
                </li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

View Output