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>