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,...

Display next
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>