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.
    Learn more
  • hourglass-big

    Matching Gift

    Double or even triple the value of your donation by asking your company to match your support for Emory.
    Learn more
  • 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.
    Learn more
  • calendar

    Lorem Ipsum

    Nulla ac laoreet quam. In hac habitasse platea dictumst. Donec at urna quam.
    Learn more
.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.
    Learn more
  • hourglass-big

    Matching Gift

    Double or even triple the value of your donation by asking your company to match your support for Emory.
    Learn more
  • 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.
    Learn more
  • calendar

    Lorem Ipsum

    Nulla ac laoreet quam. In hac habitasse platea dictumst. Donec at urna quam.
    Learn more
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>