Research Spotlight Card Container

This is a listing of Research Spotlight cards.

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

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

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

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

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