diff --git a/source/_patterns/04-components/banners/banners.twig b/source/_patterns/04-components/banners/banners.twig index be699f545343bfdfe8851b92e71f43fd041f4cb6..d546e2bb8ad52210907a24d74f1442c25f62ceae 100644 --- a/source/_patterns/04-components/banners/banners.twig +++ b/source/_patterns/04-components/banners/banners.twig @@ -1,7 +1,7 @@ {% embed '@layouts/carousel/carousel.twig' %} {% block content %} {% include '@components/card/card--banner/card--banner.twig' with { - banners: banners, + 'banners': banners, } %} {% endblock %} -{% endembed %} \ No newline at end of file +{% endembed %} diff --git a/source/_patterns/04-components/card/card--banner/_card--banner.scss b/source/_patterns/04-components/card/card--banner/_card--banner.scss index 09c6d9856dc5b0ce9294b14884db18f3ab4f0e55..b191f163c7f8a141cdbc98330b9f4c47016c2b20 100644 --- a/source/_patterns/04-components/card/card--banner/_card--banner.scss +++ b/source/_patterns/04-components/card/card--banner/_card--banner.scss @@ -49,9 +49,6 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat' position:relative; } - .card__content{ - display:none; - } .card__header { bottom: 0; diff --git a/source/_patterns/04-components/card/card--banner/card--banner.twig b/source/_patterns/04-components/card/card--banner/card--banner.twig index 2ccb9754762daa06fb7ff86ce3d693063d358515..2e31e0d0dd83429af946f7701fe1a39855065668 100644 --- a/source/_patterns/04-components/card/card--banner/card--banner.twig +++ b/source/_patterns/04-components/card/card--banner/card--banner.twig @@ -1,11 +1,7 @@ {% for image in banners.images %} {% include '@components/card/card.twig' with { - sources: image.sources, - img_element: image.img_element, - alt: image.alt, - card_type: 'banner', - title: image.big_text, - sub_title: image.small_text, - url: image.link, + 'banner': image, + 'show_header': 'no', + 'type': 'banner', } %} {% endfor %} diff --git a/source/_patterns/04-components/card/card-elements/_banner.twig b/source/_patterns/04-components/card/card-elements/_banner.twig new file mode 100644 index 0000000000000000000000000000000000000000..64db59fd2c4c653c2a383bbd08606c566159179a --- /dev/null +++ b/source/_patterns/04-components/card/card-elements/_banner.twig @@ -0,0 +1,30 @@ +{% if image.big_text or image.small_text %} + <div class="card__header"> + {% if image.big_text %} + <div class="card__title"> + {{ image.big_text }} + </div> + {% endif %} + {% if image.small_text %} + <span class="sub-title"> + {{ image.small_text }} + </span> + {% endif %} + </div> +{% endif %} + +<div class="card__banner"> + {% if image.url %} + <a href="{{ image.url }}"> + {% endif %} + + {% include "@components/responsive-image/responsive-image.twig" with { + sources: image.sources, + img_element: listing_image.img_element, + alt: listing_image.alt + }%} + + {% if url %} + </a> + {% endif %} +</div> diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig index 6754d838f741915b3042d403158024733e6a7daa..0a5439e4e3c6410b059ae97739bc84909e30c22a 100644 --- a/source/_patterns/04-components/card/card.twig +++ b/source/_patterns/04-components/card/card.twig @@ -7,6 +7,10 @@ {% endif %} {% endif %} +{% if show_header is null %} + {% set show_header = 'yes' %} +{% endif %} + <article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ type }}" > {% if hero_image %} @@ -16,10 +20,13 @@ {% endif %} <div class="card__body"> - {% include '@components/card/card-elements/_header.twig' with { - 'header': header, - 'show_title': show_title - } %} + + {% if show_header == 'yes' %} + {% include '@components/card/card-elements/_header.twig' with { + 'header': header, + 'show_title': show_title + } %} + {% endif %} {% if listing_image %} {% include '@components/card/card-elements/_listing-image.twig' with { @@ -27,10 +34,10 @@ } %} {% endif %} - {% if image and not card_type == 'banner' %} - <div class="card__image"> - <img src="{{ image }}" alt="{{ alt }}" /> - </div> + {% if banner %} + {% include '@components/card/card-elements/_banner.twig' with { + 'banner': banner + } %} {% endif %} {% if content %}