Comparison Table
This is the Comparison Table component. It's an example.
- 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>