diff --git a/css/styles.css b/css/styles.css
index 35a40e388e739e26238e245eca7f6c012261e5be..b1491a75f6d7c1cd9fee5da981542c2e310ae093 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -3494,6 +3494,30 @@ button {
.card--feature .card__media {
order: initial; } }
+.card.banner .card__body {
+ padding: 0; }
+
+.card.banner .card__header {
+ background-color: rgba(0, 0, 0, 0.8);
+ bottom: 0;
+ display: block;
+ height: auto;
+ opacity: 1;
+ padding: 1rem 2rem;
+ position: absolute;
+ text-align: center;
+ width: 100%; }
+
+.card.banner .card__media {
+ margin-bottom: 0; }
+
+.card.banner .card__title a {
+ color: #fdd54f;
+ font-family: "BureauGrotCond Book","Barlow Condensed",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
+ font-weight: 400;
+ letter-spacing: .045rem;
+ text-align: center; }
+
.uw-colour-bar__cbarorg-default__uw-gold--lvl1 {
background-color: #fffaaa; }
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index 6ee94a30144da215a9420501aeb166cf593b30eb..ba3f6ea42c8ef589f811934a2768dcbb8334d8eb 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -297,6 +297,48 @@ else {
}
})(jQuery, Drupal);
+(function ($, Drupal) {
+ Drupal.behaviors.cardbanner = {
+ attach: function (context, settings) {
+ $(document).ready(function () {
+
+ console.log('HERE1');
+ // Step through each FF on the page.
+ $('.card.banner').each(function () {
+
+ // Get the number of items for the carousel, if any.
+ var num_of_items = 1;
+
+ // Add the carousel to the FF using the id.
+ $('.owl-carousel').owlCarousel({
+ margin: 10,
+ nav: true,
+ navContainerClass: 'uw-owl-nav',
+ navText:[
+ '‹ prev',
+ 'next ›'
+ ],
+ responsiveClass: true,
+ responsive: {
+ 0: {
+ items: 1
+ },
+ 600: {
+ items: num_of_items <= 2 ? (num_of_items - 1 > 0) ? num_of_items - 1 : 1 : 2
+
+ },
+ 1000: {
+ items: num_of_items
+
+ }
+ }
+ });
+ });
+ });
+ }
+ };
+})(jQuery, Drupal);
+
/**
* @file
*/
diff --git a/source/_patterns/04-components/card/card--banner/_card--banner.scss b/source/_patterns/04-components/card/card--banner/_card--banner.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9a32b64fec01fc1e8029e5f6774aa48619d0026e
--- /dev/null
+++ b/source/_patterns/04-components/card/card--banner/_card--banner.scss
@@ -0,0 +1,32 @@
+.card.banner {
+
+ .card__body {
+ padding: 0;
+ }
+
+ .card__header {
+ background-color: rgba(0,0,0,.8);
+ bottom: 0;
+ display: block;
+ height: auto;
+ opacity: 1;
+ padding: 1rem 2rem;
+ position: absolute;
+ text-align: center;
+ width: 100%;
+ }
+
+ .card__media {
+ margin-bottom: 0;
+ }
+
+ .card__title {
+ a {
+ color: $uw-gold;
+ font-family: "BureauGrotCond Book","Barlow Condensed",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
+ font-weight: 400;
+ letter-spacing: .045rem;
+ text-align: center;
+ }
+ }
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/card/card--banner/card--banner.js b/source/_patterns/04-components/card/card--banner/card--banner.js
new file mode 100644
index 0000000000000000000000000000000000000000..dc64cac641f503fffec80b3c3bafeb62b1dfda4d
--- /dev/null
+++ b/source/_patterns/04-components/card/card--banner/card--banner.js
@@ -0,0 +1,41 @@
+(function ($, Drupal) {
+ Drupal.behaviors.cardbanner = {
+ attach: function (context, settings) {
+ $(document).ready(function () {
+
+ console.log('HERE1');
+ // Step through each FF on the page.
+ $('.card.banner').each(function () {
+
+ // Get the number of items for the carousel, if any.
+ var num_of_items = 1;
+
+ // Add the carousel to the FF using the id.
+ $('.owl-carousel').owlCarousel({
+ margin: 10,
+ nav: true,
+ navContainerClass: 'uw-owl-nav',
+ navText:[
+ '‹ prev',
+ 'next ›'
+ ],
+ responsiveClass: true,
+ responsive: {
+ 0: {
+ items: 1
+ },
+ 600: {
+ items: num_of_items <= 2 ? (num_of_items - 1 > 0) ? num_of_items - 1 : 1 : 2
+
+ },
+ 1000: {
+ items: num_of_items
+
+ }
+ }
+ });
+ });
+ });
+ }
+ };
+})(jQuery, Drupal);
diff --git a/source/_patterns/04-components/card/card--banner/card--banner.md b/source/_patterns/04-components/card/card--banner/card--banner.md
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/source/_patterns/04-components/card/card--banner/card--banner.twig b/source/_patterns/04-components/card/card--banner/card--banner.twig
new file mode 100644
index 0000000000000000000000000000000000000000..cdc949e2918877bb8be4ad794f6f7fd0597f725d
--- /dev/null
+++ b/source/_patterns/04-components/card/card--banner/card--banner.twig
@@ -0,0 +1,15 @@
+{% embed '@layouts/carousel/carousel.twig' %}
+ {% block content %}
+ {% for image in images %}
+ {% for img in image %}
+ {% include '@components/card/card.twig' with {
+ sources: img.sources,
+ img_element: img.img_element,
+ type: 'banner',
+ title: img.title,
+ header_level: 2,
+ } %}
+ {% endfor %}
+ {% endfor %}
+ {% endblock %}
+{% endembed %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/card/card--banner/card--banner.yml b/source/_patterns/04-components/card/card--banner/card--banner.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e9549c06bb58181b2811274df218f2db76c87de5
--- /dev/null
+++ b/source/_patterns/04-components/card/card--banner/card--banner.yml
@@ -0,0 +1,69 @@
+images:
+ -
+ image:
+ sources:
+ -
+ srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ -
+ srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ -
+ srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ -
+ srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ -
+ srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text'
+ title: 'Image1'
+ -
+ image:
+ sources:
+ - srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text'
+ title: 'Image2'
+ -
+ image:
+ sources:
+ - srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text'
+ title: 'Image3'
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 085eb596b703452328d4f9d93c4cd9fe1348bcc0..08a4e850e2d6b331cc90509039f623f57cd8a946 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -1,82 +1,99 @@
{% import '@base/macros/uw.macro.twig' as macros %}
-<article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %}" >
- <div class="card__body">
- <div class="card__header">
- {% if date %}
- <div class="card__date">
- {% if date is iterable %}
- {% for d in date %}
- {% include "@base/date-formats/_date-format.twig" with {
- 'date_format': date_format,
- 'date': d
- }%}
- {% endfor %}
- {% else %}
- {% include "@base/date-formats/_date-format.twig" with {
- 'date_format': date_format,
- 'date': date
- }%}
- {% endif %}
- </div>
- {% endif %}
- <h{{ header_level }} class="card__title">
- <a href="{{ url }}">
- {{ title }}
- </a>
- </h{{ header_level }}>
- <div class="card__author">
- {% if author_link %}
- by
- <a href="{{ author_link }}">
- {% endif %}
+<article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ type }}" >
+ <div class="card__body">
+ <div class="card__header">
+ {% if date %}
+ <div class="card__date">
+ {% if date is iterable %}
+ {% for d in date %}
+ {% include "@base/date-formats/_date-format.twig" with {
+ 'date_format': date_format,
+ 'date': d
+ }%}
+ {% endfor %}
+ {% else %}
+ {% include "@base/date-formats/_date-format.twig" with {
+ 'date_format': date_format,
+ 'date': date
+ }%}
+ {% endif %}
+ </div>
+ {% endif %}
- {{ author_name }}
+ {% if title %}
+ <h{{ header_level }} class="card__title">
+ <a href="{{ url }}">
+ {{ title }}
+ </a>
+ </h{{ header_level }}>
+ {% endif %}
- {% if author_link %}
- </a>
- {% endif %}
- </div>
- </div>
- {% if sources or img_element %}
- <div class="card__media">
- {% if url %}
- <a href="{{ url }}">
- {% endif %}
- {% include "@components/responsive-image/responsive-image.twig" with {
- sources: sources,
- img_element: img_element,
- alt: alt
- }%}
- {% if url %}
+ {% if author_name %}
+ <div class="card__author">
+ {% if author_link %}
+ by
+ <a href="{{ author_link }}">
+ {% endif %}
+
+ {{ author_name }}
+
+ {% if author_link %}
</a>
- {% endif %}
+ {% endif %}
</div>
+ {% endif %}
+
+ </div>
+
+
+ {% if sources or img_element %}
+ <div class="card__media">
+ {% if url %}
+ <a href="{{ url }}">
+ {% endif %}
+
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: sources,
+ img_element: img_element,
+ alt: alt
+ } %}
+
+ {% if url %}
+ </a>
{% endif %}
- <div class="card__content">
+ </div>
+ {% endif %}
+
+ {% if content %}
+ <div class="card__content">
{{ content }}
- </div>
- {% if footer or read_more or tags or social_media %}
- <div class="card__footer">
- {{ footer }}
- {% if tags %}
- <div class="card__tags">
+ </div>
+ {% endif %}
+
+ {% if footer or read_more or tags or social_media %}
+ <div class="card__footer">
+ {{ footer }}
+ {% if tags %}
+ <div class="card__tags">
{% include "@components/tag-list/tag-list.twig" with {
- items: tags
- } %}
- </div>
- {% endif %}
- {% if read_more and url %}
- <div class="card__readmore">
+ items: tags
+ } %}
+ </div>
+ {% endif %}
+
+ {% if read_more and url %}
+ <div class="card__readmore">
{{ macros.readmore(url, title) }}
- </div>
- {% endif %}
- {% if social_media %}
- <div class="card__social {{ social_media_placement }}">
+ </div>
+ {% endif %}
+
+ {% if social_media %}
+ <div class="card__social {{ social_media_placement }}">
{% include "@components/menu/menu--social/menu--social.twig" %}
- </div>
- {% endif %}
- </div>
+ </div>
{% endif %}
- </div>
-</article>
\ No newline at end of file
+ </div>
+ {% endif %}
+ </div>
+</article>