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.

Admission Dates

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.

Request more Information

Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.

Request more Information

Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.

Request more Information

Sample text
Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.

Request more Information

Sample text
Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.

Request more Information

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 %}

                          

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">
          <a href="{{ card.link.url }}">{{ card.link.text }}</a>
        </div>
      </div>
    </div>
  </div>
</article>

                          

Cards Container

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

Goizueta Programs

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 %}
              <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 %}
    <div class="card-container__cta">
      {%
        include '@components/button/button.twig' with {
          "button": {
            "text": cta.text,
            "url": cta.url,
            "icon": cta_icon,
            "classes": 'button--primary'
          }
        } 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
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">
            {{ icons.get(item.class, 'icon--' ~ item.class|clean_class) }}
            <span class="class-profile__title--label">
              {{ item.title }}
            </span>
          </div>
          <div class="class-profile__item--stat">
            {{ item.stat_value | raw }}
          </div>
        </div>
      {% endfor%}
    </div>
  </div>
</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.).

Your dollars At work

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.

Education

  • 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>

                          

Engage Card

The Engage Card component.

hourglass-big

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

Engage Directly

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

Engage Directly

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

Media Appearances

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

Areas of Expertise

  • Lorem ipsum dolor
  • Sit amet
  • Consectetur
  • Adipiscing elit etiam hendrerit
  • Sapien dapibus

Hometown

  • Atlanta, GA
    United States

Concentration(s)

  • Lorem ipsum dolor
  • Sit amet

Club/Activities

  • 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

Giving Priorities

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 }}>
  {% for item in glossary_items %}
    <span class="glossary--item">
      {{ item.separator }}
      <a href="{{ item.url }}">{{ item.text }}</a> ({{ item.count }})
    </span>
  {% endfor %}
</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.

Full-time students at Goizueta

Student Blog

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(' ') ~ '"'
%}
<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>
        {% 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 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": 'button--ghost',
                }
              } 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": 'button--ghost',
                }
              } 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 %}
</section>

                          

Hero Tall

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

Two programs advertising

Start your Journey

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.

Goizueta Faces

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!1d3315.8579111661247!2d-84.32395498503236!3d33.790167238943134!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f506fabb78960b%3A0x108779eae5995540!2s1300+Clifton+Rd%2C+Atlanta%2C+GA+30322!5e0!3m2!1sen!2sus!4v1542048415158" title="google map" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></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 %}

                          

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>

                          

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>

                          

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 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 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 %}
    {% include '@components/statistic-card/statistic-card.twig' with {
      "statistic_card" : item
    } only %}
  {% 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.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>

                          

Spotlight

The Spotlight content can contain image or video.
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.
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
  • Your dollars At work

    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>

                          

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

Master of Science in Business Analytics

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.

Advisory Board

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

Goizueta Programs

This is the title
Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
This is the link text
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
  • Goizueta Programs

  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • 2.Goizueta Programs

  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • 3.Goizueta Programs

  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
  • Goizueta Programs

    This is the title
    Donec sed odio operae, eu vulputate felis rhoncus. Inmensae subtilitatis, obscuris et malesuada fames.
    this is the link text
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>

                          

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>