Comparison Table

This is the Comparison Table component. It's an example.

One-Year MBA Two-Year MBA
Program Overview The top-ranked Goizueta One-Year MBA provides the full MBA experience—including world-class academics and professional and personal development within just 12 months—delivered in a dynamic, global city. The Goizueta MBA is the only top-ranked MBA offering world-class academics and small-by-design classes delivered in a dynamic, global city. Receive high-quality, personalized feedback plus access to Fortune 500s and emerging businesses
Key Feature Accelerated curriculum with summer start Ability to switch careers through internship opportunities
Program Ranking #22 (2021, U.S. News & World Report) #22 (2021, U.S. News & World Report)
Program Format Comprehensive full-time MBA completed in one year Traditional full-time MBA pace and breadth of study—within a more flexible timeline
Program Length 12 months 24 months
Academic Background Beneficial to have quantitative background or experience Any undergraduate degree
Career Goal Ideal for students continuing on existing career paths and who don’t need an internship to meet their goals; also, great for sponsored and entrepreneurial-focused Valuable for career changers or those transitioning into industries that hire from their internship pool
Request Information
Class Size 50 students 160-180 students
Average Work Experience 5 years 6 years
Internship
Personal Career Coach Yes Yes
Explore More
Explore More
Explore More
Markup Details
                            {{ attach_library('goizueta_theme/comparison-table') }}
{% import '@components/icons/icons.twig' as icons %}

<section {{ attributes.addClass('comparison-table__container') }}>
    <table class="comparison-table">
        <tbody>
            <tr>
              <td></td>
              <td>One-Year MBA</td>
              <td>Two-Year MBA</td>
            </tr>
            <tr>
                <td>Program Overview</td>
                <td>The top-ranked Goizueta One-Year MBA provides the full MBA experience—including world-class academics and professional and personal development within just 12 months—delivered in a dynamic, global city.</td>
                <td>The Goizueta MBA is the only top-ranked MBA offering world-class academics and small-by-design classes delivered in a dynamic, global city. Receive high-quality, personalized feedback plus access to Fortune 500s and emerging businesses</td>
            </tr>
            <tr>
                <td>Key Feature</td>
                <td>Accelerated curriculum with summer start</td>
                <td>Ability to switch careers through internship opportunities</td>
            </tr>
            <tr>
                <td>Program Ranking</td>
                <td>#22 (2021, U.S. News & World Report)</td>
                <td>#22 (2021, U.S. News & World Report)</td>
            </tr>
            <tr>
              <td>Program Format</td>
              <td>Comprehensive full-time MBA completed in one year</td>
              <td>Traditional full-time MBA pace and breadth of study—within a more flexible timeline</td>
            </tr>
            <tr>
              <td>Program Length</td>
              <td>12 months</td>
              <td>24 months</td>
            </tr>
            <tr>
              <td>Academic Background</td>
              <td>Beneficial to have quantitative background or experience</td>
              <td>Any undergraduate degree</td>
            </tr>
            <tr>
              <td>Career Goal</td>
              <td>Ideal for students continuing on existing career paths and who don’t need an internship to meet their goals; also, great for sponsored and entrepreneurial-focused</td>
              <td>Valuable for career changers or those transitioning into industries that hire from their internship pool</td>
            </tr>
            <tr>
              <td>Request Information</td>
              <td>
                {% if cta %}
                  <div class="engage-card__cta" style="position: relative;">
                    {%
                      include '@components/button/button.twig' with {
                      "button": cta
                    } only
                    %}
                  </div>
                {% endif %}
              </td>
              <td>
                {% if cta %}
                  <div class="engage-card__cta" style="position: relative;">
                    {%
                      include '@components/button/button.twig' with {
                      "button": cta
                    } only
                    %}
                  </div>
                {% endif %}
              </td>
            </tr>
            <tr>
              <td>Class Size</td>
              <td>50 students</td>
              <td>160-180 students</td>
            </tr>
            <tr>
              <td>Average Work Experience</td>
              <td>5 years</td>
              <td>6 years</td>
            </tr>
            <tr>
              <td>Internship</td>
              <td>
                <svg width="21" height="20" xmlns="http://www.w3.org/2000/svg" class="icon--no">
                  <path d="M14.142 9.9l5.91 5.91c.158.158.2.231.226.32a.454.454 0 0 1 0 .267c-.027.089-.068.162-.225.32l-2.63 2.629c-.157.157-.23.198-.319.225a.454.454 0 0 1-.267 0c-.089-.027-.162-.068-.32-.225l-5.91-5.911-5.911 5.91c-.158.158-.231.2-.32.226a.454.454 0 0 1-.267 0c-.088-.027-.162-.068-.32-.225l-2.629-2.63c-.157-.157-.198-.23-.225-.319a.454.454 0 0 1 0-.267c.027-.089.068-.162.225-.32L7.071 9.9l-5.91-5.911c-.158-.158-.199-.231-.226-.32a.454.454 0 0 1 0-.267c.027-.089.068-.162.225-.32L3.79.453c.157-.157.23-.198.319-.225a.454.454 0 0 1 .267 0c.089.027.162.068.32.225l5.91 5.911 5.911-5.91c.158-.158.231-.2.32-.226a.454.454 0 0 1 .267 0c.089.027.162.068.32.225l2.629 2.63c.157.157.198.23.225.319a.454.454 0 0 1 0 .267c-.027.089-.068.162-.225.32l-5.91 5.91z" fill="#1C264C" fill-rule="evenodd"></path>
                </svg></td>
              <td>
                <svg width="24" height="20" xmlns="http://www.w3.org/2000/svg" class="icon--yes">
                  <path d="M23.146 3.4L20.354.6a.5.5 0 0 0-.708 0L7.854 12.4a.5.5 0 0 1-.708 0L4.354 9.6a.5.5 0 0 0-.708 0L.854 12.4a.5.5 0 0 0 0 .707L7.146 19.4a.5.5 0 0 0 .708 0L23.146 4.1a.5.5 0 0 0 0-.7z" fill="#1C264C" fill-rule="nonzero"></path>
                </svg>
              </td>
            </tr>
            <tr>
              <td>Personal Career Coach</td>
              <td>Yes</td>
              <td>Yes</td>
            </tr>
            <tr>
              <td>Explore More</td>
              <td>
                <a href="#" class="button  button--lighter button--top">
                  <div class="button--inner">
                    <span class="button__text">Explore More</span>
                  </div>
                </a>
              </td>
              <td>
                <a href="#" class="button  button--lighter button--top">
                  <div class="button--inner">
                    <span class="button__text">Explore More</span>
                  </div>
                </a>
              </td>
            </tr>
        </tbody>
    </table>
</section>