Venn Diagram
Displays images and text in the form of a 3-circle Venn Diagram.
World-Class Business Education
Intimate Learning Environment
Dynamic Global City
-
Goizueta Full-Time MBA
Our One-Year MBA experience honors the man we are named for...
-
World-Class Business Education
Not only will you learn from world renowned faculty but you...
-
Intimate Learning Environment
Goizueta is small by desgin and desgined to be small...
-
Dynamic, Global City
Pursuing your Goizueta MBA means access to all Atlanta has to offer...
-
Education Made Personal
Lorem ipsum dolor sit amet adipiscing
-
Career Launchpad
Lorem ipsum dolor sit amet adipiscing
-
Opportunities Abound
Lorem ipsum dolor sit amet adipiscing
-
The Goizueta Effect
Your time in this program is about growing as a person,...
- Markup Details
-
{{ attach_library('goizueta_theme/venn') }} {# Preserve the Drupal attributes if they're available. #} {% set component_classes = 'venn' %} {% set attributes = attributes ? attributes.addClass(component_classes) : ' class="' ~ component_classes ~ '"' %} <article {{ attributes|raw }}> <div class="venn__diagram" id="{{ safe_id }}" data-c1_fg_color="{{ c1_fg_color }}" data-c1_bg_color="{{ c1_bg_color }}" data-c2_fg_color="{{ c2_fg_color }}" data-c2_bg_color="{{ c2_bg_color }}" data-c3_fg_color="{{ c3_fg_color }}" data-c3_bg_color="{{ c3_bg_color }}" data-safe_id_c1="{{ safe_id_c1 }}" data-safe_id_c2="{{ safe_id_c2 }}" data-safe_id_c3="{{ safe_id_c3 }}" data-safe_id_c1_c2="{{ safe_id_c1_c2 }}" data-safe_id_c2_c3="{{ safe_id_c2_c3 }}" data-safe_id_c1_c3="{{ safe_id_c1_c3 }}" data-safe_id_all="{{ safe_id_all }}" data-state="initial" > <svg viewBox="0 0 100 100"> <defs> <pattern id="{{ safe_id_c1 }}" patternUnits="userSpaceOnUse" width="100" height="100"> <image href="{{ c1_hover_img_url }}" x="20" y="4" width="60" height="60" /> </pattern> <pattern id="{{ safe_id_c2 }}" patternUnits="userSpaceOnUse" width="100" height="100"> <image href="{{ c2_hover_img_url }}" x="0" y="35" width="60" height="60" /> </pattern> <pattern id="{{ safe_id_c3 }}" patternUnits="userSpaceOnUse" width="100" height="100"> <image href="{{ c3_hover_img_url }}" x="37" y="35" width="60" height="60" /> </pattern> <pattern id="{{ safe_id_c1_c2 }}" patternUnits="userSpaceOnUse" width="100" height="100"> <image href="{{ c1_c2_hover_img_url }}" x="0" y="0" width="80" height="100" /> </pattern> <pattern id="{{ safe_id_c2_c3 }}" patternUnits="userSpaceOnUse" width="100" height="100"> <image href="{{ c2_c3_hover_img_url }}" x="0" y="35" width="100" height="60" /> </pattern> <pattern id="{{ safe_id_c1_c3 }}" patternUnits="userSpaceOnUse" width="100" height="100"> <image href="{{ c1_c3_hover_img_url }}" x="20" y="0" width="80" height="100" /> </pattern> <pattern id="{{ safe_id_all }}" patternUnits="userSpaceOnUse" width="100" height="100"> <image href="{{ all_hover_img_url }}" x="0" y="0" width="100" height="100" /> </pattern> </defs> <g class="venn__group_c1_c2" fill="transparent"> <circle cx="50" cy="34" r="30" /> <circle cx="32" cy="65" r="30" /> </g> <g class="venn__group_c2_c3" fill="transparent"> <circle cx="32" cy="65" r="30" /> <circle cx="67" cy="65" r="30" /> </g> <g class="venn__group_c1_c3" fill="transparent"> <circle cx="50" cy="34" r="30" /> <circle cx="67" cy="65" r="30" /> </g> <g class="venn__group_all" fill="transparent"> <circle cx="50" cy="34" r="30" /> <circle cx="32" cy="65" r="30" /> <circle cx="67" cy="65" r="30" /> </g> <circle class="venn__c1" cx="50" cy="34" r="30" cursor="pointer" pointer-events="visible" stroke="transparent" stroke-width="0.25" fill="{{ c1_bg_color }}" /> <circle class="venn__c2" cx="32" cy="65" r="30" cursor="pointer" pointer-events="visible" stroke="transparent" stroke-width="0.25" fill="{{ c2_bg_color }}" /> <circle class="venn__c3" cx="67" cy="65" r="30" cursor="pointer" pointer-events="visible" stroke="transparent" stroke-width="0.25" fill="{{ c3_bg_color }}" /> </svg> <div class="c1-title" style="color: {{ c1_fg_color }}">{{ c1_title }}</div> <div class="c2-title" style="color: {{ c2_fg_color }}">{{ c2_title }}</div> <div class="c3-title" style="color: {{ c3_fg_color }}">{{ c3_title }}</div> </div> <div class="venn__text"> <ul class="venn__text-list"> <li class="initial-text active"> {{ initial_text }} </li> <li class="c1-text"> {{ c1_text }} </li> <li class="c2-text"> {{ c2_text }} </li> <li class="c3-text"> {{ c3_text }} </li> <li class="c1-c2-text"> {{ c1_c2_text }} </li> <li class="c1-c3-text"> {{ c1_c3_text }} </li> <li class="c2-c3-text"> {{ c2_c3_text }} </li> <li class="all-text"> {{ all_text }} </li> </ul> <a class="venn__cycle" href="#">{{ "Display next"|trans }}</a> </div> </article>