Skip to content
Communications EO Resources

Compare Chart

The Compare Chart Component provides accessible, branded comparison tables for side-by-side feature analysis. Perfect for comparing plans, programs, policies, or options. Simply copy and paste any comparison chart below directly into the Edlio WYSIWYG editor.

Key Features

Section titled “Key Features”

Visual Indicators

Green ✓ checkmarks and red ✗ X marks communicate availability at a glance — reinforced with color and symbol for accessibility.

Highlighted Recommended Option

Gold border and RECOMMENDED badge visually elevate a featured column without disrupting the table structure.

6 Ready-to-Use Styles

Basic, Recommended, Navy Header, Before/After, Compact, and Gold Accent variants cover every comparison scenario.

No Dependencies

Pure HTML with inline CSS — paste directly into Edlio WYSIWYG with no stylesheets required.

When to Use Compare Charts

Section titled “When to Use Compare Charts”
Use CaseRecommended StyleColumns
Program/plan comparisonRecommended (Gold highlight)3–4
School-level feature comparisonNavy Header3–4
Before/after policy changesBefore/After (Light Blue accent)2
Service availability by locationCompact (Minimal borders)2–3
Enrollment optionsGold Accent3–4
Quick yes/no feature listBasic (3-Column)3

Visual Indicators

Section titled “Visual Indicators”
SymbolColorMeaningStyle
✓#28a745 (Green)Available / Included / Yesfont-size: 18px; color: #28a745;
✗#dc3545 (Red)Not Available / Not Included / Nofont-size: 18px; color: #dc3545;
Descriptive text#333Full detail (e.g., “Advanced”, “5 days/week”)font-size: 14px; color: #333;
Partial text#666Limited availability (e.g., “Basic”, “Limited”)font-size: 14px; color: #666;
RECOMMENDED badge#f0ad4e bg / white textHighlights the preferred optionbackground-color: #f0ad4e;

Copy-Paste Code

Section titled “Copy-Paste Code”
<!-- COMPARE CHART - 3 COLUMN (BASIC) -->
<table style="width: 100%; table-layout: fixed; border-collapse: collapse; margin: 20px 0; border: 1px solid #dce0ef;">
    <thead>
        <tr style="background-color: #f8f9fa;">
            <th style="padding: 16px 12px; text-align: left; font-weight: 600; font-size: 14px; border: 1px solid #dce0ef; color: #333; width: 40%;">Features</th>
            <th style="padding: 16px 12px; text-align: center; font-weight: 600; font-size: 14px; border: 1px solid #dce0ef; background-color: #ffffff; color: #333;">Option A</th>
            <th style="padding: 16px 12px; text-align: center; font-weight: 600; font-size: 14px; border: 1px solid #dce0ef; background-color: #ffffff; color: #333;">Option B</th>
            <th style="padding: 16px 12px; text-align: center; font-weight: 600; font-size: 14px; border: 1px solid #dce0ef; background-color: #ffffff; color: #333;">Option C</th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color: #ffffff;">
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Basic Access</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 18px; color: #28a745; text-align: center;">✓</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 18px; color: #28a745; text-align: center;">✓</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 18px; color: #28a745; text-align: center;">✓</td>
        </tr>
        <tr style="background-color: #f8f9fa;">
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Advanced Features</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 18px; color: #dc3545; text-align: center;">✗</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 18px; color: #28a745; text-align: center;">✓</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 18px; color: #28a745; text-align: center;">✓</td>
        </tr>
        <tr style="background-color: #ffffff;">
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Priority Support</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 18px; color: #dc3545; text-align: center;">✗</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 18px; color: #dc3545; text-align: center;">✗</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 18px; color: #28a745; text-align: center;">✓</td>
        </tr>
        <tr style="background-color: #f8f9fa;">
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Custom Integration</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 18px; color: #dc3545; text-align: center;">✗</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 18px; color: #dc3545; text-align: center;">✗</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 18px; color: #28a745; text-align: center;">✓</td>
        </tr>
    </tbody>
</table>

PUSD Brand Colors Reference

Section titled “PUSD Brand Colors Reference”
Color NameHEXUsed In
PUSD Navy#003366Compact header
PUSD Alt 3 (Deep Blue)#3a57a8Navy Header, Before/After header
PUSD Light Blue#54c8ebBefore/After “New Policy” column header
PUSD Gold#f0ad4eRecommended badge, Gold Accent header
PUSD Alt 1 (Light Gray-Blue)#dce0efCell borders throughout
Recommended Tint#fef9f0Gold-highlighted column background
Light Blue Tint#e8f7fc”New” column background in Before/After
Check Green#28a745✓ checkmark symbol color
X Red#dc3545✗ X mark symbol color
Partial Gray#666Partial feature text

Customization Guide

Section titled “Customization Guide”

  1. Add or remove comparison columns — Add a <th> in <thead> and a matching <td> in every <tbody> row. Keep <th> and <td> counts consistent across all rows.

  2. Add or remove feature rows — Copy an existing <tr>...</tr> block from <tbody>, paste it after the last row, and maintain the alternating background-color for correct striping.

  3. Highlight a column as recommended — Apply border: 2px solid #f0ad4e; and background-color: #fef9f0; to the <th> and all <td> cells in that column. Add the RECOMMENDED badge <span> inside the <th>.

  4. Change symbol to descriptive text — Replace ✓ or ✗ with text such as "Limited", "Basic", or a numeric value. Set font-size: 14px; color: #333; on the <td> for text content.

  5. Add pricing to column headers — Use <br> and a <span style="font-size: 12px; font-weight: 400; color: #666;"> tag inside <th> for a subtitle line below the column name.

  6. Change the header color theme — Replace background-color on the <tr> inside <thead>. Update border colors on <th> to match (e.g., swap #3a57a8 + #2a4788 for Navy, or #f0ad4e + #e09d3e for Gold).

  7. Adjust first column width — Change width: 40%; on the first <th> to 50% for a wider feature label column, especially useful for longer feature names.

  8. Bold feature category rows — Add font-weight: 600; to a <td> in the first column to create visual groupings within the feature list.

Accessibility

Section titled “Accessibility”

Best Practices

Section titled “Best Practices”