Accordion

The accordion. This uses Scot Ohara' accessible accordion. This github page has some good docs:
https://github.com/scottaohara/a11y_accordions
All data-aria-accordion- items are required by the js.
The js lives in the libraries/a11y-accordion folder.
Be sure to test all changes in html. Inserting html wrappers
is known to break the a11y_accordions plugin.

Qui ipsorum lingua Celtae, nostra Galli appellantur.

Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.

Markup Details
                            {{ attach_library('goizueta_theme/accordion') }}

{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('accordion-container') : ' class="accordion-container"'
%}

<section {{ attributes|raw }}>
  {% block heading %}
    {% include '@components/heading/heading.twig' with {
      "heading" : accordion.heading
    } only %}
  {% endblock %}
  <div class="accordion" data-aria-accordion="" {% if accordion.first_open %} data-constant=""{% endif %}>
    {% for item in accordion.accordion_items %}
      <h3 data-aria-accordion-heading="" class="accordion__heading">
        <button type="button" id="{{ item.id}}_trigger" class="accordion__trigger">
          {{ item.title }}
        </button>
      </h3>
      <div data-aria-accordion-panel="" id="{{ item.id }}"  class="accordion__panel">
        {{ item.body }}
      </div>
    {% endfor %}
  </div>
</section>

                          

Admission Dates

The Admission Dates component.

Applications are due by 11:59PM ET on the date of the application deadline. However, we encourage you to apply as early as possible.
  • Application Deadline
  • Notification
  • Deposit Due
  • Round 1
    Application Deadline

    October 5, 2018

    Notification

    November 30, 2018

    Deposit Due

    December 21, 2018

  • Round 2
    Application Deadline

    November 9, 2018

    Preferred deadline for international applicants and applicants interested in consideration for top named scholarships

    Notification

    January 25, 2019

    Deposit Due

    February 22, 2019

  • Round 3
    Application Deadline

    January 4, 2019

    Final deadline for general merit-based scholarships

    Notification

    March 8, 2019 (Domestic)

    March 15 (International)

    Deposit Due

    April 9, 2019

  • Round 4
    Application Deadline

    March 8, 2019

    Notification

    Rolling

    Deposit Due

    Specified upon notification

Markup Details
                            {{ attach_library('goizueta_theme/admission-dates') }}
{% import '@components/icons/icons.twig' as icons %}

{%
  set attributes = attributes ? attributes.addClass('admission-dates') : ' class="admission-dates"'
%}

<section{{ attributes|raw }}>
  {% if heading %}
    <div class="admission-dates__heading--wrapper">
      {% include '@components/heading/heading.twig' with {
        "heading" : heading
      } only %}
    </div>
  {% endif %}

  {% if intro_text %}
    <div class="admission-dates__intro">
      {% include '@components/body-text/body-text.twig' with {
        "body_text" : intro_text
      } only %}
    </div>
  {% endif %}

  {% if labels or items %}
    <div class="admission-dates__table-wrapper">
      {% if labels %}
        <ul class="admission-dates__labels">
          {% for label in labels %}
            <li class="admission-dates__labels--item">
              <span class="labels--icon">
                {{ icons.get(label.icon, 'icon--' ~ label.icon) }}
              </span>
              <span class="labels--text">{{ label.text }}</span>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
      {% if items %}
        <ul class="admission-dates__items">
          {% for item in items %}
            <li class="admission-dates__row">
              {%
                include '@components/admission-dates/admission-dates-item.twig' with {
                  "title": item.title,
                  "deadline": item.deadline,
                  "notifications": item.notifications,
                  "deposit": item.deposit
                } only
              %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  {% endif %}
</section>

                          

Admission Dates Item

The Admission Dates Item component.

Round 1*
Application Deadline October 5, 2019
Notification November 8, 2019
Deposit Due December 21, 2019
Markup Details
                            {{ attach_library('goizueta_theme/admissin-dates-item') }}
{% import '@components/icons/icons.twig' as icons %}

<article class="admission-dates__list">
  {% if title %}
    <div class="admission-dates__item admission-dates__item--first">
      <button class="admission-dates__toggle">
        {{ title }}
      </button>
      <span class="admission-dates__item--table-heading">
        {{ title }}
      </span>
    </div>
  {% endif %}
  {% if deadline %}
    <div class="admission-dates__item">
      <span class="admission-dates__label">
        {{ icons.get('clock-square', 'icon--deadline')}}
        {{ 'Application Deadline'|t }}
      </span>
      <span class="admission-dates__content">
        {{ deadline }}
      </span>
    </div>
  {% endif %}
  {% if notifications %}
    <div class="admission-dates__item">
      <span class="admission-dates__label">
        {{ icons.get('bell', 'icon--notification')}}
        {{ 'Notification'|t }}
      </span>
      <span class="admission-dates__content">
        {{ notifications }}
      </span>
    </div>
  {% endif %}
  {% if deposit %}
    <div class="admission-dates__item">
      <span class="admission-dates__label">
        {{ icons.get('deposit', 'icon--deposit')}}
        {{ 'Deposit Due'|t }}
      </span>
      <span class="admission-dates__content">
        {{ deposit }}
      </span>
    </div>
  {% endif %}
</article>

                          

Alert

The alert component displays a title and summary with an optional image.

image

Summary below is 250 chars

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula tortor. Fusce eu luctus justo. Nam ac faucibus quam. Nam libero purus, pellentesque vel urna eget, pretium sollicitudin ante. Nam viverra eros non velit interdum cras amet.
Markup Details
                            {{ attach_library('goizueta_theme/alert') }}

{# Preserve the Drupal attributes if they're available. #}
{% set attributes = attributes ? attributes.addClass('alert') : ' class="alert"' %}

<section {{ attributes|raw }}>
  <div class="alert__inner">
    {% if alert.image %}
      <div class="alert__image">{{ alert.image }}</div>
    {% endif %}
    <div class="alert__content">
      <h2 class="alert__title">{{ alert.title }}</h2>
      <div class="alert__summary">{{ alert.summary }}</div>
    </div>
  </div>
</section>

                          

Body Text

The Body Text component is simple way for displaying plain body text.

Goizueta's MSBA imparts strong technical and quantitative training plus comprehensive business acumen, specifically built for individuals who wish to speak the combined language of technology, business and data.
Markup Details
                            {{ attach_library('goizueta_theme/body-text') }}

{%
  set attributes = attributes ? attributes.addClass('body-text') : ' class="body-text"'
%}

{% if body_text %}
  <div{{ attributes|raw }}>
    {% block body_text %}
      {{ body_text }}
    {% endblock %}
  </div>
{% endif %}

                          

Breadcrumbs

Site breadcrumbs.

Markup Details
                            {% import "@components/icons/icons.twig" as icons %}

{# Preserve the Drupal attributes if they're available. #}
{% set breadcrumb_class = ['breadcrumbs', breadcrumbs.modifier_class] %}
{%
  set attributes = attributes ? attributes.addClass(breadcrumb_class) : ' class="' ~ breadcrumb_class|join(' ') ~ '"'
%}
{# If we don't use |raw twig.js tries to escape the quotes on the class attribute. #}
{% if breadcrumbs.items %}
  <nav{{ attributes|raw }} role="navigation" aria-labelledby="system-breadcrumb">
    {% block breadcrumb %}
      <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
      <ol class="breadcrumb-trail">
      {% for item in breadcrumbs.items %}
        <li class="breadcrumb-trail--item">
          {% if not loop.last %}
            <a href="{{ item.url }}">{{ item.title }}</a>
            {{ icons.get('arrow-brown', '') }}
          {% else %}
            {% if item.url %}
              <a href="{{ item.url }}">{{ item.title }}</a>
            {% else %}
              {{ item.title }}
            {% endif %}
          {% endif %}
        </li>
      {% endfor %}
      </ol>
    {% endblock %}
  </nav>
{% endif %}

                          

Breaker

The Breaker component displays a title, button, summary text, an optional image.
The two variations of the breaker depend on whether an image is uploaded or not. If no image is provided the text and CTA are displayed in the middle of the breaker. When an image is provided, the image is displayed in place of the text and CTA and these are then moved down below the blue background.

Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.
Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.
Sample text
Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.
Sample text
Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.
Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.
Markup Details
                            {# Breaker with no image and 1 CTA. #}
<section>
  {% include '@components/breaker/breaker.twig' with {
    "heading": item_no_image.heading,
    "text": item_no_image.text,
    "cta_1": item_no_image.cta_1
  } only %}
</section>

{# Breaker with no image and 2 CTAs. #}
<section style="margin-top: 100px;">
  {% include '@components/breaker/breaker.twig' with {
    "heading": item_no_image.heading,
    "text": item_no_image.text,
    "cta_1": item_no_image.cta_1,
    "cta_2": item_no_image.cta_2
  } only %}
</section>

{# Breaker with image and 2 CTAs. #}
<section style="margin-top: 100px;">
  {% include '@components/breaker/breaker.twig' with {
    "heading": item_with_image.heading,
    "text": item_with_image.text,
    "image": item_with_image.image,
    "cta_1": item_with_image.cta_1,
    "cta_2": item_with_image.cta_2
  } only %}
</section>

{# Breaker with image and custom background and 1 CTA. #}
<section style="margin-top: 100px;">
  {% include '@components/breaker/breaker.twig' with {
    "heading": item_with_image.heading,
    "text": item_with_image.text,
    "image": item_with_image.image,
    "background_image_url": item_with_image.background_image_url,
    "cta_1": item_with_image.cta_1
  } only %}
</section>

{# Breaker with video and custom background and 1 CTA. #}
<section style="margin-top: 100px;">
  {% include '@components/breaker/breaker.twig' with {
    "heading": item_with_image.heading,
    "text": item_with_image.text,
    "video": item_with_image.video,
    "background_image_url": item_with_image.background_image_url,
    "cta_1": item_with_image.cta_1
  } only %}
</section>

                          

Brochure Form

This is the Brochure Form component which allows visitors to request a program's brochure.

Markup Details
                            {{ attach_library('goizueta_theme/brochure-form') }}

<div class="brochure-form">
  <form action="/">
    <div class="brochure-form__name">
      <div class="brochure-form__name--first">
        <label for="first_name">First name*</label>
        <input id="first_name" type="text" placeholder="Your first Name">
      </div>
      <div class="brochure-form__name--last">
        <label for="last_name">Last name*</label>
        <input id="last_name" type="text" placeholder="Your last Name">
      </div>
    </div>

    <div class="brochure-form__email">
      <label for="email">Email address*</label>
      <input id="email" type="email" placeholder="Your email address">
    </div>
    <div class="brochure-form__program">
      <label for="program-list">Select a program</label>
      <select
        id="program-list"
        name="program-select"
        class="program-select">
        <option value="Option 1">Option one</option>
        <option value="Option 1">Option two</option>
        <option value="Option 1">Option three</option>
        <option value="Option 1">Option four</option>
      </select>
    </div>
    <div class="brochure-form__button">
      {% include '@components/button/button.twig' %}
    </div>
  </form>
</div>

                          

Buttons

This is the button component. It provides basic styles for buttons throughout the site.

As a link: <a>

As a button: <button>

:hover
Shows hover state of button.

As a link: <a>

As a button: <button>

.button--wide
Wider version of button.

As a link: <a>

As a button: <button>

.button--light
Light button style.

As a link: <a>

As a button: <button>

.button--lighter
Button with ligheter text and icon.

As a link: <a>

As a button: <button>

.button--ghost
A transparent version of button.

As a link: <a>

As a button: <button>

.is-disabled
Disable the button. The same styles will be applied if you use the disabled attribute. The disabled attribute is the preferred method.

As a link: <a>

As a button: <button>

Markup Details
                            {% import '@components/icons/icons.twig' as icons %}

{% if modifier_class == 'button--ghost' %}
  <div style="padding: 4rem; background-color: #1D274C;color: #fff;">
    {# Render as <a>. #}
    <p>As a link: &lt;a&gt;</p>
    <div>
      <a
        href="{{ button.url }}"
        class="button {{ modifier_class }} {{ button.classes|default('') }}"
        {{ modifier_class == 'is-disabled' ? ' disabled' }}>
        <div class="button--inner{{ button.icon is not empty ? ' has-icon' }}">
          <span class="button__text">
            {{ button.text }}
          </span>
          {% if button.icon %}
            <span class="button__icon">
              {{ icons.get(button.icon, 'icon--' ~ button.icon) }}
            </span>
          {% endif %}
        </div>
      </a>
    </div>
    {# Render as <button>. #}
    <p style="margin: 2rem 0 1rem;">As a button: &lt;button&gt;</p>
    <div>
      <button
        type="{{ button.type|default('submit') }}"
        class="button {{ modifier_class }} {{ button.classes|default('') }}"
        {{ modifier_class == 'is-disabled' ? ' disabled' }}>
        <div class="button--inner{{ button.icon is not empty ? ' has-icon' }}">
          <span class="button__text">
            {{ button.text }}
          </span>
          {% if button.icon %}
            <span class="button__icon">
              {{ icons.get(button.icon, 'icon--' ~ button.icon) }}
            </span>
          {% endif %}
        </div>
      </button>
    </div>
  </div>
{% else %}
  {# Render as <a>. #}
  <p>As a link: &lt;a&gt;</p>
  <div>
    <a
      href="{{ button.url }}"
      class="button {{ modifier_class }}{{ button.classes|default('') }}"
      {{ modifier_class == 'is-disabled' ? ' disabled' }}>
      <div class="button--inner{{ button.icon is not empty ? ' has-icon' }}">
        <span class="button__text">
          {{ button.text }}
        </span>
        {% if button.icon %}
          <span class="button__icon">
            {{ icons.get(button.icon, 'icon--' ~ button.icon) }}
          </span>
        {% endif %}
      </div>
    </a>
  </div>
  {# Render as <button>. #}
  <p style="margin: 2rem 0 1rem;">As a button: &lt;button&gt;</p>
  <div>
    <button
      type="{{ button.type|default('submit') }}"
      class="button {{ modifier_class }} {{ button.classes|default('') }}"
      {{ modifier_class == 'is-disabled' ? ' disabled' }}>
      <div class="button--inner{{ button.icon is not empty ? ' has-icon' }}">
        <span class="button__text">
          {{ button.text }}
        </span>
        {% if button.icon %}
          <span class="button__icon">
            {{ icons.get(button.icon, 'icon--' ~ button.icon) }}
          </span>
        {% endif %}
      </div>
    </button>
  </div>
{% endif %}

                          

Calendar

This is the calendar component.

Markup Details
                            {{ attach_library('goizueta_theme/calendar')}}
<div class="calendar"
  {% if id %}id="{{ id }}"{% endif %}
  {% if settingsName %}data-settingsname="{{settingsName}}"{% endif %}
>
</div>

                          

Card

This is the card component.

Markup Details
                            {{ attach_library('goizueta_theme/card') }}
{% import "@components/icons/icons.twig" as icons %}

{% set program = card.program_name|clean_class %}
{%
  set attributes = attributes ? attributes.addClass('card ' ~ program ~ '')  : ' class="card ' ~ program ~ '"'
%}

<article section {{ attributes|raw }}>
  <div class="card__inner" aria-expanded="false" role="button" tab-index="0">
    <div class="card__image">
      {{ card.image }}
    </div>
    <div class="card__content">
      <div class="card__content--title-container">
        <h3 class="card__content--title">
          {{ card.title }}
          {% if card.subhead %}
            <span class="card__content--title-subhead">{{ card.subhead }}<span>
          {% endif %}
        </h3>
        {{ icons.get('arrow-right', '') }}
      </div>
      <div class="card__content--body" aria-hidden="true">
        {{ card.body }}
        {% if card.program_meta %}
          <div class="card__meta">
            {% for item in card.program_meta %}
              <p>
                <span class="meta__label">{{ item.label }}:</span>
                <span class="meta__info">{{ item.info }}</span></p>
            {% endfor %}
          </div>
        {% endif %}
        <div class="card__learn-more">
          {% if card.link.classes is not empty %}
            <a class="{{ card.link.classes }}" href="{{ card.link.url }}">{{ card.link.text }}</a>
          {% else %}
            <a href="{{ card.link.url }}">{{ card.link.text }}</a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</article>

                          

Cards Container

This is a listing of program cards which allow for different programs to be compared.

Markup Details
                            {{ attach_library('goizueta_theme/card-container') }}

{# Preserve the Drupal attributes if they're available. #}
{% set component_classes = 'card-container' %}
{% if cta %}
  {% set component_classes = component_classes ~ ' has-cta' %}
  {% set cta_icon = cta.icon ? cta.icon : 'submit' %}
{% endif %}
{% set attributes = attributes ? attributes.addClass(component_classes) : ' class="' ~ component_classes ~ '"' %}

{# Get count of news items. #}
{% set item_count = cards|length %}

<section {{ attributes|raw }}>
  <div class="card-container__title">
    {% include '@components/heading/heading.twig' with {
      "heading" : heading
    } only %}
  </div>
  <div class="card-container__carousel{% if item_count > 4 %} hide-dots--mobile{% endif %}">
    <ul class="card-container__cards">
      {% for item in cards %}
        <li class="card-container__cards--item">
          {% include '@components/card/card.twig' with {
            "card": {
                "program_name": item.program_name,
                "program_meta": item.program_meta,
                "link": item.link,
                "image": item.image,
                "title": item.title,
                "subhead": item.subhead,
                "body": item.body,
              }
            } only
          %}
          {% block program_compare %}
            {% if item.program_name and program_compare_enabled %}
              <div class="program__compare">
                <input
                  aria-describedby="program comparison card"
                  type="checkbox"
                  id="{{ item.program_name|clean_class }}"
                  name="{{ item.program_name }}"
                  value="{{ item.program_name }}"
                  class="card__program-compare">
                <label for="{{ item.program_name|clean_class }}" class="program__compare--label">{{ item.program_name }}</label>
              </div>
            {% endif %}
          {% endblock %}
        </li>
      {% endfor %}
    </ul>
    {# This is used as a container for slider's arrows and dots. #}
    <div class="card-container__pager slick-pager"></div>
  </div>

  {% if cta %}
    {% set button_classes = 'button--primary' %}
    {% if cta.cta_classes is not empty %}
      {% set button_classes = button_classes ~ ' ' ~ cta.cta_classes %}
    {% endif %}
    <div class="card-container__cta">
      {%
        include '@components/button/button.twig' with {
          "button": {
            "text": cta.text,
            "url": cta.url,
            "icon": cta_icon,
            "classes": button_classes
          }
        } only
      %}
    </div>
  {% endif %}
</section>

                          

Chart

This is the Chart component. It's an example.

Markup Details
                            {{ attach_library('goizueta_theme/chart') }}
<section {{ attributes.addClass('chart__container') }}>
  {% block chart_table %}
    <table class="highchart use-charts" data-graph-container-before="1" data-graph-type="{{ type }}" style="display:none" data-graph-legend-layout="vertical">
        <thead>
            <tr>
                <th>Month</th>
                <th>Sales</th>
                <th>Benefits</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>January</td>
                <td>8000</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>February</td>
                <td>12000</td>
                <td>3000</td>
            </tr>
            <tr>
                <td>March</td>
                <td>18000</td>
                <td>8000</td>
            </tr>
        </tbody>
    </table>
  {% endblock %}
</section>

                          

Class Profile

This is the class profile grid.

Average GPA
3.3
Women
30%
Minorities
13%
Military
11%
International
20%
Countries Represented
180
Average Age Range
22 - 38
Student to Faculty ratio
2:1
Class size
28%
Average Work Experience
5.5 years
Average SAT
310
* Lorem ipsum standardizum testum dolor sit amet adipsicing diminishimus.
GMAT (80%) Range
640 - 740
Markup Details
                            {{ attach_library('goizueta_theme/class-profile') }}
{% import '@components/icons/icons.twig' as icons %}

<section class="class-profile">
  <div class="class-profile__inner">
    {% block heading %}
      {% include '@components/heading/heading.twig' with {
        "heading" : heading
      } only %}
    {% endblock %}
    <div class="class-profile__grid">
      {% for item in items %}
        <div class="class-profile__grid--item">
          <div class="class-profile__item--title">
            {% if item.icon %}
              <span class="class-profile__icon">
                {{ item.icon }}
              </span>
            {% endif %}
            <span class="class-profile__title--label">
              {{ item.title }}
            </span>
          </div>
          <div class="class-profile__item--stat">
            {{ item.stat_value | raw }}
          </div>
          {% if item.help_value %}
            <div class="class-profile__item--help">
              {{ item.help_value }}
            </div>
          {% endif %}
        </div>
      {% endfor%}
    </div>
  </div>
</section>

                          

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>

                          

Contact Info

This is the Contact component provides the schools physical address, email address, phone number, as well as a link to get directions. This is typically found in the site's footer.

1300 Clifton Road

Atlanta, GA 30322

Get directions

Markup Details
                            {{ attach_library('goizueta_theme/contact') }}

<div class="goiz-contact">
  <address class="goiz-contact__address">
    <p>{{ contact.street }}</p>
    <p>{{ contact.city_zip }}</p>
    <p class="contact__directions">
      <a href="{{ contact.directions_url }}" target="_blank">
        {{ contact.directions_label }}
      </a>
    </p>
  </address>
  <div class="goiz-contact__email-phone">
    <p>
      <span class="contact__label">{{ 'Email'|t }}</span class="contact__label">:
      <a class="contact__email" href="mailto:{{ contact.email }}">
        {{ contact.email }}
      </a>
    </p>
    <p>
      <span class="contact__label">{{ 'Phone'|t }}</span class="contact__label">:
      <a class="contact__phone" href="tel:{{ contact.phone }}">
        {{ contact.phone}}
      </a>
    </p>
  </div>
</div>

                          

Content Card

The Content Card component is intended to hold potentially any kind of content (Text, images, etc.).

Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.
Markup Details
                            {{ attach_library('goizueta_theme/content-card') }}

<article class="content-card{{ classes|default('') }}{% if content_card.media %} card-has-image{% endif %}">
  <div class="content-card__inner">
    <div class="content-card__content">
      {% if content_card.title %}
        {%
          include '@components/heading/heading.twig' with {
            "heading": content_card.title
          } only
        %}
      {% endif %}

      {% if content_card.body %}
        <div class="content-card__body">
          {{ content_card.body }}
        </div>
      {% endif %}

      {% if content_card.media %}
        <div class="content-card__media">
          {{ content_card.media }}
        </div>
      {% endif %}
    </div>
  </div>
</article>

                          

Education

This is the Education component that lives in the student faculty profile sidebar.

  • MBA, Lorem Ipsum
    Lorem ipsum dolor sit amet
    Consectetur adipiscing
    1997
  • Ph.D., Lorem Ipsum
    Lorem ipsum dolor sit amet
    Consectetur adipiscing
    2002
Markup Details
                            {{ attach_library('goizueta_theme/education') }}

{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('education') : ' class="education"'
%}

<article{{ attributes|raw }}>

  {% if education.heading %}
    {%
      include '@goizueta_theme/heading/heading.twig' with {
        "heading": education.heading
      }
    %}
  {% endif %}

  {% if education.items %}
    <ul class="education__list">
      {% for item in education.items %}
        <li class="education__item">
          <div class="education__degree">{{ item.degree }}</div>
          <div class="education__program">{{ item.program }}</div>
          <div class="education__year">{{ item.year }}</div>
        </li>
      {% endfor %}
    </ul>
  {% endif %}

</article>

                          

Emory Alert

The alert component displays a Emory Emergency Broadcast Message.

Fusce eu luctus justo. Nam ac faucibus quam.

-- This is a Test of the Emory Emergency Broadcast System - [Beginning] --

Fusce eu luctus justo. Nam ac faucibus quam.

Fusce eu luctus justo. Nam ac faucibus quam.

-- This is a Test of the Emory Emergency Broadcast System - [End] --

Markup Details
                            {{ attach_library('goizueta_theme/emory-alert') }}
{{ attach_library('goizueta_theme/emory-alert-test') }}

{% set attributes = attributes ? attributes.addClass('emory-alert') : ' class="emory-alert"' %}

<section {{ attributes|raw }}>
  <div class="alert__inner">
    <div class="emory-alert-24h">
      <div id="emerg-alert-system">
        <p>{{ alert.message }}</p>
      </div>
    </div>
  </div>
</section>

<section {{ attributes|raw }}>
  <div class="alert__inner">
    <p class="alert__title">-- This is a Test of the Emory Emergency Broadcast System - [Beginning] --</p>
    <div class="emory-alert-24h-test">
      <div id="emerg-alert-system-test">
        <p>{{ alert.message }}</p>
        <p>{{ alert.message }}</p>
      </div>
    </div>
    <p class="alert__title">-- This is a Test of the Emory Emergency Broadcast System - [End] --</p>
  </div>
</section>


                          

Engage Card

The Engage Card component.

Long consultation

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
Markup Details
                            {{ attach_library('goizueta_theme/engage-card') }}
{% import '@components/icons/icons.twig' as icons %}

{%
  set attributes = attributes ? attributes.addClass('engage-card') : ' class="engage-card"'
%}

<article{{ attributes|raw }}>
  {% if icon %}
    <div class="engage-card__icon">
      <span>
        {{ icon }}
      </span>
    </div>
  {% endif %}
  {% if title %}
    {%
      include '@components/heading/heading.twig' with {
        "heading": {
          "title_light": title,
          "heading_level": 3,
          "classes": 'engage-card__title'
        }
      } only
    %}
  {% endif %}

  {% if body %}
    <div class="engage-card__body">
      {{ body }}
    </div>
  {% endif %}

  {% if cta %}
    <div class="engage-card__cta">
      {%
        include '@components/button/button.twig' with {
          "button": cta
        } only
      %}
    </div>
  {% endif %}

</article>

                          

Engage Card Image

The Engage Card Image component.

Generic Placeholder

Image Highlight

Morbi video risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
Markup Details
                            {{ attach_library('goizueta_theme/engage-card-image') }}
{%
  set attributes = attributes ? attributes.addClass('engage-card-image') : ' class="engage-card-image"'
%}

<article{{ attributes|raw }}>
  {% if image %}
    <div class="engage-card__image">
      {{ image }}
    </div>
  {% endif %}
  {% if title %}
    {%
      include '@components/heading/heading.twig' with {
        "heading": {
          "title_light": title,
          "heading_level": 3,
          "classes": 'engage-card__title'
        }
      } only
    %}
  {% endif %}

  {% if body %}
    <div class="engage-card__body">
      {{ body }}
    </div>
  {% endif %}

  {% if cta %}
    <div class="engage-card__cta">
      {%
        include '@components/button/button.twig' with {
          "button": cta
        } only
      %}
    </div>
  {% endif %}

</article>

                          

Engage Card Video

The Engage Card Video component.

Video consultation

Morbi video risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
Markup Details
                            {{ attach_library('goizueta_theme/engage-card-video') }}
{% import '@components/icons/icons.twig' as icons %}
{%
  set attributes = attributes ? attributes.addClass('engage-card-video') : ' class="engage-card-video"'
%}

<article{{ attributes|raw }}>
  {% if video %}
    <div class="engage-card__video">
      <a href="{{ video.url }}" class="engage__video-link" data-lity aria-label="Link to open video">
        {{ video.poster }}
        <span class="engage__icon-wrapper">
        {{ icons.get('play', 'engage__play-icon') }}
      </span>
      </a>
    </div>
  {% endif %}
  {% if title %}
    {%
      include '@components/heading/heading.twig' with {
        "heading": {
          "title_light": title,
          "heading_level": 3,
          "classes": 'engage-card__title'
        }
      } only
    %}
  {% endif %}

  {% if body %}
    <div class="engage-card__body">
      {{ body }}
    </div>
  {% endif %}

</article>

                          

Engage Cards List

The Engage Cards List component is a collection of engage cards. On mobile, the cards are displayed in a slider and on desktop they are stacked vertically and sider is disabled.

  • hourglass-big

    Electronic Funds Transfer (EFT)

    Spread the cost of your support over the course of a year by authorizing your bank to transfer to Emory a monthly amount you've predetermined.
  • hourglass-big

    Matching Gift

    Double or even triple the value of your donation by asking your company to match your support for Emory.
  • building

    Stocks, Securities, or Estate

    There are many ways to give to Emory. With careful planning, you can create a legacy at Goizueta and tax benefits for yourself.
  • calendar

    Lorem Ipsum

    Nulla ac laoreet quam. In hac habitasse platea dictumst. Donec at urna quam.
.engage-cards-horizontal
Render the Engage cards in a horizontal layout.
  • hourglass-big

    Electronic Funds Transfer (EFT)

    Spread the cost of your support over the course of a year by authorizing your bank to transfer to Emory a monthly amount you've predetermined.
  • hourglass-big

    Matching Gift

    Double or even triple the value of your donation by asking your company to match your support for Emory.
  • building

    Stocks, Securities, or Estate

    There are many ways to give to Emory. With careful planning, you can create a legacy at Goizueta and tax benefits for yourself.
  • calendar

    Lorem Ipsum

    Nulla ac laoreet quam. In hac habitasse platea dictumst. Donec at urna quam.
Markup Details
                            {{ attach_library('goizueta_theme/engage-cards-list') }}
{% if items|length == 2 or items|length == 4 %}
  {% if modifier_class == 'engage-cards-horizontal' %}
    {% set modifier_class = modifier_class ~ " cols2" %}
  {% endif %}
{% endif %}
<div class="engage-cards-list {{ modifier_class }}">
  {% if heading %}
    {%
      include '@components/heading/heading.twig' with {
        "heading": heading
      }
    %}
  {% endif %}
  <ul class="engage-cards__items">
    {% block engage_card_items %}
      {% for item in items %}
        <li class="engage-cards__item">
          {%
            include '@components/engage-card/engage-card.twig' with {
              "title": item.title,
              "body": item.body,
              "cta": item.cta,
              "icon": item.icon
            } only
          %}
        </li>
      {% endfor %}
    {% endblock %}
  </ul>
  {# This is used as a container for slider's arrows and dots. #}
  <div class="engage-cards-list__pager slick-pager"></div>
</div>

                          

Event Actions

The Event Actions is a list of links that allow visitors to do actions when reading an event. For example, view more details, add to calendar, etc.

Markup Details
                            {{ attach_library('goizueta_theme/event-actions') }}
{% import '@components/icons/icons.twig' as icons %}

<ul class="event__actions--list">
  {% for item in event_actions %}
    <li class="event__actions--item{% if item.subactions %} has-subactions{% endif %}">
      {% if item.subactions %}
        <div class="event__actions--link" aria-label="Reveal more connection options">
      {% else %}
        <a href="{{ item.url }}" class="event__actions--link">
      {% endif %}
        <span class="event__actions--icon">
          {{ icons.get(item.icon, 'icon--' ~ item.icon) }}
        </span>
        <span>
          {{ item.label }}
        </span>
        {% if item.subactions %}
          </div>
        {% else %}
        </a>
      {% endif %}
      {% if item.subactions %}
        <ul class="event__subactions">
          {% for subitem in item.subactions %}
            <li class="event__subactions--item">
              <a href="https://eventactions.com/eventactions/tyling-test-calendar#/actions/{{ subitem.action }}/{{ item.event_id }}" data-lity>{{ subitem.label }} </a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>

                          

Event Card

The Event Card is present on the following pages:
Homepage as part of the Events Slider,
Event Detail page in the right rail.

Tuesday October
17
Admissions - Full-time MBA
Time 6 - 8:30 PM
Location PWC, 300 Madison Avenue, New York, NY 10017
Register
Join us for an interactive evening that focuses on women's leadership and the benefits of obtaining an MBA. You'll also be able to interact with other prospective MBA women, MBA alumnae, and admission directors! We hope to see you there.
Markup Details
                            {{ attach_library('goizueta_theme/event-card') }}
{% import '@components/icons/icons.twig' as icons %}

{# Preserve the Drupal attributes if they're available. #}
{# Pass the value of `classes` as modifier classes #}
{%
  set attributes = attributes ? attributes.addClass('event-card' ~ event_card.classes|default('')) : ' class="event-card' ~ event_card.classes|default('') ~ '"'
%}

{# If we don't use |raw twig.js tries to escape the quotes on the class attribute. #}
<article{{ attributes|raw }}>
  <div class="event-card__header">
    <div class="event-card__date-container">
      <div class="event-card__date--inner">
        <div class="event-card__date--left">
          <span class="event-card__date--weekday">{{ event_card.full_date.weekday }}</span>
          {% if event_card.full_date.month_long %}
            <span class="event-card__date--month">
              {{ event_card.full_date.month_long }}
            </span>
          {% elseif event_card.full_date.month_short %}
            <span class="event-card__date--month">
              {{ event_card.full_date.month_short }}
            </span>
          {% endif %}
        </div>
        <div class="event-card__date--right">
          <span class="event-card__date--day">{{ event_card.full_date.day }}</span>
        </div>
      </div>
    </div>
    <div class="event-card__main">
      {# Allows for optional eyebrow on some event variations. #}
      {% block event_eyebrow %}
        {% if event_card.eyebrow %}
          {%
            include '@components/eyebrow/eyebrow.twig' with {
              "text": event_card.eyebrow.text,
              "classes": event_card.eyebrow.classes
            }
          %}
        {% endif %}
      {% endblock %}

      {{ title_prefix }}
      {%
        include '@components/heading/heading.twig' with {
          "heading": {
            "title_light": event_card.title.title_light,
            "url": event_card.title.url,
            "heading_level": event_card.title.heading_level,
            "classes": 'event-card__title'
          }
        } only
      %}
      {{ title_suffix }}

      {% block time_location_register %}
        {# Event's meta data (location, time, etc.) #}
        {% if event_card.time or event_card.location or event_card.register %}
          <div class="event-section event__meta">
            {% if event_card.time %}
              <div class="event__meta--item">
                <span class="event__meta--icon">
                  {{ icons.get('clock', 'icon--time') }}
                </span>
                <div class="event__label--wrapper">
                  <span class="event__meta--label">{{ 'Time'|t }}</span>
                  <span>{{ event_card.time }}</span>
                </div>
              </div>
            {% endif %}
            {% if event_card.location %}
              <div href="#" class="event__meta--item">
                <span class="event__meta--icon">
                  {{ icons.get('location-pin', 'icon--location') }}
                </span>
                <div class="event__label--wrapper">
                  <span class="event__meta--label">{{ 'Location'|t }}</span>
                  <span>{{ event_card.location }}</span>
                </div>
              </div>
            {% endif %}
            {% if event_card.register %}
              <a class="event__meta--item" href="{{ event_card.register }}">
                <span class="event__meta--icon">
                  {{ icons.get('plus-one', 'icon--plus-one') }}
                </span>
                <div class="event__label--wrapper">
                  <span class="event__meta--label">{{ 'Register'|t }}</span>
                </div>
              </a>
            {% endif %}
          </div>
        {% endif %}
      {% endblock %}
    </div>
  </div>

  {% if event_card.details or event_card.event_actions %}
    <div class="event-card__content">

      <div class="event__body">

        {# Holds event body content descriving event. #}
        {% block event_details %}
          {% if event_card.details %}
            <div class="event-section event__details">
              {{ event_card.details }}
            </div>
          {% endif %}
        {% endblock %}

        {# Holds event categories such as topic, department and school. #}
        {% block event_categorization %}
        {% endblock %}

        {# Holds action links such as register, add to calendar
        and more event actions. #}
        {% block event_actions %}
          {% if event_card.event_actions %}
            <div class="event-section event__actions">
              {%
                include '@components/event-actions/event-actions.twig' with {
                  "event_actions": event_card.event_actions
                } only
              %}
            </div>
          {% endif %}
        {% endblock %}

      </div>
      <button class="event-card__toggle-btn">
        <span class="toggle--details">
          {{ 'Details'|t }}
        </span>
        <span class="toggle--collapse">
          {{ 'Collapse'|t }}
        </span>
        <span class="toggle--icon">
          {% include '@components/icons/assets/arrow-down-blue.svg.twig' %}
        </span>
      </button>
    </div>
  {% endif %}
</article>

                          

Event Full

The Event Full represents an event card viewed in full view mode. It inherits all attributes and content from event card and it add the event details.

Tuesday October
17
Admissions - Full-time MBA
Time 6 - 8:30 PM
Location PWC, 300 Madison Avenue, New York, NY 10017
Register
Join us for an interactive evening that focuses on women's leadership and the benefits of obtaining an MBA. You'll also be able to interact with other prospective MBA women, MBA alumnae, and admission directors! We hope to see you there.
Schedule

9:15-9:30--Check in (MBA Program Office, Room 210)
9:45-11:15--Class Visit (assigned at arrival)
11:30-12:30-Information Session with Admissions, MBA Program Office and Career Management Center
12:30-1:45-Lunch and Tour with Goizueta current student Ambassadors and staff.

Topic

Business

Department / Organization

Goizueta Business School

School

School of Business

Markup Details
                            {# This template is only intended for the body of the event.  Header info
is handled in the event-card template embedded here. #}
{{ attach_library('goizueta_theme/event-full') }}
{% import '@components/icons/icons.twig' as icons %}

{% embed '@components/event-card/event-card.twig' %}
  {# Event categories such as topic, department, etc. #}
  {% block event_categorization %}
    {% if event_card.custom_fields %}
      <div class="event-section event__categorization">
        {% for item in event_card.custom_fields %}
          <div class="event__categorization--item">
            <div class="categorization--label">
              <span class="event__meta--label">{{ item.label }}</span>
            </div>
            <div class="categorization--info">
              {{ item.value|raw }}
            </div>
          </div>
        {% endfor %}
      </div>
    {% endif %}
  {% endblock %}
{% endembed %}

                          

Eyebrow

This is the Eyebrow component used to label content.

This is the eyebrow component
Markup Details
                            {{ attach_library('goizueta_theme/eyebrow') }}

<div class="eyebrow{{ classes|default('') }}">
  {{ text }}
</div>

                          

Faculty Container

This is the Faculty container component.
This component displays a series of cards,
to a max of 10, in 2 columns

image

Panagoitis (Panos) Adamopoulos

Goizueta Endowed Chair in Electronic Commerce and Professor of Information Systems, Operations Management
image

Panagoitis (Panos) Adamopoulos

Goizueta Endowed Chair in Electronic Commerce and Professor of Information Systems, Operations Management
image

Panagoitis (Panos) Adamopoulos

Goizueta Endowed Chair in Electronic Commerce and Professor of Information Systems, Operations Management
image

Panagoitis (Panos) Adamopoulos

Goizueta Endowed Chair in Electronic Commerce and Professor of Information Systems, Operations Management
image

Panagoitis (Panos) Adamopoulos

Goizueta Endowed Chair in Electronic Commerce and Professor of Information Systems, Operations Management
image

Panagoitis (Panos) Adamopoulos

Goizueta Endowed Chair in Electronic Commerce and Professor of Information Systems, Operations Management
image

Panagoitis (Panos) Adamopoulos

Goizueta Endowed Chair in Electronic Commerce and Professor of Information Systems, Operations Management
image

Panagoitis (Panos) Adamopoulos

Goizueta Endowed Chair in Electronic Commerce and Professor of Information Systems, Operations Management
image

Panagoitis (Panos) Adamopoulos

Goizueta Endowed Chair in Electronic Commerce and Professor of Information Systems, Operations Management
image

Panagoitis (Panos) Adamopoulos

Goizueta Endowed Chair in Electronic Commerce and Professor of Information Systems, Operations Management
Markup Details
                            {{ attach_library('goizueta_theme/faculty-container') }}

{%
  set attributes = attributes ? attributes.addClass('faculty-container')  : ' class="faculty-container"'
%}

<section {{ attributes|raw }}>
  <div class="faculty-container__cards">
    {% for card in faculty_cards %}
      <div class="faculty-container__card">
        {% include '@components/faculty/faculty-card.twig' with {
          "faculty_card" : card.faculty_card
        } only %}
      </div>
    {% endfor %}
  </div>
</section>

                          

Faculty Header Card

This is the Faculty Header Card (faculty-card) component which is normally used in the faculty detail page and also in the Faculty Container component.

Markup Details
                            {{ attach_library('goizueta_theme/faculty-card') }}
{% import '@components/icons/icons.twig' as icons %}

{%
  set attributes = attributes ? attributes.addClass('faculty-card' ~ faculty_card.classes|default('')) : ' class="faculty-card' ~ faculty_card.classes|default('') ~ '"'
%}

<article {{ attributes|raw }}>
  <div class="faculty-card__inner">
    <div class="faculty-card__image">
      {{ faculty_card.image }}
    </div>
    <div class="faculty-card__content">
      {% if faculty_card.eyebrow %}
        <div class="faculty-card__content--eyebrow">
          {{ faculty_card.eyebrow }}
        </div>
      {% endif %}

      {% if faculty_card.heading %}
        {%
          include '@components/heading/heading.twig' with {
            "heading": faculty_card.heading
          } only
        %}
      {% endif %}

      <div class="faculty-card__content--body">
        {{ faculty_card.body }}
      </div>
      <div class="faculty-card__learn-more">
        {% block ctas %}
          {% for item in faculty_card.ctas %}
            {%
              include '@components/button/button.twig' with {
                "button": item.button
              }
            %}
          {% endfor %}
        {% endblock %}
      </div>
    </div>
  </div>
</article>

                          

Faculty in the News

This is the Faculty in the News listing.

Markup Details
                            {{ attach_library('goizueta_theme/faculty-in-news') }}

<div class="faculty-in-the-news">
  {% if heading %}
    {%
      include '@components/heading/heading.twig' with {
        "heading": heading
      } only
    %}
  {% endif %}

  {% block news_articles %}
    <ul class="faculty-in-the-news__list">
      {% for item in items %}
        <li class="faculty-in-the-news__item">
          <div class="faculty-in-the-news__title">
            {%
              include '@components/heading/heading.twig' with {
                "heading": item.title,
              }
            %}
          </div>
          <div class="faculty-in-the-news__date">
            {{ item.date }}
          </div>
        </li>
      {% endfor %}
    </ul>
  {% endblock %}
</div>

                          

Faculty Media Appearance Item

This is the Faculty Media Appearance Item component.

February 6, 2019
Condimentum Magna Egestas
Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Markup Details
                            {{ attach_library('goizueta_theme/faculty-media-item') }}

{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('faculty-media-item') : ' class="faculty-media-item"'
%}

{# If we don't use |raw twig.js tries to escape the quotes on the class attribute. #}
<article{{ attributes|raw }}>

  {% if title %}
    {%
      include '@components/heading/heading.twig' with {
        "heading": title
      }
    %}
  {% endif %}

  {% if date %}
    <div class="faculty-media__date">
      {{ date }}
    </div>
  {% endif %}

  {% if subtitle %}
    <div class="faculty-media__subtitle">
      {{ subtitle }}
    </div>
  {% endif %}

  {% if body %}
    <div class="faculty-media__body">
      {{ body }}
    </div>
  {% endif %}
</article>

                          

Faculty Media Appearances

This is the Faculty Media Appearances component.

  • February 6, 2019
    Condimentum Magna Egestas
    Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
  • February 6, 2019
    Condimentum Magna Egestas
    Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
  • February 6, 2019
    Condimentum Magna Egestas
    Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Markup Details
                            {{ attach_library('goizueta_theme/faculty-media-appearances') }}

{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('faculty-media-appearances') : ' class="faculty-media-appearances"'
%}

<section{{ attributes|raw}}>
  {% if heading %}
    {%
      include '@components/heading/heading.twig' with {
        "heading": heading
      } only
    %}
  {% endif %}
  <ul class="faculty-appearances__list">
    {% for item in items %}
      <li class="faculty-appearances__item">
        {%
          include '@components/faculty-profile/faculty-media-item/faculty-media-item.twig' with {
            "title": item.title,
            "date": item.date,
            "subtitle": item.subtitle,
            "body": item.body
          } only
        %}
      </li>
    {% endfor %}
  </ul>
</section>

                          

Faculty Quote

This is the Faculty Quote component that lives in the student faculty profile.

Quote for Student Page. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis est eget nisi faucibus lacinia a eu velit.
Markup Details
                            {{ attach_library('goizueta_theme/faculty-quote') }}
{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('faculty-quote') : ' class="faculty-quote"'
%}

<section {{ attributes|raw }}>
  <q class="faculty-quote__quote">{{ faculty_quote.quote }}</q>
</section>

                          

Faculty Sidebar Details

This is the Faculty Sidebar Details component that lives in the student faculty profile.

  • Lorem ipsum dolor
  • Sit amet
  • Consectetur
  • Adipiscing elit etiam hendrerit
  • Sapien dapibus
  • Atlanta, GA
    United States
  • Lorem ipsum dolor
  • Sit amet
  • Sit amet
  • Consectetur
  • Adipiscing elit etiam hendrerit
  • Sapien dapibus
Markup Details
                            {{ attach_library('goizueta_theme/faculty-sidebar-details') }}
{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('faculty-sidebar-details') : ' class="faculty-sidebar-details"'
%}

<section {{ attributes|raw }}>
  {% for item in sidebar_items %}
    <div class="faculty-sidebar__block">
      {%
        include '@components/heading/heading.twig' with {
          "heading": item.heading
        }
      %}
      <ul class="faculty-sidebar-details__list">
        {% for content in item.items %}
        <li class="faculty-sidebar-details__item">
          {{ content.content }}
        </li>
        {% endfor %}
      </ul>
    </div>
  {% endfor %}
</section>

                          

Faculty Social

This is the Faculty Social component that lives in the student faculty profile.

Markup Details
                            {{ attach_library('goizueta_theme/faculty-social') }}
{% import '@components/icons/icons.twig' as icons %}
{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('faculty-social') : ' class="faculty-social"'
%}

<section {{ attributes|raw }}>
  {% if heading %}
    {%
      include '@components/heading/heading.twig' with {
        "heading": heading
      } only
    %}
  {% endif %}
  {% if faculty_social.twitter or faculty_social.linkedin or faculty_social.personal_links %}
    <ul class="faculty-social__list">
      {% if faculty_social.twitter %}
        <li class="faculty-social__item faculty-social__twitter">
          <a href="{{ faculty_social.twitter }}" class="faculty-social__link">
            <span class="faculty-social__link-icon">{{ icons.get('twitter-blue-bg') }}</span>
            <span class="faculty-social__link-text">{{ 'Twitter'|t }}</span>
          </a>
        </li>
      {% endif %}
      {% if faculty_social.linkedin %}
        <li class="faculty-social__item faculty-social__linkedin">
          <a href="{{ faculty_social.linkedin }}" class="faculty-social__link">
            <span class="faculty-social__link-icon">{{ icons.get('linkedin-blue-bg') }}</span>
            <span class="faculty-social__link-text">{{ 'LinkedIn'|t }}</span>
          </a>
        </li>
      {% endif %}
      {% if faculty_social.personal_links %}
        {% for link in faculty_social.personal_links %}
          <li class="faculty-social__item faculty-social__personal-link">
            <a href="{{ link.uri }}" class="faculty-social__link">{{ link.title }}</a>
          </li>
        {% endfor %}
      {% endif %}
    </ul>
  {% endif %}

</section>

                          

Give Grid Card

This is the Give Grid Card component used in the Give Grid Container.

Daniel DeSevo, 97C Memorial Scholarship Endowment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non lorem nisi. Nullam nunc sem, posuere eu tempor sed, imperdiet a est. Cras ut nisi nec orci.
Markup Details
                            {# Single, width constrained, Give Grid Card #}
<div class="kss--give-grid-card" style="max-width: 360px;">
  {%
    include '@components/give-grid/give-grid-card.twig' with {
      "give_grid_card": give_grid_card
    } only
  %}
</div>

                          

Give Grid Container

This is the Give Grid Container component that displays Give Grid Items.

Optional Eyebrow Goes Here
Markup Details
                            {{ attach_library('goizueta_theme/give-grid-container') }}
{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('give-grid-container accessible-tabs') : ' class="give-grid-container accessible-tabs"'
%}
<section {{ attributes|raw }} aria-multiselectable="false">
  <header class="give-grid-container__header">
    {% if give_grid_container.eyebrow %}
      <div class="give-grid-container__eyebrow">
        {% include '@components/eyebrow/eyebrow.twig' with {
          "text": give_grid_container.eyebrow,
        } only %}
      </div>
    {% endif %}
    <div class="give-grid-container__heading">
      {% include '@components/heading/heading.twig' with {
        "heading" : give_grid_container.heading
      } only %}
    </div>
  </header>


  {% if give_grid_container.tabs %}
    <nav class="give-grid-container__tabs accessible-tabs__navigation">
      <ul class="give-grid-container__tab-list" role="tablist">
        {% for tab in give_grid_container.tabs %}
          <li class="give-grid-container__tab-item" role="presentation">
            <button
              class="give-grid-container__tab-label accessible-tabs__label"
              id="tab-label--{{ give_grid_container.instance }}--{{ loop.index }}"
              aria-controls="tab-panel--{{ give_grid_container.instance }}--{{ loop.index }}"
              aria-posinset="{{ loop.index }}"
              aria-setsize="{{ loop.length }}"
              aria-selected="{{ loop.index == 1 ? 'true' : 'false' }}"
              role="tab"
              tabindex="0"
            >
              {{ tab.tab_label }}
            </button>
          </li>
        {% endfor %}
      </ul>
    </nav>

    <div class="give-grid-container__panels">
      {% for content in give_grid_container.tabs %}
        <div
          class="give-grid-container__panel accessible-tabs__panel"
          id="tab-panel--{{ give_grid_container.instance }}--{{ loop.index }}"
          aria-hidden="{{ loop.index == 1 ? 'false' : 'true' }}"
          aria-labelledby="tab-label--{{ give_grid_container.instance }}--{{ loop.index }}"
          data-title="{{ content.tab_label }}"
          role="tabpanel"
          tabindex="-1"
        >
          <div class="give-grid-container__panel-container accessible-tabs__panel-container">
            {% if content.give_grid_cards %}

              <div class="give-grid-container__carousel {{ content.give_grid_cards_count > 4 ? 'hide-dots--mobile'}}" data-carousel-instance="{{ loop.index }}">
                {% block grid_cards %}
                {% for card in content.give_grid_cards %}
                  <div class="give-grid-container__carousel-item">
                    {% include '@components/give-grid/give-grid-card.twig' with {
                      "give_grid_card": card.give_grid_card
                    } only %}
                  </div>
                {% endfor %}
                {% endblock %}
              </div>

              {# This is used as a container for slider's arrows and dots. #}
              <div class="give-grid-container__pager slick-pager slick-pager--{{ loop.index }}"></div>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  {% endif %}
</section>

                          

Glossary

This implements an A-Z index to attach to a view.

  • A (2)
  • B (12)
  • C (8)
  • D (2)
  • E (4)
Markup Details
                            {%
  set attributes = attributes ? attributes.addClass('glossary')  : ' class="glossary"'
%}

<section {{ attributes|raw }}>
  <ul>
  {% for item in glossary_items %}
    <li class="facet-item glossaryaz">
      <a href="{{ item.url }}">{{ item.text }}</a> ({{ item.count }})
    </li>
  {% endfor %}
  </ul>
</section>

                          

Heading

This is the heading component which is used as sections, components and pages titles. Passing default_class to component can cancel the inclusion of the .heading class.

.heading--medium
Heading with special styles such as blue background and gold border.
.heading--large
Heading with special styles such as blue background and gold border.
.heading--xlarge
Heading with special styles such as blue background and gold border.
.heading--right
Heading with right aligned text.
Markup Details
                            {{ attach_library('goizueta_theme/heading') }}

{# The heading component accommodates for the following scenarios:
- Title is a single string with no changing font weight.
- Title is split into two parts, light font weight and heavy font weight.
- Title could be plain text or a link.#}
<div class="heading--wrapper">
  <h{{ heading.heading_level|default('2') }} class="{{ heading.default_class is defined ? heading.default_class : 'heading' }} {{ modifier_class }}{{ heading.classes ? '' ~ heading.classes }}
    {{- heading.attributes ? heading.attributes.class -}}"
    {{- heading.attributes ? heading.attributes|without(class) -}}>
    {% if heading.url %}
      <a href="{{ heading.url }}">
        {% if heading.title_light %}
          <span class="heading__light">{{ heading.title_light }}</span>
        {% endif %}
        {% if heading.title_heavy %}
          <span class="heading__heavy">{{ heading.title_heavy }}</span>
        {% endif %}
      </a>
    {% else %}
      {% if heading.title_light %}
        <span class="heading__light">{{ heading.title_light }}</span>
      {% endif %}
      {% if heading.title_heavy %}
        <span class="heading__heavy">{{ heading.title_heavy }}</span>
      {% endif %}
    {% endif %}
  </h{{ heading.heading_level|default('2') }}>
</div>

                          

Hero

This is the hero component which is used in several high profile pages incuding homepage. Default overlay for default hero including a gold piece on left corner. The hero can also be rendered tall. This is achieved by passing the value hero--tall in the modifier_class var. Alternatively, the hero can be rendered as 2-columns with modifier_class hero--2col.

Markup Details
                            {{ attach_library('goizueta_theme/hero') }}

{% set component_class = ['hero', modifier_class|default('')] %}
{%
  set attributes = attributes ? attributes.addClass(component_class) : ' class="' ~ component_class|join(' ') ~ '"'
%}
{% set is_2col = (modifier_class == 'hero--2col') %}
<section{{ attributes|raw }}>
  {% if image %}
    <div class="hero__media">
      <div class="hero__media--inner" style="background-image: url({{ image }})">
        {% if modifier_class == 'hero--tall' %}
          <div class="hero__overlay--left">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 705 197"><path fill="#fff" d="M0 160h705v37H0z"/><path fill="#aa8d53" d="M0 126h705v34H0z"/><path fill="#d7ab4b" d="M0 0v126h705V0z"/></svg>
          </div>
          <div class="hero__overlay--tall-right"></div>
        {% elseif modifier_class == 'hero--2col' %}
          <div class="hero__overlay--full"></div>
        {% else %}
          <div class="hero__overlay--left">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 705 197"><path fill="#fff" d="M0 160h705v37H0z"/><path fill="#aa8d53" d="M0 126h705v34H0z"/><path fill="#d7ab4b" d="M0 0v126h705V0z"/></svg>
          </div>
          <div class="hero__overlay--center">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1262.8 625.2"><style>.centerOne{opacity:0.85;fill:#222c50}</style><path class="centerOne" d="M0 526.6h1262.2v98H0zM.5.6h1262.2v81H.5z"/><path opacity="1" fill="#222c50" d="M.5 81L.3 294v36L.1 526l1262.2 1.2.2-196v-36l.2-213z"/></svg>
          </div>
          <div class="hero__overlay--right">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760.9 738"><style>.rightOne,.rightTwo{opacity:0.65;fill:#222c50}.rightTwo{opacity:0.85}</style><path class="rightOne" d="M128 322L0 738h130l175.9-416zM760 322v416s2-418 0-416z"/><path class="rightTwo" d="M560 0H442L305.9 322h118z"/><path class="rightOne" d="M305.9 322L130 738h118l175.9-416z"/><path class="rightTwo" d="M305.9 322L130 738h118l175.9-416z"/><path fill="#222c50" d="M642 0h-82L423.9 322 248 738h512V0z"/></svg>
          </div>
        {% endif %}
        </div>
    </div>
  {% endif %}
  {% if is_2col %}
  <div class="hero__content">
    <div class="hero__column1">
      {% if eyebrow %}
        {%
          include '@components/eyebrow/eyebrow.twig' with {
            "text": eyebrow,
            "classes": ' hero__eyebrow',
          } only
        %}
      {% endif %}

      {% if heading %}
        {% include '@components/heading/heading.twig' %}
      {% endif %}

      {% if cta_1 or cta_2 %}
        <div class="hero__ctas">
          {% if cta_1 %}
            {%
              include '@components/button/button.twig' with {
                "button": {
                  "text": cta_1.text,
                  "url": cta_1.url,
                  "icon": cta_1.icon,
                  "type": "",
                  "classes": cta_1.classes,
                }
              } only
            %}
          {% endif %}
          {% if cta_2 %}
            {%
              include '@components/button/button.twig' with {
                "button": {
                  "text": cta_2.text,
                  "url": cta_2.url,
                  "icon": cta_2.icon,
                  "type": "",
                  "classes": cta_2.classes,
                }
              } only
            %}
          {% endif %}
        </div>
      {% endif %}
      {% if intro_text %}
        <div class="hero__intro">
          {{ intro_text }}
        </div>
      {% endif %}
    </div>
    <div class="hero__column2">
      {% if form_url %}
        {% include '@components/slate-form-embed/slate-form-embed.twig' %}
      {% endif %}
    </div>
  </div>
  {% else %}
    {% if eyebrow or heading %}
      <div class="hero__content">
        {% if eyebrow %}
          {%
            include '@components/eyebrow/eyebrow.twig' with {
              "text": eyebrow,
              "classes": ' hero__eyebrow',
            } only
          %}
        {% endif %}

        {% if heading %}
          {% include '@components/heading/heading.twig' %}
        {% endif %}

        {% if cta_1 or cta_2 %}
          <div class="hero__ctas">
            {% if cta_1 %}
              {%
                include '@components/button/button.twig' with {
                  "button": {
                    "text": cta_1.text,
                    "url": cta_1.url,
                    "icon": cta_1.icon,
                    "type": "",
                    "classes": cta_1.classes,
                  }
                } only
              %}
            {% endif %}
            {% if cta_2 %}
              {%
                include '@components/button/button.twig' with {
                  "button": {
                    "text": cta_2.text,
                    "url": cta_2.url,
                    "icon": cta_2.icon,
                    "type": "",
                    "classes": cta_2.classes,
                  }
                } only
              %}
            {% endif %}
          </div>
        {% endif %}
        {% if intro_text %}
          <div class="hero__intro">
            {{ intro_text }}
          </div>
        {% endif %}
        {% if form_url %}
          {% include '@components/slate-form-embed/slate-form-embed.twig' %}
        {% endif %}
      </div>
    {% endif %}
  {% endif %}
</section>

                          

Hero 2-Column

This is the hero component with 2-column variation for Advertising pages.

Executive MBA

Turn Problems Into Possibilities

Submit your information to get immediate access to our downloadable viewbook. You will receive program information.
Loading...
Markup Details
                            {{ attach_library('goizueta_theme/hero') }}

{%
  include '@components/hero/hero.twig' with hero
%}
                          

Hero Tall

This is the hero component with Tall variation for Advertising pages.

Executive MBA

Turn Problems Into Possibilities

Submit your information to get immediate access to our downloadable viewbook. You will receive program information.
Loading...
Markup Details
                            {{ attach_library('goizueta_theme/hero') }}

{%
  include '@components/hero/hero.twig' with hero
%}
                          

Homepage Hero

This is the homepage hero

  • Meet the robots. West Coast Immersion.

    This is the subtitle.
    This is the cta text
  • Go make a difference. Go beyond.

    This is a longer subtitle that has more words and contains more information.
    This is the cta text
  • Do something great today.

    This is a longer subtitle that has more words and contains more information. This is a longer subtitle that has more words and contains more information.
    This is the cta text
  • Don't give up. Never give up.

    This is a longer subtitle that has more words and contains more information.
    This is the cta text
Markup Details
                            {{ attach_library('goizueta_theme/homepage-hero') }}

<section class="homepage-hero__container">
  <ul class="homepage-hero__slider">
    {% for slide in homepage_hero.slides %}
      {% set slide_attributes = slide.attributes ? slide.attributes.addClass('homepage-hero__slide') : ' class="homepage-hero__slide"' %}
      <li{{ slide_attributes|raw }}>
        <div class="homepage-hero__ratio-control-rel">
          <div class="homepage-hero__ratio-control-abs">
            <div class="homepage-hero__main-image">
              {{ slide.main_image|raw }}
            </div>
            <div class="homepage-hero__slide-content">
              <div class="homepage-hero__slide-title-container">
                <h2 class="homepage-hero__slide-title" data-animation="fadeInUp" {% if loop.index == 1 %}data-delay="0s"{% else %}data-delay="1.75s"{% endif %}> {{ slide.title }}</h2>
              </div>
              <div class="homepage-hero__slide-line" data-animation="bounceInLeft" {% if loop.index == 1 %}data-delay="0s"{% else %}data-delay="1s"{% endif %}></div>
              <div class="homepage-hero__inner-container">
                <div class="homepage-hero__inner-content" data-animation="fadeInDown" {% if loop.index == 1 %}data-delay="0s"{% else %}data-delay="1.75s"{% endif %}>
                  <div class="homepage-hero__inner-subtitle">
                    {{ slide.subtitle }}
                  </div>
                    {%
                        include '@components/button/button.twig' with {
                          "button": {
                            "text": slide.cta.text,
                            "url": slide.cta.url,
                            "classes": 'button--ghost homepage-hero__button'
                          }
                        } only
                      %}
                </div>
              </div>
            </div>
            {# Decorative elements. #}
            <div class="homepage-hero__circle">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.2 64.2"><path d="M51.6 8.9c.4-.6.6-1.3.6-2.1 0-2.3-1.9-4.2-4.2-4.2-1.4 0-2.7.7-3.5 1.8-3.8-1.7-8-2.7-12.4-2.7-16.7.1-30.3 13.7-30.3 30.4s13.6 30.3 30.3 30.3c16.7 0 30.3-13.6 30.3-30.3 0-9.3-4.2-17.7-10.8-23.2zM32.1 61.4c-16.2 0-29.3-13.1-29.3-29.3 0-16.2 13.1-29.3 29.3-29.3 4.2 0 8.3.9 11.9 2.5-.2.5-.3 1-.3 1.5 0 2.3 1.9 4.2 4.2 4.2 1.2 0 2.3-.5 3-1.3 6.4 5.4 10.4 13.4 10.4 22.4.1 16.1-13.1 29.3-29.2 29.3z" fill="#e3a44d"/><circle cx="32.1" cy="32.1" r="23.9" opacity=".5" fill="#fff"/></svg>
            </div>
            <div class="homepage-hero__left-line">
              <svg data-animation="fadeInLeft" data-delay="1s" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.9 156.8"><path fill="#e3a44d" d="M21.89 135.342L135.31 21.924l21.849 21.849L43.74 157.192z"/><path fill="#1c274c" d="M.054 113.391L113.472-.027l21.85 21.849L21.903 135.241z"/></svg>
            </div>
            <div class="homepage-hero__right-line">
              <svg data-animation="fadeInRight" data-delay="0.8s" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.9 156.8"><path fill="#e3a44d" d="M21.89 135.342L135.31 21.924l21.849 21.849L43.74 157.192z"/><path fill="#1c274c" d="M.054 113.391L113.472-.027l21.85 21.849L21.903 135.241z"/></svg>
            </div>
            <div class="homepage-hero__white-dots">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.9 73.5"><style>.st0{fill:#fff}</style><g id="Layer_2"><circle class="st0" cx="9.8" cy="9.3" r="1.9"/><circle class="st0" cx="6.7" cy="36.1" r="1.9"/><circle class="st0" cx="3" cy="3.2" r=".5"/><circle class="st0" cx="1.5" cy="15.3" r=".5"/><circle class="st0" cx="4.1" cy="18.8" r=".5"/><circle class="st0" cx="7.6" cy="15.7" r=".5"/><circle class="st0" cx="10.6" cy="19.5" r=".5"/><circle class="st0" cx="8.4" cy="23.5" r=".5"/><circle class="st0" cx="13.1" cy="24.1" r=".5"/><circle class="st0" cx="9.9" cy="27.6" r=".5"/><circle class="st0" cx="4.2" cy="24" r=".5"/><circle class="st0" cx="6.1" cy="28.3" r=".5"/><circle class="st0" cx="9.1" cy="32" r=".5"/><circle class="st0" cx="10.6" cy="37.5" r=".5"/><circle class="st0" cx="13.6" cy="30.2" r=".5"/><circle class="st0" cx="12.2" cy="33.7" r=".5"/><circle class="st0" cx="14.1" cy="38.2" r=".5"/><circle class="st0" cx="11.7" cy="40.5" r=".5"/><circle class="st0" cx="14.2" cy="43.1" r=".5"/><circle class="st0" cx="11.2" cy="45.5" r=".5"/><circle class="st0" cx="23" cy="34.2" r="1.9"/><circle class="st0" cx="19.9" cy="61" r="1.9"/><circle class="st0" cx="16.2" cy="28.1" r=".5"/><circle class="st0" cx="14.7" cy="40.2" r=".5"/><circle class="st0" cx="17.3" cy="43.7" r=".5"/><circle class="st0" cx="20.7" cy="40.5" r=".5"/><circle class="st0" cx="23.7" cy="44.3" r=".5"/><circle class="st0" cx="21.6" cy="48.4" r=".5"/><circle class="st0" cx="26.3" cy="49" r=".5"/><circle class="st0" cx="23.1" cy="52.5" r=".5"/><circle class="st0" cx="17.4" cy="48.9" r=".5"/><circle class="st0" cx="19.2" cy="53.2" r=".5"/><circle class="st0" cx="22.2" cy="56.9" r=".5"/><circle class="st0" cx="23.7" cy="62.3" r=".5"/><circle class="st0" cx="26.7" cy="55" r=".5"/><circle class="st0" cx="25.4" cy="58.5" r=".5"/><circle class="st0" cx="27.2" cy="63" r=".5"/><circle class="st0" cx="24.9" cy="65.4" r=".5"/><circle class="st0" cx="27.4" cy="68" r=".5"/><circle class="st0" cx="24.4" cy="70.4" r=".5"/></g></svg>
            </div>
            <div class="homepage-hero__white-dots-upper">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89.8 55"><style>.st0{fill:#fff}</style><g id="Layer_2"><circle class="st0" cx="65.9" cy="14.4" r="1.9"/><circle class="st0" cx="39.1" cy="11.2" r="1.9"/><circle class="st0" cx="72.1" cy="7.5" r=".5"/><circle class="st0" cx="60" cy="6.1" r=".5"/><circle class="st0" cx="56.5" cy="8.6" r=".5"/><circle class="st0" cx="59.6" cy="12.1" r=".5"/><circle class="st0" cx="55.8" cy="15.1" r=".5"/><circle class="st0" cx="48.1" cy="29.8" r=".5"/><circle class="st0" cx="51.8" cy="12.9" r=".5"/><circle class="st0" cx="51.1" cy="17.6" r=".5"/><circle class="st0" cx="54.6" cy="28.1" r=".5"/><circle class="st0" cx="54.9" cy="22.8" r=".5"/><circle class="st0" cx="47.6" cy="14.4" r=".5"/><circle class="st0" cx="51.3" cy="8.8" r=".5"/><circle class="st0" cx="47" cy="10.6" r=".5"/><circle class="st0" cx="43.3" cy="13.6" r=".5"/><circle class="st0" cx="37.8" cy="15.1" r=".5"/><circle class="st0" cx="45.1" cy="18.1" r=".5"/><circle class="st0" cx="41.6" cy="16.8" r=".5"/><circle class="st0" cx="37.1" cy="18.6" r=".5"/><circle class="st0" cx="34.8" cy="16.2" r=".5"/><circle class="st0" cx="32.1" cy="18.7" r=".5"/><circle class="st0" cx="29.8" cy="15.8" r=".5"/><circle class="st0" cx="41" cy="27.5" r="1.9"/><circle class="st0" cx="61.5" cy="24.7" r="1.9"/><circle class="st0" cx="58.8" cy="31.2" r="1.9"/><circle class="st0" cx="76.4" cy="44.5" r="1.9"/><circle class="st0" cx="14.2" cy="24.4" r="1.9"/><circle class="st0" cx="47.2" cy="20.7" r=".5"/><circle class="st0" cx="42.2" cy="20.8" r=".5"/><circle class="st0" cx="59.8" cy="19.6" r=".5"/><circle class="st0" cx="35.1" cy="19.2" r=".5"/><circle class="st0" cx="31.6" cy="21.8" r=".5"/><circle class="st0" cx="34.7" cy="25.2" r=".5"/><circle class="st0" cx="30.9" cy="28.2" r=".5"/><circle class="st0" cx="26.9" cy="26.1" r=".5"/><circle class="st0" cx="26.2" cy="30.8" r=".5"/><circle class="st0" cx="22.8" cy="27.6" r=".5"/><circle class="st0" cx="26.4" cy="21.9" r=".5"/><circle class="st0" cx="22.1" cy="23.8" r=".5"/><circle class="st0" cx="71.9" cy="33.9" r=".5"/><circle class="st0" cx="67.9" cy="31.8" r=".5"/><circle class="st0" cx="67.3" cy="36.5" r=".5"/><circle class="st0" cx="81.6" cy="47.4" r=".5"/><circle class="st0" cx="63.8" cy="33.3" r=".5"/><circle class="st0" cx="78.1" cy="35.5" r=".5"/><circle class="st0" cx="75.2" cy="36.8" r=".5"/><circle class="st0" cx="76.7" cy="39.9" r=".5"/><circle class="st0" cx="80.5" cy="39.1" r=".5"/><circle class="st0" cx="71" cy="37.1" r=".5"/><circle class="st0" cx="81" cy="43.4" r=".5"/><circle class="st0" cx="74.4" cy="30.4" r=".5"/><circle class="st0" cx="70.9" cy="27.2" r=".5"/><circle class="st0" cx="67.4" cy="27.6" r=".5"/><circle class="st0" cx="63.1" cy="29.4" r=".5"/><circle class="st0" cx="18.4" cy="26.8" r=".5"/><circle class="st0" cx="12.9" cy="28.2" r=".5"/><circle class="st0" cx="20.2" cy="31.2" r=".5"/><circle class="st0" cx="16.7" cy="29.9" r=".5"/><circle class="st0" cx="12.2" cy="31.8" r=".5"/><circle class="st0" cx="9.9" cy="29.4" r=".5"/><circle class="st0" cx="7.2" cy="31.9" r=".5"/><circle class="st0" cx="4.9" cy="28.9" r=".5"/><circle class="st0" cx="70.6" cy="21.9" r=".5"/><circle class="st0" cx="68" cy="24.4" r=".5"/><circle class="st0" cx="65.6" cy="21.4" r=".5"/></g></svg>
            </div>
          </div>
        </div>
      </li>
    {% endfor %}
  </ul>
  <div class="homepage-hero__slider-pager">
    <span class="left">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
        <path d="M3.828 9l6.071-6.071-1.414-1.414-8.485 8.485 8.485 8.485 1.414-1.414-6.071-6.071h16.172v-2h-16.172z"></path>
      </svg>
    </span>
    <span class="play-pause">
      <svg class="play-pause__pause" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
        <path d="M5 4h3v12h-3v-12zM12 4h3v12h-3v-12z"></path>
      </svg>
      <svg class="play-pause__play" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
        <path d="M4 4l12 6-12 6z"></path>
       </svg>
     </span>
    <span class="right">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
        <path d="M16.172 9l-6.071-6.071 1.414-1.414 8.485 8.485-8.485 8.485-1.414-1.414 6.071-6.071h-16.172v-2z"></path>
      </svg>
    </span>
  </div>
</section>

                          

Image Grid Card

This is image grid card. It has a click functionality. The click reveals a quote.

Markup Details
                            {{ attach_library('goizueta_theme/image-grid-card') }}
{% import '@components/icons/icons.twig' as icons %}

<button class="image-grid-card__container"  aria-expanded="false">
  <div class="image-grid-card__image">
    {{ img }}
    <span class="image-grid-card__icon">
      {{ icons.get('quotes', '') }}
    </span>
  </div>
  <div class="image-grid-card__details" aria-hidden="true" >
    <div class="image-grid-card__text">
      {{ text }}
    </div>
    <div class="image-grid-card__attrib">
      {{ attrib }}
    </div>
    <a href="{{link.url}}" tabindex="0" title="learn more about quote" role="link" class="image-grid-card__link">{{ link.text }}</a>
  </div>
</button>
                          

Image Grid Container

This is image grid card. It has a click functionality. The click reveals a quote.

Markup Details
                            {{ attach_library('goizueta_theme/image-grid-container') }}

{% set attributes = attributes ? attributes.addClass('image-grid') : ' class="image-grid"' %}

<section{{ attributes|raw }}>
  {% if heading %}
    <div class="image-grid__heading--wrapper">
      {% include '@components/heading/heading.twig' with {
        "heading" : heading
      } only %}
    </div>
  {% endif %}

  <ul class="image-grid__container">
    {% for item in images %}
      <li class="image-grid__item grid-item{{loop.index}}">{% include '@components/image-grid-card/image-grid-card.twig' with item %}</li>
    {% endfor %}
  </ul>
  <div class="image-grid__pager slick-pager"></div>
</section>

                          

Inline Exposed Filters

The Inline Exposed Filters display exposed filters inline.

Markup Details
                            <section class="sticky-container">
  <div class="sticky-container__inner">
    {% include '@components/inline-exposed-filters/inline-exposed-filters.twig' with {
      "modifier_class" : modifier_class,
      "form": form
    } only %}
  </div>
</section>

                          

Latest News

This is the Latest News component which is used to display a collection of Latest News.

Markup Details
                            {{ attach_library('goizueta_theme/latest-news') }}
{% import '@components/icons/icons.twig' as icons %}

{# Preserve the Drupal attributes if they're available. #}
{% set component_classes = 'latest-news' %}
{% set attributes = attributes ? attributes.addClass(component_classes) : ' class="' ~ component_classes ~ '"' %}

{# Get count of news items. #}
{% set item_count = items|length %}

<section {{ attributes|raw }}>
  <div class="latest-news__inner">
    {% block heading %}
      {% include '@components/heading/heading.twig' with {
        "heading" : heading
        } only
      %}
    {% endblock %}
    <div class="latest-news__list{% if item_count > 4 %} hide-dots--mobile{% endif %}">
      {% for item in items %}
        {%
          include '@components/news-item/news-item.twig' with {
            "heading": item.title,
            "date": item.date,
            "image": item.image
          } only
        %}
      {% endfor %}
    </div>

    {# This is used as a container for slider's arrows and dots. #}
    <div class="latest-news__pager slick-pager"></div>

    {% if cta %}
      <div class="latest-news__cta">
        {%
          include '@components/button/button.twig' with {
            "button": {
              "text": cta.text,
              "url": cta.url,
              "icon": cta.icon,
              "classes": cta.classes
            }
          } only
        %}
      </div>
    {% endif %}
  </div>
</section>

                          

Logo Grid

This is the Logo Grid component, which combines a collection of logos.

Markup Details
                            {{ attach_library('goizueta_theme/logo-grid') }}
{% set attributes = attributes ? attributes.addClass('logo-grid') : ' class="logo-grid"' %}
<section{{ attributes|raw }}>
  {% if heading %}
    {% include '@components/heading/heading.twig' with {
      "heading": heading
      } only
    %}
  {% endif %}
  <div class="logo-grid--wrapper">
    <ul class="logo-grid__list">
      {% for item in items %}
        <li class="logo-grid__item">
          {% if item.url is not empty %}
            <a href="{{ item.url }}">
          {% endif %}
          {{ item.logo_img }}
            <span class="visually-hidden">{{ item.company }}</span>
          {% if item.url is not empty %}
            </a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</section>

                          

Map

This is the Map component which is used in the site footer.

Markup Details
                            {{ attach_library('goizueta_theme/map') }}

<div class="goiz-map">
  <div class="goiz-map--wrapper">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63067.20207094397!2d-84.38148945300547!3d33.82362721270501!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f506fabb7180cd%3A0xdbdc052175657ad7!2sEmory%20University&#39;s%20Goizueta%20Business%20School!5e0!3m2!1sen!2sus!4v1591648935882!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
  </div>
</div>

                          

Mega Menu

The mega menu. This uses a js file located in the root libraries folder. The menu is accessible for keyboard users. The mega menu has two renderings. Main menu and in page. They each have a class requirement.
Main menu .mega-menu__main
In page menu .mega-menu__in-page
Because of the requirement for the desktop to hover, it is best practice to test the collapsed menu on a device.
The inpage example is sticky, here we are demonstrating that with a large empty div to scroll through.

Markup Details
                            <nav id="nav" class="mega-menu__container mega-nav mega-menu__main">
  {%
    include "@components/mega-menu/mega-menu.twig" with {
      items
    }
  %}
</nav>

<div style="height:1000px; margin-top: 300px;">
  <section class="sticky-container">
    <div class="sticky-container__inner">
      <nav id="nav" class="mega-menu__container mega-nav mega-menu__in-page">
        {%
          include "@components/mega-menu/mega-menu.twig" with {
            items
          }
        %}
      </nav>
    </div>
  </section>
</div>

                          

Menu

The Menu is a starting component from which other menus can be built.

class=goiz-menu
Markup Details
                            {#
/**
 * @file
 * Theme override to display a menu.
 *
 * Available variables:
 * - menu_name: The machine name of the menu.
 * - items: A nested list of menu items. Each menu item contains:
 *   - attributes: HTML attributes for the menu item.
 *   - below: The menu item child items.
 *   - title: The menu link title.
 *   - url: The menu link url, instance of \Drupal\Core\Url
 *   - localized_options: Menu link localized options.
 *   - is_expanded: TRUE if the link has visible children within the current
 *     menu tree.
 *   - is_collapsed: TRUE if the link has children within the current menu tree
 *     that are not currently visible.
 *   - in_active_trail: TRUE if the link is in the active trail.
 */
#}
{% import _self as menus %}
{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('goiz-menu') : ' class=goiz-menu'
%}
{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ attach_library('goizueta_theme/menu') }}

{{ menus.menu_links(items, attributes) }}

{% block menu %}
  {% macro menu_links(items, attributes) %}
    {% if items %}
      <ul{{ attributes }} role="menu">
      {% for item in items %}
        <li class="goiz-menu__item">
          <a class="goiz-menu__item--link" href="{{ item.url }}">
            {{ item.title }}
          </a>
        </li>
      {% endfor %}
      </ul>
    {% endif %}
  {% endmacro %}
{% endblock %}

                          

Multi-Filtered List

This component provides multiple sets of dropdown filters for a list.

Category 1
Category 2
Category 3
Category 4
Markup Details
                            {{ attach_library('goizueta_theme/multi-filtered-list') }}

<div class="multi-filter">
  <button class="multi-filter-expand" aria-controls="{{ filter_id }}" aria-expanded="false">{{ filter_title }}</button>
  <div id="{{ filter_id }}" class="multi-filter-main">
    <div class="multi-filter-filters">
      {% for filter in filters %}
        {% if filter.type == 'checkboxes' %}
          <fieldset id="{{ filter.id }}" class="multi-filter-section checkboxes">
            <legend>{{ filter.name }}</legend>
            <div class="checkbox-group">
              {% for option in filter.options %}
                {% set option_id = filter.id ~ '--' ~ option.id %}
                <div class="checkbox-group">
                  <input class="multi-filter-option" id="{{ option_id }}" name="{{ filter.id }}"
                         type="checkbox" value="{{ option_id }}" />
                  <label for="{{ option_id }}">{{ option.name }}</label>
                </div>
              {% endfor %}
            </div>
          </fieldset>
        {% endif %}
      {% endfor %}
    </div>
    {% if use_apply_button %}
    <div class="multi-filter-operations">
      <button class="multi-filter-apply">Apply</button>
    </div>
    {% endif %}
  </div>
  {% if filter_extras %}
  <div class="multi-filter-extras">
    {% if filter_extras.filter_special_widget %}
      {# todo figure out "show unscheduled courses" #}
    {% endif %}
    {% if filter_extras.filter_display_switcher %}
      {# todo figure out list/calendar switcher #}
    {% endif %}
  </div>
  {% endif %}
</div>

                          

News Item

This is the News Item component which is used to display latest news items.

Markup Details
                            {{ attach_library('goizueta_theme/news-item') }}

{%
  set attributes = attributes ? attributes.addClass('news-item')  : ' class="news-item"'
%}

<article{{ attributes|raw }}>
  <div class="news-item__inner">
    {% if image %}
      <div class="news-item__image">
        {{ image }}
      </div>
    {% endif %}
    {% if date %}
      <div class="news-item__date">
        {{ date }}
      </div>
    {% endif %}
    {%
      include '@components/heading/heading.twig' with {
        "heading": heading
      } only
    %}
  </div>
</article>

                          

Pager

The standard pager used by views.

Pager displayed on first page.




Pager displayed on a "middle" page, and nine (max) pages.




Pager displayed on last page.

Markup Details
                            {{ attach_library('goizueta_theme/pager') }}

<h2>Pager displayed on first page.</h2>
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
  <h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
  <ul class="pager__items js-pager__items">
    <li class="pager__item pager__item--first">
      <span class="pager__item--disabled"><span class="visually-hidden">Currently on first page'</span><span aria-hidden="true">«</span></span>
    </li>
    <li class="pager__item is-active">
      <a class="pager__page-link" href="?page=0" title="Current page"><span class="visually-hidden">Current page</span>1</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=1" title="Go to page 2"><span class="visually-hidden">Page</span>2</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=2" title="Go to page 3"><span class="visually-hidden">Page</span>3</a>
    </li>
    <li class="pager__item pager__item--last">
      <a href="?page=2" title="Go to last page"><span class="visually-hidden">Last page</span><span aria-hidden="true">»</span></a>
    </li>
  </ul>
</nav>
<br />
<br />
<br />
<h2>Pager displayed on a "middle" page, and nine (max) pages.</h2>
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
  <h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
  <ul class="pager__items js-pager__items pager__items--many">
    <li class="pager__item pager__item--first">
      <a href="?page=0" title="Go to first page"><span class="visually-hidden">First page</span><span aria-hidden="true">«</span></a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=0" title="Go to page 1"><span class="visually-hidden">Page</span>1</a>
    </li>
    <li class="pager__item is-active">
      <a class="pager__page-link" href="?page=1" title="Current page"><span class="visually-hidden">Current page</span>2</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=2" title="Go to page 3"><span class="visually-hidden">Page</span>3</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=3" title="Go to page 4"><span class="visually-hidden">Page</span>4</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=4" title="Go to page 5"><span class="visually-hidden">Page</span>5</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=5" title="Go to page 6"><span class="visually-hidden">Page</span>6</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=6" title="Go to page 7"><span class="visually-hidden">Page</span>7</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=7" title="Go to page 8"><span class="visually-hidden">Page</span>8</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=8" title="Go to page 9"><span class="visually-hidden">Page</span>9</a>
    </li>
    <li class="pager__item pager__item--last">
      <a href="?page=8" title="Go to last page"><span class="visually-hidden">Last page</span><span aria-hidden="true">»</span></a>
    </li>
  </ul>
</nav>
<br />
<br />
<br />
<h2>Pager displayed on last page.</h2>
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
  <h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
  <ul class="pager__items js-pager__items">
    <li class="pager__item pager__item--first">
      <a href="?page=0" title="Go to first page"><span class="visually-hidden">First page</span><span aria-hidden="true">«</span></a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=0" title="Go to page 1"><span class="visually-hidden">Page</span>1</a>
    </li>
    <li class="pager__item">
      <a class="pager__page-link" href="?page=1" title="Go to page 2"><span class="visually-hidden">Page</span>2</a>
    </li>
    <li class="pager__item is-active">
      <a class="pager__page-link" href="?page=2" title="Current page"><span class="visually-hidden">Current page</span>3</a>
    </li>
    <li class="pager__item pager__item--last">
      <span class="pager__item--disabled"><span class="visually-hidden">Currently on last page</span><span aria-hidden="true">»</span></span>
    </li>
  </ul>
</nav>

                          

Podcast

The Podcast component requires the title and a feed url.
This component shows the latest episode.

Markup Details
                            {{ attach_library('goizueta_theme/podcast') }}
{% import '@components/icons/icons.twig' as icons %}

<article class="podcast">
  <div class="podcast__image">
    <img src="{{ podcast.image_url }}" alt="{{ podcast.name }}" />
  </div>
  <div class="podcast__details">
    <div class="podcast__name-container">
      <div class="podcast__name">
        {{ podcast.name }}
      </div>
    </div>
    <div class="episode__container">
      <div class="episode__title">
        {{ episode.title }}
      </div>
      <div class="episode__date-time">
        <div class="episode__date">
          {{ episode.date }}
        </div>
        <div class="episode__time">
          {{ episode.time }}
        </div>
      </div>
      <div class="episode__player">
        <audio controls="true" preload="none" src="{{ episode.url }}"></audio>
      </div>
      <div class="episode__download">
        <a href="{{ episode.url }}" target="_blank" class="episode__download-link" download>
          <span class="episode__icon-wrapper">
            {{ icons.get('download', 'episode__download-icon') }}
            {{'Download Episode'|t}}
          </span>
        </a>
      </div>
    </div>
  </div>
</article>


                          

Program Comparison

This is the Program Comparison Table component. Renders React app for program comparison.

Markup Details
                            {{ attach_library('goizueta_theme/program-comparison-table') }}
{{ attach_library('goizueta_theme/card-container') }}

<div id="program-compare"></div>

                          

Recent Events

Recent Events is a carousel.
The slide items are event-cards.

Markup Details
                            {{ attach_library('goizueta_theme/recent-events') }}

<section class="recent-events{% if events|length > 4 %} hide-dots--mobile{% endif %}">
  {% if heading %}
    <div class="recent-events__heading--wrapper">
      {% include '@components/heading/heading.twig' with {
        "heading" : heading
      } only %}
    </div>
  {% endif %}

  <div class="recent-events__schedule">
    <ul class="recent-events__list recent-events__slider">
      {% block items %}
        {% for item in events %}
          <li class="recent-events__item">
            {% include '@components/event-card/event-card.twig' with {
              "event_card": item
            } only %}
          </li>
        {% endfor %}
      {% endblock %}
    </ul>

    {# This is used as a container for slider's arrows and dots. #}
    <div class="recent-events__pager slick-pager"></div>

    {# CTA below events slider. #}
    {% if cta %}
      <div class="recent-events__cta">
        {%
          include '@components/button/button.twig' with {
            "button": {
              "text": cta.text,
              "url": cta.url,
              "icon": 'arrow-next-navy',
              "classes": 'button--primary button--wide'
            }
          } only
        %}
      </div>
    {% endif %}
  </div>
</section>

                          

Research Spotlight Card

This is the Research Spotlight Card component.

Markup Details
                            {{ attach_library('goizueta_theme/research-spotlight-card') }}

{%
  set attributes = attributes ? attributes.addClass('research-spotlight-card')  : ' class="research-spotlight-card"'
%}

<article {{ attributes|raw }}>
  <img class="research-spotlight-card__image" src="{{ card.image_url }}" alt="{{ card.image_alt }} /">
  <div class="research-spotlight-card__content">
    <div class="research-spotlight-card__content--date">
      {{ card.date }}
    </div>
    <div class="research-spotlight-card__content--title-container">
      <h3 class="research-spotlight-card__content--title">
        <a href="{{ card.spotlight_url }}">{{ card.title }}</a>
      </h3>
    </div>
    <div class="research-spotlight-card__content--expert">
      <a href="{{ card.expert_url }}">{{ card.expert }}</a>
    </div>
    <div class="research-spotlight-card__link-read-more">
      <a href="{{ card.spotlight_url }}">{{ card.read_more_text }}</a>
    </div>
  </div>
</article>

                          

Research Spotlight Card Container

This is a listing of Research Spotlight cards.

Markup Details
                            {{ attach_library('goizueta_theme/research-spotlight-card-container') }}

{# Preserve the Drupal attributes if they're available. #}
{% set component_classes = 'research-spotlight-card-container' %}
{% if cta %}
  {% set component_classes = component_classes ~ ' has-cta' %}
  {% set cta_icon = cta.icon ? cta.icon : 'submit' %}
{% endif %}
{% set attributes = attributes ? attributes.addClass(component_classes) : ' class="' ~ component_classes ~ '"' %}

{# Get count of news items. #}
{% set item_count = cards|length %}

<section {{ attributes|raw }}>
  {% include '@components/heading/heading.twig' with {
    heading : {
      title_light: "Research",
      title_heavy: "Spotlight",
      classes: "heading--xlarge research-spotlight-card-container__heading"
    }
  } only %}
  <div class="research-spotlight-card-container__carousel{% if item_count > 4 %} hide-dots--mobile{% endif %}">
    <ul class="research-spotlight-card-container__cards">
      {% for item in cards %}
        <li class="research-spotlight-card-container__cards--item">
          {% include '@components/research-spotlight-card/research-spotlight-card.twig' with {
            "card": {
              "title": item.title,
              "date": item.date,
              "spotlight_url": item.spotlight_url,
              "image_url": item.image_url,
              "image_alt": item.image_alt,
              "expert": item.expert,
              "expert_url": item.expert_url
              }
            } only
          %}
        </li>
      {% endfor %}
    </ul>
    {# This is used as a container for slider's arrows and dots. #}
    <div class="research-spotlight-card-container__pager slick-pager"></div>
  </div>

  {% if cta %}
    {% set button_classes = 'button--primary' %}
    {% if cta.cta_classes is not empty %}
      {% set button_classes = button_classes ~ ' ' ~ cta.cta_classes %}
    {% endif %}
    <div class="research-spotlight-card-container__cta">
      {%
        include '@components/button/button.twig' with {
          "button": {
            "text": cta.text,
            "url": cta.url,
            "icon": cta_icon,
            "classes": button_classes
          }
        } only
      %}
    </div>
  {% endif %}
</section>

                          

Research Spotlight Full

This is the full display of the Research Spotlight component.

Forecasting demand and supply? Our experts can help explain how industry is trying to weather the storm of COVID-19.

Spotlight Article Image

Featured Faculty:

Artificial intelligence (AI) is everywhere. It’s taking questions from clients, running assembly lines and is now pretty much part of every appliance in every house and is also an integral part of industry.

Markup Details
                            {{ attach_library('goizueta_theme/research-spotlight-full') }}
{{ attach_library('goizueta_theme/social-share') }}

<section class="l-one-column research-spotlight-full">
  <h1 class="research-spotlight--title">
    {{ title }}
  </h1>
  <div class="research-spotlight--dateline">
    {{ date }} | {{ reading_time }} {{ "min read"|trans }}
  </div>
    {% if experts_count <= 2 %}
    <div class="research-spotlight--section-top">
        <div class="column--first">
          <div class="research-spotlight--author">
            <h2 class="research-spotlight--author__label">{{ "Featured Faculty:"|trans }}</h2>
            {{ expert_list }}
          </div>
        </div>
        <div class="column--second">
          <div class="research-spotlight--image">
            {{ image }}
          </div>
        </div>
    </div>
    {% else %}
    <div class="research-spotlight--section-top inverted">
      <div class="column--first">
        <div class="research-spotlight--image--centered">
          {{ image }}
        </div>
      </div>
      <div class="column--second">
        <div class="research-spotlight--author">
          <h2 class="research-spotlight--author__label">{{ "Featured Faculty:"|trans }}</h2>
          <div class="stuff-profiles__list">
            {{ expert_list }}
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  <div class="research-spotlight--section-content">
    {{ content }}
  </div>
  <div class="research-spotlight--section-social-share">
    {% if social_share is not empty %}
      {{ social_share }}
    {% endif %}
  </div>
</section>

                          

Scroller

Full-page scrolling content.

Markup Details
                            {{ attach_library('goizueta_theme/scroller') }}
<div class="scroller">
  <div class="scroller__content">
    {% for section in sections %}
      {{ section }}
    {% endfor %}
  </div>
</div>

                          

Scroller Section

Section of Full-page scrolling content.

Markup Details
                            {{ attach_library('goizueta_theme/scroller-section') }}
{% set classes="section scroller-section" %}
{% if modifier_classes %}
  {% set classes = classes ~ " " ~ modifier_classes %}
{% endif %}
{% set data_attrs = background_color ? ' data-background-color="' ~ background_color ~ '"' : '' %}
{% if offset_percentage %}
  {% set data_attrs = data_attrs ~ ' data-percentage="' ~ offset_percentage ~ '"' %}
{% endif %}
{% if centered %}
  {% set data_attrs = data_attrs ~ ' data-centered="' ~ centered ~ '"' %}
{% endif %}
{% if anchor %}
  {% set data_attrs = data_attrs ~ ' data-anchor="' ~ anchor ~ '"' %}
{% endif %}
<section class="{{ classes|raw }}"{{ data_attrs|raw }}>
 {{ content }}
</section>

                          

Scroller Slide

Slide Full-page scrolling content.

Markup Details
                            {{ attach_library('goizueta_theme/scroller-slide') }}
{% set classes="slide scroller-slide" %}
{% if modifier_classes %}
  {% set classes = classes ~ " " ~ modifier_classes %}
{% endif %}
{% set data_attrs = background_image ? ' data-background-image="' ~ background_image ~ '"' : '' %}
<section class="{{ classes }}"{{ data_attrs }}>
  <div class="scroller-slide__inner">
    {% if page_title %}
      <h1 class="page-title">{{ page_title }}</h1>
    {% endif %}
    <div class="content">
      {{ content }}
    </div>
  </div>
</section>
                          

Scroller Slide Card Container

Slide with cards container for full-page scrolling content.

Markup Details
                            {{ attach_library('goizueta_theme/scroller-slide-card-container') }}

{% set horizontal_cards %}
  {% include '@components/card-container/card-container.twig' with {
    "heading" : heading,
    "cards": cards,
    "cta": cta,
    "program_compare_enabled": false
  } only %}
{% endset  %}
{% set page_title_val = page_title ? page_title : null %}

{# For wide screens: all cards on one page. #}
{% include '@components/scroller-slide/scroller-slide.twig' with {
  "modifier_classes": "narrow-hide slide-card-container slide-card-container__wide",
  "page_title": page_title_val,
  "content": horizontal_cards
} %}

{# For narrow screens: one card per slide. #}
{% for item in cards %}
  {% set card_content %}
    {% include '@components/card-container/card-container.twig' with {
      "heading" : heading,
      "cards": [
        item
      ],
      "program_compare_enabled": false
    } only %}
  {% endset %}
  {% include '@components/scroller-slide/scroller-slide.twig' with {
    "modifier_classes": "narrow-only slide-card-container slide-card-container__narrow",
    "page_title": page_title_val,
    "content": card_content
  } %}
  {% set page_title_val = false %}
{% endfor %}

                          

Scroller Slide Engage List

Slide with engage card list for full-page scrolling content.

This is a page title

  • Electronic Funds Transfer (EFT)

    Spread the cost of your support over the course of a year by authorizing your bank to transfer to Emory a monthly amount you've predetermined.
  • Matching Gift

    Double or even triple the value of your donation by asking your company to match your support for Emory.
  • Stocks, Securities, or Estate

    There are many ways to give to Emory. With careful planning, you can create a legacy at Goizueta and tax benefits for yourself.

This is a page title

Electronic Funds Transfer (EFT)

Spread the cost of your support over the course of a year by authorizing your bank to transfer to Emory a monthly amount you've predetermined.

Matching Gift

Double or even triple the value of your donation by asking your company to match your support for Emory.

Stocks, Securities, or Estate

There are many ways to give to Emory. With careful planning, you can create a legacy at Goizueta and tax benefits for yourself.
Markup Details
                            {{ attach_library('goizueta_theme/scroller-slide-engage-list') }}

{% set horizontal_cards %}
  {% include '@components/engage-cards-list/engage-cards-list.twig' with {
    "heading" : heading,
    "modifier_class" : "engage-cards-horizontal",
    "items": card_items
  } %}
{% endset  %}
{% set page_title_val = page_title ? page_title : null %}

{# For wide screens: all cards on one page. #}
{% include '@components/scroller-slide/scroller-slide.twig' with {
  "modifier_classes": "narrow-hide engage-list engage-list__wide",
  "page_title": page_title_val,
  "content": horizontal_cards
} %}

{# For narrow screens: one card per slide. #}
{% for card in card_items %}
  {% set card_content %}
    {% if heading %}
      {%
        include '@components/heading/heading.twig' with {
        "heading": heading
      }
      %}
    {% endif %}
    {% include '@components/engage-card/engage-card.twig' with {
      "title": card.title,
      "body": card.body,
      "cta": card.cta,
      "icon": card.icon
    } %}
  {% endset %}
  {% include '@components/scroller-slide/scroller-slide.twig' with {
    "modifier_classes": "narrow-only engage-list engage-list__narrow",
    "page_title": page_title_val,
    "content": card_content
  } %}
  {% set page_title_val = false %}
{% endfor %}

                          

Scroller Slide Statistics List

Slide with statistics list for full-page scrolling content.

This is a page title

Markup Details
                            {{ attach_library('goizueta_theme/scroller-slide-stats-list') }}

{% set horizontal_stats %}
  {% include '@components/statistics-container/statistics-container.twig' with {
    "statistics" : statistics
  } %}
{% endset  %}
{% set page_title_val = page_title ? page_title : null %}

{# For wide screens: all statistics on one page. #}
{% include '@components/scroller-slide/scroller-slide.twig' with {
  "modifier_classes": "narrow-hide stats-list stats-list__wide",
  "page_title": page_title_val,
  "content": horizontal_stats
} %}

{# For narrow screens: one statistic per slide. #}
{% for item in statistics %}
  {% set stat_content %}
    <div class="statistic-container slick-ignore">
      <div class="statistic-container__container">
        <div class="statistic-container__item">
          {% include '@components/statistic-card/statistic-card.twig' with {
            "statistic_card" : item
          } only %}
        </div>
      </div>
    </div>
  {% endset %}
  {% include '@components/scroller-slide/scroller-slide.twig' with {
    "modifier_classes": "narrow-only stats-list stats-list__narrow",
    "page_title": page_title_val,
    "content": stat_content
  } %}
  {% set page_title_val = false %}
{% endfor %}

                          

Search Page Search Form

This is the search form used on the search page.

Search Site

Markup Details
                            {{ attach_library('goizueta_theme/search-page-search-form') }}
<div class="search-api-page-block-form contextual-region" data-drupal-selector="search-api-page-block-form" id="block-searchapipagesearchblockform">
  <h2>{{ search_heading }}</h2>

  {% block search_page_form %}
    <form action="/search" method="post" id="search-api-page-block-form" accept-charset="UTF-8" data-drupal-form-fields="edit-keys,edit-submit">
      <div class="js-form-item form-item js-form-type-search form-item-keys js-form-item-keys form-no-label">
        <label for="edit-keys" class="visually-hidden">Search</label>
        <input placeholder="Enter the terms you wish to search for." data-drupal-selector="edit-keys" type="search" id="edit-keys" name="keys" maxlength="128" class="form-search">
      </div>
      <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
        <input data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Search" class="button js-form-submit form-submit">
      </div>
    </form>
  {% endblock %}
</div>
                          

Search Page Search Results

This is the Search Page Search Results component. It's an example.

Search Page Search Results

This is the first title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is the second title

Donec tristique varius tortor, a rutrum mauris rhoncus venenatis.

This is the third title

Etiam ac mauris vitae ante vulputate convallis non eu orci.

Markup Details
                            {{ attach_library('goizueta_theme/search-page-search-results') }}
<section class="acquia-search-results">
  <h2 class="search-page-search-results__heading">{{ heading }}</h2>
  {% for item in items %}
    <div class="views-row">
      <article class="search-page-search-results__item">
        <h3>{{ item.title }}</h3>
        <p>{{ item.desc }}</p>
      </article>
    </div>
  {% endfor %}
</section>

                          

Secondary Navigation

The Secondary Navigation is displayed at the very top of the site (above header), and it usually displays on every page where the header is shown.

class=secondary-nav
Markup Details
                            {#
/**
 * @file
 * Theme override to display a menu.
 *
 * Available variables:
 * - menu_name: The machine name of the menu.
 * - items: A nested list of menu items. Each menu item contains:
 *   - attributes: HTML attributes for the menu item.
 *   - below: The menu item child items.
 *   - text: The menu link title.
 *   - url: The menu link url, instance of \Drupal\Core\Url
 *   - localized_options: Menu link localized options.
 *   - is_expanded: TRUE if the link has visible children within the current
 *     menu tree.
 *   - is_collapsed: TRUE if the link has children within the current menu tree
 *     that are not currently visible.
 *   - in_active_trail: TRUE if the link is in the active trail.
 */
#}
{% import _self as menus %}
{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('secondary-nav') : ' class=secondary-nav'
%}
{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ attach_library('goizueta_theme/secondary-nav') }}

{{ menus.menu_links(items, attributes) }}

{% macro menu_links(items, attributes) %}
  {% import _self as menus %}
  {% if items %}
    <ul{{ attributes }} role="menu">
    {% for item in items %}
      <li class="secondary-nav__item">
        {% if kss == true  %}
          {{ link(item.text, item.url) }}
        {% else %}
          <a class="secondary-nav__item--link" href="{{item.url}}">{{item.text}}</a>
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

                          

Select Nav

This is the Select Nav component. A list of options that redirect on selection.

Markup Details
                            {{ attach_library('goizueta_theme/select-nav') }}

{%
  set attributes = attributes ? attributes.addClass('sidebar-form') : ' class="sidebar-form"'
%}

<section {{ attributes|raw }}>
  {% if heading %}
    {%
      include '@components/heading/heading.twig' with {
        "heading": heading,
        "classes": "sidebar-form__title"
      }
    %}
  {% endif %}

  <div class="sidebar-form__form">
    <form class="selectable-nav program-select">
      <select class="selectable-nav__list">
        <option disabled selected value>Choose Option</option>
        {% for link in links %}
          <option value="{{link.value}}" {{link.selected}}>{{link.text}}</option>
        {% endfor %}
      </select>
    </form>
  </div>
</section>

                          

Sidebar Form

This is the Sidebar Form component that displays elements for selecting date ranges.

Date Selection

This is the Date Selection component that displays elements for selecting date ranges within Slate Engagement.


Program select box

This is the Program select box component that displays a drop-down for selecting Programs within Slate Engagement.


Event Filters

This is the Event Filters component that displays nested checkboxes in a views exposed form.

Markup Details
                            <style>
  .kss-display-title {
    background: #ddd;
    font-size: 2.4rem;
    margin-bottom: 0;
    padding: 0.5rem 0 0 1rem
  }
  .kss-display-title:not(:first-of-type) {
    margin-top: 3rem;
  }
  .kss-display-separator {
    border: 2px solid;
    margin: 3rem 0;
  }
  .kss-display-description {
    background: #ddd;
    margin-bottom: 5rem;
    padding: 0 0 0.5rem 1rem
  }
</style>
<h2 class="kss-display-title">Date Selection</h2>
<p class="kss-display-description">This is the Date Selection component that displays elements for selecting date ranges within Slate Engagement.</p>
{%
  include '@components/sidebar-form/sidebar-form.twig' with {
    "sidebar_form": date_selection
  }
%}
<hr class="kss-display-separator">
<h2 class="kss-display-title">Program select box</h2>
<p class="kss-display-description">This is the Program select box component that displays a drop-down for selecting Programs within Slate Engagement.</p>
{%
  include '@components/sidebar-form/sidebar-form.twig' with {
    "sidebar_form": program_select_box
  }
%}
<hr class="kss-display-separator">
<h2 class="kss-display-title">Event Filters</h2>
<p class="kss-display-description">This is the Event Filters component that displays nested checkboxes in a views exposed form.</p>
{%
  include '@components/sidebar-form/sidebar-form.twig' with {
    "sidebar_form": event_categories
  }
%}


                          

Site Header

This is the Site Header used as the site's branding.

Markup Details
                            {{ attach_library('goizueta_theme/site-header') }}


{% if attributes %}
  {# Preserve the Drupal attributes if they're available. #}
  {% set attributes = attributes.addClass('site-header') %}
  {% if collapsed %}
    {% set attributes = attributes.addClass('collapsed') %}
  {% endif %}
{% else %}
  {% if collapsed %}
    {% set attributes = ' class="site-header collapsed"' %}
  {% else %}
    {% set attributes = ' class="site-header"' %}
  {% endif %}
{% endif %}


<section{{ attributes|raw }}>
  {% if secondary_nav %}
    {%
      include '@components/utility-bar/utility-bar.twig' with {
        "secondary_nav": secondary_nav,
        "site_search": site_search,
        "theme_path": theme_path,
        "site_name": site_name
      } only
    %}
  {% endif %}
  {% if site_logo or mega_menu %}
    <div class="site-header__brand-mega-menu">
      <div class="site-header__brand-mega-menu__inner">
        {% if site_logo %}
          {%
            include '@components/site-logo/site-logo.twig' with {
              "link": site_logo.link,
              "icon": site_logo.icon
            } only
          %}
        {% endif %}
        {% if mega_menu %}
          <nav id="nav" class="mega-menu__container mega-nav mega-menu__main">
            {%
              include '@components/mega-menu/mega-menu.twig' with {
                "max_level" : mega_menu.max_level,
                "items": mega_menu.items
              } only
            %}
          </nav>
        {% endif %}
      </div>
    </div>
  {% endif %}

  {% if secondary_nav %}
    <div class="site-header__secondary-nav--wrapper">
      {%
        include '@components/secondary-nav/secondary-nav.twig' with {
          "items": secondary_nav,
          "classes": ' secondary-nav--mobile'
        } only
      %}
    </div>
  {% endif %}
</section>

                          

Site Logo White

This is the Site Logo used as the site's branding. This version of the logo is usually found in the site's footer.

Markup Details
                            {{ attach_library('goizueta_theme/site-logo') }}
{% import '@components/icons/icons.twig' as icons %}

<div class="site-logo-white {{ classes }}">
  {% if link %}
    <a href="{{ link }}" rel="home" class="site-logo-white__container">
      {{ icons.get(icon, 'icon--site-logo-white')}}
    </a>
  {% else %}
    <div class="site-logo-white__container">
      {{ icons.get(icon, 'icon--site-logo-white')}}
    </div>
  {% endif %}
</div>

                          
Wednesday
Nov
23
This is the title
12:05 PM EST
Markup Details
                            {{ attach_library('goizueta_theme/slate-event-card') }}

<article class="slate-event-card">
  <div class="slate-event-card__inner">
    <div class="slate-event-card__date-container">
      <div class="slate-event-card__day">{{ date.day }}</div>
      <div class="slate-event-card__month">{{ date.month }}</div>
      <div class="slate-event-card__date">{{ date.date }}</div>
    </div>
    <div class="slate-event-card__right-content">
      <div class="slate-event-card__event-details">
        <div class="slate-event-card__title">{{ event_title }}</div>
        <div class="slate-event-card__time">{{ time }}</div>
      </div>

      {% if button %}
      <div class="slate-event-card__event-schedule">
        {%
          include '@components/button/button.twig' with {
            "button": {
              "text": button.text,
              "url": button.url,
              "classes": 'button--light'
            }
          } only
        %}
      </div>
      {% endif %}
    </div>
  </div>
</article>

                          

This is a title

  • Wednesday
    Nov
    23
    This is the title
    12:05 PM EST
  • Wednesday
    Nov
    23
    This is the title
    12:05 PM EST
  • Wednesday
    Nov
    23
    This is the title
    12:05 PM EST
  • Wednesday
    Nov
    23
    This is the title
    12:05 PM EST
Markup Details
                            {{ attach_library('goizueta_theme/slate-event-list') }}

{% include '@components/heading/heading.twig' with heading %}
<section class="slate-event-list">
  <ul class="slate-event-list__container">

    {% for item in event_items %}
      <li class="slate-event-list__item">
        {% include '@components/slate-event-card/slate-event-card.twig' with item %}
      </li>
    {% endfor %}

  </ul>
</section>
                          

Slate Form Embed

This is the Slate Form Embed component.
Renders an embedded form from the Slate CRM.

Loading...
Markup Details
                            {{ attach_library('goizueta_theme/slate-form-embed') }}

<div class="slate-form-embed brochure-form">
  <div
    id="slate-form-embed__form"
    data-form-url="{{ form_url }}"
    data-form-redirect="{{ form_redirect }}">Loading...
  </div>
</div>

                          

Slick Pager

The pager used in Slick carousels.

Use the following within the .slick() JS invocation:

$('element', context).not('.slick-initialized').slick({
  appendArrows: $('.slick-pager'),
  appendDots: $('.slick-pager'),
  dots: true
});
Markup Details
                            {{ attach_library('goizueta_theme/slick-pager') }}

<section class="slick-pager">
  <button
    class="slick-prev slick-arrow"
    aria-label="Previous"
    type="button"
    style="">Previous
  </button>
  <button
    class="slick-next slick-arrow"
    aria-label="Next"
    type="button"
    style="">Next
  </button>
  <ul class="slick-dots" role="tablist" style="">
    <li class="slick-active" role="presentation"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 5" tabindex="0" aria-selected="true">1</button></li>
    <li role="presentation"><button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 5" tabindex="-1">2</button></li>
    <li role="presentation"><button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide02" aria-label="3 of 5" tabindex="-1">3</button></li>
    <li role="presentation"><button type="button" role="tab" id="slick-slide-control03" aria-controls="slick-slide03" aria-label="4 of 5" tabindex="-1">4</button></li>
    <li role="presentation"><button type="button" role="tab" id="slick-slide-control04" aria-controls="slick-slide04" aria-label="5 of 5" tabindex="-1">5</button></li>
  </ul>
</section>

                          

Social Icons

These social media icons are usually found in the site's footer but can also be used on other areas of the site.

Markup Details
                            {{ attach_library('goizueta_theme/social-icons') }}
{% import '@components/icons/icons.twig' as icons %}

<ul class="social-icons {{ modifier_class }} {{ classes|default('') }}">
  {% for item in items %}
    <li class="social-icons__item">
      <a href="{{ item.url }}"
        class="social-icons__link">
        {{ icons.get(item.icon, 'icon--' ~ item.icon|lower) }}
        <span class="visually-hidden">{{ item.icon }}</span>
      </a>
    </li>
  {% endfor %}
</ul>

                          

Social Share

These social media icons are used to share page content on Social Media sites.

Markup Details
                            {{ attach_library('goizueta_theme/social-share') }}
{% apply spaceless %}
<span class="social-share--item-list">
  {% if button_setting != 'none' %}
    {% set universal_button %}
      <a class="a2a_dd addtoany_share" href="https://www.addtoany.com/share#url={{ link_url|url_encode }}&amp;title={{ link_title|url_encode }}">
        {% if button_image %}
          <img src="{{ button_image }}" alt="{{ 'Share'|t }}">
        {% endif %}
      </a>
    {% endset  %}
  {% endif %}

  <span class="a2a_kit a2a_kit_size_{{ buttons_size }} addtoany_list" data-a2a-url="{{ link_url }}" data-a2a-title="{{ link_title }}">
    {% if universal_button_placement == 'before' %}
      {{ universal_button }}
    {% endif %}

    {% if addtoany_html %}
      {{ addtoany_html|raw }}
    {% endif %}

    {% if universal_button_placement == 'after' %}
      {{ universal_button }}
    {% endif %}
  </span>
</span>
{% endapply %}

                          

Spotlight

The Spotlight content can contain image, video, or podcast.
It can be left or right justified. This is based off a class.
The class name references the text position, so Left means the text is
on the left side.

Goizueta Impact Investing Club

Some Text Eyebrow

Sub Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus auctor odio mi, egestas faucibus justo lacinia vulputate. Donec ut sapien ac erat placerat varius et vel velit. Sed quis ullamcorper elit. Nulla facilisi. Sed condimentum tincidunt mauris, et hendrerit urna varius sed. Proin vitae odio eu leo ultrices eleifend id et lectus. Suspendisse a consequat leo.

Goizueta Impact Investing Club

Some Text Eyebrow

Sub Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus auctor odio mi, egestas faucibus justo lacinia vulputate. Donec ut sapien ac erat placerat varius et vel velit. Sed quis ullamcorper elit. Nulla facilisi. Sed condimentum tincidunt mauris, et hendrerit urna varius sed. Proin vitae odio eu leo ultrices eleifend id et lectus. Suspendisse a consequat leo.

The Goizueta Effect

Some Text Eyebrow

Sub Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus auctor odio mi, egestas faucibus justo lacinia vulputate. Donec ut sapien ac erat placerat varius et vel velit. Sed quis ullamcorper elit. Nulla facilisi. Sed condimentum tincidunt mauris, et hendrerit urna varius sed. Proin vitae odio eu leo ultrices eleifend id et lectus. Suspendisse a consequat leo.
Markup Details
                            
{% for item in items %}

  {% include '@components/spotlight/spotlight.twig' with {
    "spotlight" : item.spotlight
  } only %}

{% endfor %}


                          

Statistic Card

The Statistic card has two variants:
The homepage variant has yellow rings and and the variable font weight. The internal page has blue rings, and a standard header treatment.

light title Heavy title
This is an optional summary field that gets display below the number
Markup Details
                            {{ attach_library('goizueta_theme/statistic-card') }}

{# Preserve the Drupal attributes if they're available. #}
{% set component_classes = 'statistic-card' %}
{% set attributes = attributes ? attributes.addClass(component_classes) : ' class="' ~ component_classes ~ '"' %}

<article {{ attributes|raw }}>
  <div class="statistic-card__circles">
    {% include '@components/circular-progress-bar/circular-progress-bar.twig' with {
      "circular_progress_bar" : statistic_card.circular_progress_bar
    } only %}
  </div>
  <div class="statistic-card__head">
    {% include '@components/heading/heading.twig' with {
      "heading" : statistic_card.heading
    } only %}
  </div>
  {% if statistic_card.summary %}
    <div class="statistic-card__summary">
      {{ statistic_card.summary }}
    </div>
  {% endif %}
</article>
                          

Statistics Container

The Statistic Container will hold statistic cards.

The Statistic Container includes an implemntation of the Circular Progress Bar.

The Circular Progress Bar is a text container, tht uses CountUp for a rolling counter, and has outer rings that include animated circular progress bars.

The ProgressBar js file is in the root/libraries folder.

  • URL: https://kimmobrunfeldt.github.io/progressbar.js/
    The countUp js file is in the root/libraries folder.
  • Github: https://github.com/inorganik/countUp.js

    Colors of the progress bar are maintained in CSS, via a color modifier class in the component to utilize the standard theme colors. This color modifier must be located on the .circular-progress-bar element. Current classes maintaind are:
  • Theme color: $color-yellow-high = Yellow colored progress bars. (default)
  • Theme color: $color-sky-blue = Blue colored progress bars

    Required/Expected variables:
    An object keyed circular_progress_bar which contains:
  • modifier_class: pass modifier classes (color)
  • id: Unique id for an id="" attribute
  • raw_text: Text to be displayed in center of circle; with an
    optional leading symbol. --- Expected values: 360, #45, $99
  • light title Heavy title
  • light title Heavy title
Markup Details
                            {{ attach_library('goizueta_theme/statistics-container') }}

{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('statistic-container') : ' class="statistic-container"'
%}

<section {{ attributes|raw }}>
  <ul class="statistic-container__container">
    {% for item in statistics %}
      <li class="statistic-container__item">
        {% include '@components/statistic-card/statistic-card.twig' with {
          "statistic_card" : item
        } only %}
      </li>
    {% endfor %}
  </ul>
  <div class="statistic-container__pager slick-pager"></div>
</section>

                          

Stats Breaker

The Stats Breaker component is a set of cards with different content. They sit above a screen-wide background image with various overlays. One fo the cards can potentially hold a chart.

bg image
  • Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.
  • card image
Markup Details
                            {{ attach_library('goizueta_theme/stats-breaker') }}

<section class="stats-breaker">
  {% if background_image %}
    <div class="stats-breaker__bg-image">
      {{ background_image }}
    </div>
  {% endif %}
  <div class="stats-breaker__cards-wrapper">
    <ul class="stats-breaker__items">
      {% block card_item %}
      {% for item in items %}
        <li class="stats-breaker__item">
          {%
            include '@components/content-card/content-card.twig' with {
              "content_card": item.content_card
            } only
          %}
        </li>
      {% endfor %}
      {% endblock %}
    </ul>
  </div>
</section>

                          

Sticky Container

This container has a sticky property. Applying the html stucture in the example file will allow items to stick.

Testing how sticky this thing is
Markup Details
                            {{ attach_library('goizueta_theme/sticky-container') }}

<section class="sticky-container">
  <div class="sticky-container__inner">
    {{ content }}
  </div>
</section>

                          

Superfilter

A Superfilter allows you to define a complex, tiered, dropdown checkbox filter.

Filter Foods By:
Markup Details
                            {{ attach_library('goizueta_theme/superfilter') }}
<div class="superfilter" id="superfilter-{{ filter.id }}">
  <section class="sticky-container wide">
    <div class="sticky-container__inner">
      <div class="superfilter__filter-section">
        <div class="filter-narrow">
          <div class="filter-narrow__trigger">
            <button class="filter-narrow__trigger-button"
              aria-controls="{{ filter.id ~ '-items-narrow' }}" aria-expanded="false">
              {{ filter.trigger.narrow.label }}
            </button>
          </div>
          {% if filter.inline_filters or filter.display_switcher.narrow %}
            <div class="filter-narrow__extra-options">
              {% if filter.inline_filters %}
                {% for inline_filter in filter.inline_filters %}
                <div class="filter__inline-filter filter-narrow__inline-filter">
                  <input type="checkbox" class="inline-filter-checkbox"
                    id="inline-filter-narrow-{{ inline_filter.key }}" value="{{ inline_filter.key }}"
                    {% if inline_filter.default %}checked{% endif %}/>
                  <label for="inline-filter-narrow-{{ inline_filter.key }}" class="option">
                    {{ inline_filter.value }}
                  </label>
                </div>
                {% endfor %}
              {% endif %}
              {% if filter.display_switcher.narrow %}
                {{ filter.display_switcher.narrow }}
              {% endif %}
            </div>
          {% endif %}
          <div class="filter-narrow__filter-items" id="{{ filter.id ~ '-items-narrow' }}" style="display: none" hidden>
            <div class="filter-narrow__filter-options">
              {% for section in filter.dropdown_sections %}
                <button class="filter-narrow__section-head{% if section.prefilter %} prefilter{% endif %}"
                  aria-controls="{{ filter.id ~ '-narrow-section-' ~ section.key }}" aria-expanded="false">
                  {{ section.title }}
                </button>
                <div class="filter-narrow__section-filters {% if section.prefilter %} prefilter{% endif %}"
                  id="{{ filter.id ~ '-narrow-section-' ~ section.key }}"
                  data-key="{{ section.key }}" style="display: none" hidden>
                  <ul class="superfilter-checkboxes">
                  {% for option in section.options %}
                    <li class="superfilter-checkbox">
                      <input type="checkbox" id="{{ filter.id ~ '-narrow-checkbox-' ~ option.key }}" value="{{ option.key }}"
                        {% if section.prefilter %}
                          disabled
                          {% if section.prefilter == option.key %}checked{% endif %}
                        {% endif %}
                        />
                      <label for="{{ filter.id ~ '-narrow-checkbox-' ~ option.key }}" class="option">
                        {{ option.value }}
                      </label>
                    </li>
                  {% endfor %}
                  </ul>
                </div>
              {% endfor %}
            </div>
            {% if filter.widgets.narrow.inside_bottom %}
              <div class="filter-narrow__inside-bottom">
                {% for widget in filter.widgets.narrow.inside_bottom %}
                  {{ widget }}
                {% endfor %}
              </div>
            {% endif %}
            <div class="filter-narrow__bottom">
              {% if filter.inline_filters %}
                {% for inline_filter in filter.inline_filters %}
                <div class="filter__inline-filter filter-narrow__inline-filter">
                  <input type="checkbox" class="inline-filter-checkbox"
                    id="inline-filter-narrow-bottom-{{ inline_filter.key }}" value="{{ inline_filter.key }}"
                    {% if inline_filter.default %}checked{% endif %}/>
                  <label for="inline-filter-narrow-bottom-{{ inline_filter.key }}" class="option">
                    {{ inline_filter.value }}
                  </label>
                </div>
                {% endfor %}
              {% endif %}
              <div class="filter-narrow__actions">
                <button class="filter-narrow__clear button button--light" type="button">
                  <div class="button--inner">
                    <span class="button__text">
                      {{ "Clear"|t }}
                    </span>
                  </div>
                </button>
                <button class="filter-narrow__apply button button--light" type="button">
                  <div class="button--inner">
                    <span class="button__text">
                      {{ "Apply"|t }}
                    </span>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="filter-wide">
          <div class="filter-wide__trigger">
            <div class="filter-wide__trigger-legend">{{ filter.trigger.wide.label }}:</div>
            {% for section in filter.dropdown_sections %}
              <button class="filter-wide__dropdown-trigger button button--light{% if section.prefilter %} prefilter{% endif %}"
                aria-controls="filter-wide__dropdown" aria-expanded="false"
                {% if section.prefilter %}disabled{% endif %}
                >
                <div class="button--inner">
                  <span class="button__text">
                    {{ section.title }}
                  </span>
                </div>
              </button>
            {% endfor %}
            {% if filter.inline_filters %}
            <div class="filter-wide__inline">
              {% for inline_filter in filter.inline_filters %}
                <div class="filter__inline-filter filter-wide__inline-filter">
                  <input type="checkbox" class="inline-filter-checkbox"
                    id="inline-filter-wide-{{ inline_filter.key }}" value="{{ inline_filter.key }}"
                    {% if inline_filter.default %}checked{% endif %}/>
                  <label for="inline-filter-wide-{{ inline_filter.key }}" class="option">
                    {{ inline_filter.value }}
                  </label>
                </div>
                {% endfor %}
            </div>
          {% endif %}
          {% if filter.display_switcher.wide %}
            <div class="filter-wide__display-switcher">
              {{ filter.display_switcher.wide }}
            </div>
          {% endif %}
          </div>
          <div class="filter-wide__dropdown" style="display: none" hidden>
            <div class="filter-wide__dropdown-inner">
            {% for section in filter.dropdown_sections %}
              <div class="filter-wide__dropdown-section{% if section.prefilter %} prefilter{% endif %}" data-key="{{ section.key }}">
                <div class="section-legend">{{ section.title }}</div>
                <ul class="superfilter-checkboxes">
                {% for option in section.options %}
                  <li class="superfilter-checkbox">
                    <input type="checkbox" id="{{ filter.id ~ '-wide-checkbox-' ~ option.key }}" value="{{ option.key }}"
                      {% if section.prefilter %}
                        disabled
                        {% if section.prefilter == option.key %}checked{% endif %}
                      {% endif %}
                    />
                    <label for="{{ filter.id ~ '-wide-checkbox-' ~ option.key }}" class="option">
                      {{ option.value }}
                    </label>
                  </li>
                {% endfor %}
              </div>
            {% endfor %}
            </div>
            <button class="filter-wide__dropdown-close">
              <span class="sr-only">{{ "Close"|t }}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="superfilter__content-section">
    {% if filter.widgets.narrow.content_top %}
      <div class="filter-narrow__content-top">
        {% for widget in filter.widgets.narrow.content_top %}
          {{ widget }}
        {% endfor %}
      </div>
    {% endif %}
    {% if filter.widgets.wide.content_top %}
      <div class="filter-wide__content-top">
        {% for widget in filter.widgets.wide.content_top %}
          {{ widget }}
        {% endfor %}
      </div>
    {% endif %}
    {{ content }}
  </div>
</div>

                          

Switchpane

A mini-layout consisting of a div that switches between panes.

Markup Details
                            {{ attach_library("goizueta_theme/switchpane") }}
<div class="switchpane" data-togglenarrow="{{ toggle_id_narrow }}"
  data-togglewide="{{ toggle_id_wide }}">
  {% for pane in panes %}
    {% set classes = "switchpane--pane switchpane--pane-" ~ loop.index %}
    {% if loop.index == 1 %}
      {% set classes = classes ~ " active" %}
    {% endif %}
    <div class="{{ classes }}">
      {{ pane }}
    </div>
  {% endfor %}
</div>

                          

Tabbed Content

The Tabbed Content component is an accessible tabs solution.

Minority Tab Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper.

Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Lorem ipsum dolor sit amet

Vestibulum maximus metus velit, vel laoreet felis auctor a. Aliquam consequat varius sapien non tempor. Nunc diam lorem, feugiat quis mauris nec, ullamcorper imperdiet tellus. Etiam eu magna posuere, laoreet nibh in, convallis massa. Praesent ut nulla vel augue ultricies molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas mollis, felis non venenatis molestie, risus lectus condimentum arcu, gravida dignissim lacus nulla ut lectus. Cras eu justo non urna malesuada malesuada. Duis ante elit, consectetur eget risus quis, aliquet lobortis felis. Maecenas ac dui vel neque mattis egestas ut in arcu. Vivamus sed aliquet arcu.

Read more about content

Markup Details
                            {{ attach_library('goizueta_theme/tabbed-content') }}

{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('tabbed-content accessible-tabs') : ' class="tabbed-content accessible-tabs"'
%}
<section {{ attributes|raw }} aria-multiselectable="false">
  {% if tabbed_content.callout %}
    {% include '@components/text-breaker/text-breaker.twig' with tabbed_content.callout only %}
  {% endif %}
  {% if tabbed_content.tabs %}
    <nav class="tabbed-content__tabs accessible-tabs__navigation">
      <ul class="tabbed-content__tab-list" role="tablist">
        {% for tab in tabbed_content.tabs %}
          <li class="tabbed-content__tab-item{{ loop.index == 1 ? ' active' : '' }}" role="presentation" {{tab.attributes}} >
            <button
              class="tabbed-content__tab-label accessible-tabs__label"
              id="tab-label--{{ tabbed_content.instance }}--{{ loop.index }}"
              aria-controls="tab-panel--{{ tabbed_content.instance }}--{{ loop.index }}"
              aria-posinset="{{ loop.index }}"
              aria-setsize="{{ loop.length }}"
              aria-selected="{{ loop.index == 1 ? 'true' : 'false' }}"
              role="tab"
              tabindex="0"
            >
              {{ tab.tab_label }}
            </button>
          </li>
        {% endfor %}
      </ul>
    </nav>

    <div class="tabbed-content__panels">
      {% for content in tabbed_content.tabs %}
        <div
          class="tabbed-content__panel accessible-tabs__panel"
          id="tab-panel--{{ tabbed_content.instance }}--{{ loop.index }}"
          aria-hidden="{{ loop.index == 1 ? 'false' : 'true' }}"
          aria-labelledby="tab-label--{{ tabbed_content.instance }}--{{ loop.index }}"
          data-title="{{ content.tab_label }}"
          role="tabpanel"
          tabindex="-1"
        >
          <div class="tabbed-content__panel-container accessible-tabs__panel-container">
            {{ content.tab_panel }}
          </div>
        </div>
      {% endfor %}
    </div>
  {% endif %}
</section>

                          

Tabbed Content with Callout

The Tabbed Content component is an accessible tabs solution. This example uses the callout component.

Minority Tab Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper.

Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Lorem ipsum dolor sit amet

Vestibulum maximus metus velit, vel laoreet felis auctor a. Aliquam consequat varius sapien non tempor. Nunc diam lorem, feugiat quis mauris nec, ullamcorper imperdiet tellus. Etiam eu magna posuere, laoreet nibh in, convallis massa. Praesent ut nulla vel augue ultricies molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas mollis, felis non venenatis molestie, risus lectus condimentum arcu, gravida dignissim lacus nulla ut lectus. Cras eu justo non urna malesuada malesuada. Duis ante elit, consectetur eget risus quis, aliquet lobortis felis. Maecenas ac dui vel neque mattis egestas ut in arcu. Vivamus sed aliquet arcu.

Read more about content

Markup Details
                            {% include '@components/tabbed-content/tabbed-content.twig'%}

                          

Text Breaker

The Text Breaker component is a collection of text fields such as eyebrow Heading and body text. It usually acts as a page breaker.

Take your career to a new level
Goizueta's MSBA imparts strong technical and quantitative training plus comprehensive business acumen, specifically built for individuals who wish to speak the combined language of technology, business and data.
Markup Details
                            {{ attach_library('goizueta_theme/text-breaker') }}

{%
  set attributes = attributes ? attributes.addClass('text-breaker') : ' class="text-breaker"'
%}

{% if eyebrow or heading or body_text %}
  <section{{ attributes|raw }}>
    {% if eyebrow %}
      {%
        include '@components/eyebrow/eyebrow.twig' with {
          "text": eyebrow
        } only
      %}
    {% endif %}

    {% if heading %}
      {%
        include '@components/heading/heading.twig' with {
          "heading": heading
        } only
      %}
    {% endif %}

    {% if body_text %}
      {%
        include '@components/body-text/body-text.twig' with {
          "body_text": body_text
        } only
      %}
    {% endif %}

  </section>
{% endif %}

                          

Text List

The Text List component provides a list split in two columns. The list has a fixed height which when exceeded a collapsible fadede effect is shown to allow visitors to view/hide content.

  • Thomas K. Amster 93MBA, Senior Managing Director at Macquarie Capital (Pacific Palisades, CA).
  • Sarah Brow 89MBA, Global Account Director at the Coca-Cola Company (Marietta, GA).
  • Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.
  • Sarah Brow 89MBA, Global Account Director at the Coca-Cola Company (Marietta, GA).
  • Thomas K. Amster 93MBA, Senior Managing Director at Macquarie Capital (Pacific Palisades, CA).
  • Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.
  • Sarah Brow 89MBA, Global Account Director at the Coca-Cola Company (Marietta, GA).
  • Thomas K. Amster 93MBA, Senior Managing Director at Macquarie Capital (Pacific Palisades, CA).
  • Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.
  • Sarah Brow 89MBA, Global Account Director at the Coca-Cola Company (Marietta, GA).
  • Thomas K. Amster 93MBA, Senior Managing Director at Macquarie Capital (Pacific Palisades, CA).
  • Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.
  • Sarah Brow 89MBA, Global Account Director at the Coca-Cola Company (Marietta, GA).
  • Thomas K. Amster 93MBA, Senior Managing Director at Macquarie Capital (Pacific Palisades, CA).
  • Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.
  • Sarah Brow 89MBA, Global Account Director at the Coca-Cola Company (Marietta, GA).
  • Thomas K. Amster 93MBA, Senior Managing Director at Macquarie Capital (Pacific Palisades, CA).
  • Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.
  • Sarah Brow 89MBA, Global Account Director at the Coca-Cola Company (Marietta, GA).
  • Thomas K. Amster 93MBA, Senior Managing Director at Macquarie Capital (Pacific Palisades, CA).
  • Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.
  • Sarah Brow 89MBA, Global Account Director at the Coca-Cola Company (Marietta, GA).
  • Thomas K. Amster 93MBA, Senior Managing Director at Macquarie Capital (Pacific Palisades, CA).
  • Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.
  • Sarah Brow 89MBA, Global Account Director at the Coca-Cola Company (Marietta, GA).
  • Thomas K. Amster 93MBA, Senior Managing Director at Macquarie Capital (Pacific Palisades, CA).
  • Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.
  • Sarah Brow 89MBA, Global Account Director at the Coca-Cola Company (Marietta, GA).
  • Thomas K. Amster 93MBA, Senior Managing Director at Macquarie Capital (Pacific Palisades, CA).
  • Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.
  • Sarah Brow 89MBA, Global Account Director at the Coca-Cola Company (Marietta, GA).
  • Thomas K. Amster 93MBA, Senior Managing Director at Macquarie Capital (Pacific Palisades, CA).
Markup Details
                            {{ attach_library('goizueta_theme/text-list') }}
{% import '@components/icons/icons.twig' as icons %}

{% set component_classes = ['text-list', 'show-more-content'] %}
{%
  set attributes = attributes ? attributes.addClass(component_classes) : ' class="' ~ component_classes|join(' ') ~ '"'
%}

<section{{ attributes|raw }}>
  {% if heading %}
    {%
      include '@components/heading/heading.twig' with {
        "heading": heading
      } only
    %}
  {% endif %}
  <div class="text-list__list--wrapper">
    {% block text_list_content %}
      <ul class="text-list__list">
        {% for item in items %}
          <li class="text-list__item">
            {{ item.board_member }}
          </li>
        {% endfor %}
      </ul>
    {% endblock %}
  </div>
  <div class="text-list__cta--wrapper">
    <button
      class="text-list__show-more--btn js-text-list__show-more"
      aria-expanded="false">
        <span class="visually-hidden">
          {{ 'Toggle text'|t }}
        </span>
        {{ icons.get('arrow-left', 'icon--toggle-icon') }}
    </button>
  </div>
</section>

                          

Timeline Card

The Timeline Card has two variants:
Image only, that usually describes a change in season.
Image and copy, these are used as points on the timeline.

Markup Details
                            {{ attach_library('goizueta_theme/timeline-card') }}


{%
  set attributes = attributes ? attributes.addClass('timeline-card') : ' class="timeline-card"'
%}

<article {{ attributes|raw }}>
  <div class="timeline-card__inner {{season_class}}">
  {% if type == 'breaker' %}
    <div class="timeline-card__breaker">
    {% include '@components/heading/heading.twig' with {
       "heading" : {
          "title_light": heading.title_light,
          "title_heavy": heading.title_heavy,
          "url": heading.url,
          "heading_level": "3",
          "classes": heading.classes
        }
      } only %}
    </div>
  {% else %}
    {% if image %}
      <div class="timeline-card__image--container">
        {{ image }}
      </div>
    {% endif %}
    <div class="timeline-card-content__container {{ program_class }} {% if image %}with-image{% else %}no-image{% endif %}">
      <div class="timeline-card__eyebrow">
        {% include '@components/heading/heading.twig' with {
          "heading" : {
            "title_light": heading.title_light,
            "title_heavy": heading.title_heavy,
            "url": heading.url,
            "heading_level": "4",
            "classes": heading.classes
          }
        } only %}
      </div>
      <div class="timeline-card-content__inner">
        <h5 class="timeline-card-content__title">{{ title }}</h5>
        <div class="timeline-card-content__text-container">
          {{ body }}
        </div>
        <a class="timeline-card-content__link" href="{{ link.url }}"> {{ link.text }}</a>
      </div>
    </div>
    {% endif %}
  </div>
</article>

                          

Timeline Container

The Timeline Card has two variants:
Image only, that usually describes a change in season.
Image and copy, these are used as points on the timeline. We are using the MIT license version of WOW.js.
https://github.com/graingert/WOW/
We are also using the animate css library from:
https://daneden.github.io/animate.css/
The settings for the wow library are defined in this components js file. Current settings are boxClass: 'timeline-comtainer__card', offset: 100
The docs for these are here: https://wowjs.uk/docs.html

Program Title

100 years Of Impact

Prima luce, cum quibus mons aliud consensu ab eo. Plura mihi bona sunt, inclinet, amari petere vellent. Phasellus laoreet lorem vel dolor tempus vehicula. Unam incolunt Belgae, aliam Aquitani, tertiam. Ut enim ad minim veniam, quis nostrud exercitation. Ab illo tempore, ab est sed immemorabili. Non equidem invideo, miror magis posuere velit aliquet. Paullum deliquit, ponderibus modulisque suis ratio utitur. Quam temere in vitiis, legem sancimus haerentia. Excepteur sint obcaecat cupiditat non proident culpa. Contra legem facit qui id facit quod lex prohibet.
Program Title
8 Semesters
4 Semesters
2 Semesters
Markup Details
                            {{ attach_library('goizueta_theme/timeline-container') }}

{%
  set attributes = attributes ? attributes.addClass('timeline-container') : ' class="timeline-container"'
%}

<section {{ attributes|raw }}>
  <div class="timeline-container__header">
    <div class="timeline-container__program-title">
      {{ program_title }}
    </div>
    {% include '@components/heading/heading.twig' with {
      "heading" : {
        "title_light": heading.title_light,
        "title_heavy": heading.title_heavy,
        "url": heading.url,
        "heading_level": "2",
        "classes": heading.classes
      }
    } only %}
  </div>
  <div class="timeline-container__text">
    {{ program_text }}
  </div>
  <button class="timeline-container__reveal" aria-label="reveal the timeline">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.6 28.4">
      <style>.circleFill{fill:#185785}</style>
      <path class="circleFill" d="M7.7 11.3c-.2.2-.2.6 0 .9.2.2.6.2.9 0l4.5-4.5v14.8c0 .3.3.6.6.6s.6-.3.6-.6V7.7l4.5 4.5c.2.2.6.2.9 0 .2-.2.2-.6 0-.9l-5.5-5.5c-.2-.2-.6-.2-.9 0l-5.6 5.5z"/><path class="circleFill" d="M13.7 27C6.7 27 1 21.3 1 14.3c0-7 5.7-12.8 12.8-12.8 7 0 12.7 5.7 12.7 12.8 0 7-5.8 12.7-12.8 12.7zm0-24.5C7.2 2.5 2 7.8 2 14.3 2 20.8 7.2 26 13.7 26s11.7-5.3 11.7-11.8c.1-6.4-5.2-11.7-11.7-11.7z"/><path class="circleFill" d="M-136.3-241c-.2-.2-.6-.2-.9 0-.2.2-.2.6 0 .9l4.5 4.5h-14.8c-.3 0-.6.3-.6.6s.3.6.6.6h14.8l-4.5 4.5c-.2.2-.2.6 0 .9.2.2.6.2.9 0l5.5-5.5c.2-.2.2-.6 0-.9l-5.5-5.6z"/>
    </svg>
  </button>
  <div class="timeline-container__program-title js-open-time">
    {{ program_title }}
  </div>
  <div class="timeline-container__revealer js-open-time">
    <div class="timeline-container__animation-control" aria-label="Content animates in, to view content without motion uncheck box.">
      <div class="checkbox row">
        <input id="toggle_off" class="timeline-container__toggle" checked type="checkbox" name="animation_value" value="toggle_off">
        <label for="toggle_off">Display content with animation</label>
      </div>
    </div>
    <div class="timeline-container__tabs-section">
      {% if timelines|length > 1 %}
        {% for item in timelines %}
          {% if item.title %}
            <div class="timeline-container__duration-cont">
              <button class="timeline-container__duration{% if loop.first %} js-active{% endif %}" data-duration="{{item.title}}">
                {{ item.title }}
              </button>
              <div class="timeline-container__duration-text">
                {{ item.sub_text }}
              </div>
            </div>
          {% endif %}
        {% endfor %}
      {% endif %}
    </div>
    {% for item in timelines %}
      <ul class="timeline-container__cards {{item.title}} {% if loop.index >1%} js-timeline-hide{% endif %}" data-duration="{{item.title}}">
        {% for card in item.timeline_items %}
          <li class="timeline-container__card fadeInLeftBig">
            {% include '@components/timeline-card/timeline-card.twig' with card only %}
          </li>
        {% endfor %}
      </ul>
    {% endfor %}
  </div>
</section>

                          

Toggle Buttons

A panel of toggle buttons with icons.

Markup Details
                            {{ attach_library('goizueta_theme/toggle-buttons') }}
<div class="toggle-buttons" id="{{ id }}">
  {% for button in buttons %}
  <div class="toggle-button-wrapper">
    <style>
      #{{ button.id }} {
        background-size: {{ button.background_size }};
        background-image: {{ button.background_image }};
      }
      #{{ button.id }}.active {
        background-image: {{ button.background_image_active }};
      }
      }
    </style>
    {% set button_class = button.classes ? "toggle-button " ~ button.classes : "toggle-button" %}
    <button id="{{ button.id }}" class="{{ button_class }}" title="{{ button.title }}"
      data-delta="{{ loop.index }}"
      name="{{ button.name }}" aria-label="{{ button.label }}"></button>
  </div>
  {% endfor %}
</div>

                          

Utility Bar

This is the Utility Bar used as the site's branding.

Markup Details
                            {{ attach_library('goizueta_theme/utility-bar') }}
{% import '@components/icons/icons.twig' as icons %}

{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('utility-bar') : ' class="utility-bar"'
%}
<div{{ attributes|raw }}>
  <div class="utility-bar__inner" >
    {% if secondary_nav %}
      {%
        include '@components/site-search/site-search.twig' with {
          "label": site_search.label,
          "placeholder": site_search.placeholder
        } only
      %}
    {% endif %}
    <div class="utility-bar--nav-search">
      <div class="utility-bar--logo">
        <a href="{{ url('<front>') }}">
          <img src="{{ theme_path }}/dist/assets/emory-white-shield.png"
               alt="{{ site_name }}" />
        </a>
      </div>
      {% if secondary_nav %}
        {%
          include '@components/secondary-nav/secondary-nav.twig' with {
            "items": secondary_nav
          } only
        %}
      {% endif %}
      {% if site_search %}
        <button
          class="site-search__btn js-search-toggle"
          aria-expanded="false">
          <span class="visually-hidden">Search</span>
          {{ icons.get('search', 'icon--search') }}
        </button>
      {% endif %}
      <div class="utility-bar--menu" role="button" aria-haspopup="true" class="mega-menu__toggle menu-toggle" aria-expanded="false">
        <div class="mega-menu__toggle--wrapper">
          <span class="toggle-text">MENU</span>
          <button class="main-menu__toggle" aria-controls="main menu open close" aria-label="Main menu open button" tabindex="0">
            <div class="main-menu__control">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

                          

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>