Skip to main content

Checklist Sections

Checklist sections present information in a visually appealing list format with icons, perfect for comparing options, highlighting features, or showing what's included. They're ideal for pros and cons lists, feature comparisons, or any content that benefits from clear visual indicators.

What Are Checklist Sections?​

Checklist sections display items with visual indicators (checkmarks, X marks, or custom icons) to help visitors quickly scan and understand information. They're excellent for:

  • What's included vs. not included in packages or plans
  • Pros and cons comparisons
  • Feature lists with visual confirmation
  • Benefits and limitations clearly displayed
  • Requirements or prerequisites for services

Think of checklist sections as your visual guide to help visitors quickly understand what they get (or don't get) with your offering.

When to Use Checklist Sections​

Perfect for:

  • Package comparisons - What's included in each tier
  • Pros and cons lists - Balanced view of options
  • Feature confirmations - Visual "yes/no" indicators
  • Requirements lists - What visitors need to get started
  • Benefit highlights - Key advantages with checkmarks

Best placement: After introductory content, before pricing sections, or as supporting evidence for claims.

[Screenshot: Examples of different checklist section layouts and uses]

Checklist Section Elements​

Header Content​

Eyebrow Heading

  • Purpose: Context or category for your checklist
  • Examples: "What's Included", "Compare Options", "Key Benefits"
  • Keep brief: 1-3 words maximum

Main Heading

  • Purpose: Clear title for what the checklist represents
  • Examples: "Everything in Your Package", "Pros and Cons", "Features at a Glance"
  • Best practice: Make it clear what the list is comparing or confirming

Body Content

  • Purpose: Introduction or context for the checklist items
  • Examples: "Our comprehensive package includes everything you need to get started"
  • Length: 1-2 paragraphs work well
  • Format: Supports rich text formatting

Checklist Items​

Each checklist item contains:

Item Heading

  • Purpose: The specific feature, benefit, or item being checked
  • Examples: "24/7 Customer Support", "Mobile App Access", "Free Updates"
  • Length: Keep concise - 1-5 words ideal
  • Required: Yes, every item needs a heading

Item Description (Optional)

  • Purpose: Additional details about the item
  • Best practice: Explain why this matters to the visitor
  • Length: 1-2 sentences when needed
  • Format: Supports rich text (bold, italic, links)

Custom Icon (Optional)

  • Purpose: Override the default check/X icon with something specific
  • Options: Choose from 100,000+ Iconify icons
  • Examples:
    • material-symbols:check-circle for confirmations
    • heroicons:x-circle for exclusions
    • tabler:star-filled for premium features
  • Browse icons: Iconify Icon Sets

Footer Content​

Call-to-Action Buttons

  • Purpose: Guide visitors to the next step
  • Examples: "Get Started", "View Pricing", "Contact Sales"
  • Best practice: 1-2 buttons maximum
  • Styles: Primary, Secondary, or Ghost buttons

Outro Content (Optional)

  • Purpose: Additional information after the checklist
  • Examples: Disclaimers, additional notes, or context
  • Format: Supports rich text formatting

Layout and Design Options​

List Style Options​

Default Check Style

  • Green checkmarks for positive/included items
  • Red X marks for negative/excluded items
  • Automatic based on context (system determines best icon)

Custom Icon Style

  • Override individual items with specific icons
  • Maintain consistency across similar items
  • Use color-coded icons for different categories

Item Size Options​

Standard Size (Default)

  • Compact layout for longer lists
  • Best for: 5+ items
  • Icon size: Normal scale
  • Good for: Feature lists, requirements

Large Size

  • More prominent display with larger icons
  • Best for: 3-4 key items
  • Icon size: Increased scale
  • Good for: Major benefits, key differentiators

Layout Variants​

Left Aligned (Default)

  • Standard left alignment for content
  • Best for: Most use cases
  • Reading flow: Natural left-to-right

Centered

  • Center-aligned content for impact
  • Best for: Short lists, key features
  • Visual impact: Draws focus to center

Right Aligned

  • Right-aligned content (less common)
  • Best for: RTL languages or specific designs
  • Special use: When paired with left-side media

Display Styles​

Grid Display (Default)

  • Multi-column layout for items
  • Columns: 1, 2, or 3 columns
  • Best for: Many items, space efficiency
  • Responsive: Adjusts to screen size

Inline Display

  • Single column with items stacked
  • Best for: Detailed descriptions
  • Reading flow: Top to bottom
  • Focus: One item at a time

Theme and Styling​

Theme Variants​

Light Theme

  • Light background with dark text
  • Best for: Most websites, daytime viewing
  • Readability: High contrast for easy reading

Dark Theme

  • Dark background with light text
  • Best for: Modern designs, reduced eye strain
  • Impact: Creates dramatic effect

Background Options​

Theme Default

  • Uses global theme background color
  • Consistency: Matches other sections
  • Automatic: Updates with theme changes

Custom Background

  • Choose specific color for this section
  • Smart colors: Automatically adjusts text for contrast
  • Use when: You need this section to stand out

Animation Options​

Scroll Animation

  • Fade-in effect as items appear
  • Subtle movement for engagement
  • Performance: Optimized for smooth scrolling
  • Disable if: You prefer static appearance

Best Practices​

Content Guidelines​

Keep Items Parallel

  • Start each item with the same type of word (noun or verb)
  • Bad: "Support", "We deliver fast", "Mobile-friendly"
  • Good: "24/7 Support", "Fast Delivery", "Mobile Access"

Be Specific

  • Vague: "Great features"
  • Specific: "Unlimited storage"

Focus on Benefits

  • Feature: "SSL Certificate"
  • Benefit: "Secure checkout for customers"

Visual Consistency​

Icon Selection

  • Use checkmarks for included/positive items
  • Use X marks for excluded/negative items
  • Keep custom icons visually similar in style

Color Coding

  • Green = Included/Positive
  • Red = Excluded/Negative
  • Blue/Gray = Neutral information

Optimal List Length​

3-6 Items: Perfect for highlighting key points 7-10 Items: Good for comprehensive lists 10+ Items: Consider breaking into multiple sections

Common Use Cases​

Package Comparison​

Show what's included in a service package:

  • ✓ Unlimited Users
  • ✓ 24/7 Support
  • ✓ Mobile App
  • ✗ Custom Integrations
  • ✗ Dedicated Account Manager

Pros and Cons​

Balance positive and negative aspects:

  • ✓ Easy to set up
  • ✓ No coding required
  • ✓ Responsive design
  • ✗ Limited customization
  • ✗ Requires subscription

Feature Confirmation​

Confirm what visitors get:

  • ✓ Free Setup
  • ✓ 30-Day Money Back Guarantee
  • ✓ Lifetime Updates
  • ✓ Priority Support
  • ✓ Training Videos

Requirements List​

Show what's needed:

  • ✓ WordPress 6.0 or higher
  • ✓ PHP 7.4 or higher
  • ✓ 50MB storage space
  • ✓ Modern browser

Tips for Success​

Writing Effective Checklists​

  1. Start with most important items first
  2. Group related items together
  3. Use consistent language throughout
  4. Include context when helpful
  5. Balance positive and negative for honest comparison

Visual Impact​

  1. Limit to essentials - Don't overwhelm with too many items
  2. Use white space - Give items room to breathe
  3. Highlight key items - Use large size for most important
  4. Consider mobile - Test how it looks on phones

Conversion Optimization​

  1. Address objections - Use to overcome common concerns
  2. Build trust - Show what's included transparently
  3. Guide decisions - Help visitors understand their options
  4. Support claims - Back up your promises visually

Accessibility​

Checklist sections are built with accessibility in mind:

  • Screen reader friendly - Proper semantic markup
  • Keyboard navigation - All interactive elements accessible
  • Color contrast - WCAG compliant color combinations
  • Icon alternatives - Text always accompanies icons

Integration with Other Sections​

Checklist sections work great with:

  • Hero sections - Support main message with feature list
  • Pricing sections - Show what's included in each plan
  • Features sections - Alternative presentation for benefits
  • FAQ sections - Address "what's included" questions
  • Testimonials - Validate claimed benefits

Use checklist sections strategically to reinforce your value proposition and help visitors make informed decisions.