diff --git a/css/styles.css b/css/styles.css
index 35a40e388e739e26238e245eca7f6c012261e5be..798bdb8f3ff4ff86ebe30e9f8e257f202ae45bfa 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -3494,6 +3494,40 @@ 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__header h2 {
+ margin: 0; }
+ .card.banner .card__header .sub-title {
+ color: #fff;
+ font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; }
+
+.card.banner .card__media {
+ margin-bottom: 0; }
+
+.card.banner .card__title {
+ color: #fdd54f; }
+ .card.banner .card__title a {
+ color: #fdd54f;
+ font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ font-weight: 400;
+ letter-spacing: .045rem;
+ text-align: center;
+ text-decoration: none; }
+ .card.banner .card__title a:hover {
+ text-decoration: underline; }
+
.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..4809c83d1a23d6cd2ee002987756c3a870314e4f 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -1,3 +1,44 @@
+(function ($, Drupal) {
+ Drupal.behaviors.cardbanner = {
+ attach: function (context, settings) {
+ $(document).ready(function () {
+
+ // 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/banners/banners.js b/source/_patterns/04-components/banners/banners.js
new file mode 100644
index 0000000000000000000000000000000000000000..9e9a9d7c64c828d5a1919c7827b765f788d651fc
--- /dev/null
+++ b/source/_patterns/04-components/banners/banners.js
@@ -0,0 +1,40 @@
+(function ($, Drupal) {
+ Drupal.behaviors.cardbanner = {
+ attach: function (context, settings) {
+ $(document).ready(function () {
+
+ // 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/banners/banners.twig b/source/_patterns/04-components/banners/banners.twig
new file mode 100644
index 0000000000000000000000000000000000000000..be699f545343bfdfe8851b92e71f43fd041f4cb6
--- /dev/null
+++ b/source/_patterns/04-components/banners/banners.twig
@@ -0,0 +1,7 @@
+{% embed '@layouts/carousel/carousel.twig' %}
+ {% block content %}
+ {% include '@components/card/card--banner/card--banner.twig' with {
+ banners: banners,
+ } %}
+ {% endblock %}
+{% endembed %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/banners/banners.yml b/source/_patterns/04-components/banners/banners.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ba26c36a4477b7d2ef5a6499b82fc7d7281fbe48
--- /dev/null
+++ b/source/_patterns/04-components/banners/banners.yml
@@ -0,0 +1,73 @@
+banners:
+ images:
+ -
+ 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'
+ big_text: 'Image1'
+ small_text: 'Caption 1'
+ link: 'http://google.ca'
+ -
+ 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'
+ small_text: 'Image2'
+ -
+ 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'
+ link: 'http://google.ca'
+ autoplay: 1
+ slide_speed: 7000
+ style: 'full-width'
+ transition_speed: 400
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..c088c3907008b49bc1b8283b0d92af82d95aa24f
--- /dev/null
+++ b/source/_patterns/04-components/card/card--banner/_card--banner.scss
@@ -0,0 +1,49 @@
+.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%;
+
+ h2 {
+ margin: 0;
+ }
+
+ .sub-title {
+ color: $uw-white;
+ font-family: $header-font-family;
+
+ }
+ }
+
+ .card__media {
+ margin-bottom: 0;
+ }
+
+ .card__title {
+ color: $uw-gold;
+
+ a {
+ color: $uw-gold;
+ font-family: $header-font-family;
+ font-weight: 400;
+ letter-spacing: .045rem;
+ text-align: center;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+}
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..424f8504024af223c085f5f3a1d300fc02376917
--- /dev/null
+++ b/source/_patterns/04-components/card/card--banner/card--banner.md
@@ -0,0 +1,18 @@
+---
+el: .card--banner
+title: Card banner
+---
+__Variables:__
+* banners: [array] List of banners and associated settings.
+ * images [array]
+ * sources [array] List of source sets for picture element.
+ * img_element [string] URL to image fallback.
+ * alt [string]
+ * big_text [string] Text to be used as the title.
+ * small_text [string] Text to be used as the sub-title.
+ * link [string] URL to be used for the image,
+
+ * autoplay [integer] 1 or 0 to turn on autoplay of banners.
+ * slide_speed [integer] The speed for the transition of banners.
+ * style [string] The style to be used for the banners.
+ * transition_speed [integer] The speed of the transitions between banners.
\ No newline at end of file
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..037a5745539336df1354643dbe1c94a1a7163a94
--- /dev/null
+++ b/source/_patterns/04-components/card/card--banner/card--banner.twig
@@ -0,0 +1,12 @@
+{% for image in banners.images %}
+ {% include '@components/card/card.twig' with {
+ sources: image.sources,
+ img_element: image.img_element,
+ alt: image.alt,
+ type: 'banner',
+ title: image.big_text,
+ sub_title: image.small_text,
+ header_level: 2,
+ url: image.link,
+ } %}
+{% endfor %}
\ 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..44f6529d4db017a96eb7859d7df1ef1973e3ce05
--- /dev/null
+++ b/source/_patterns/04-components/card/card--banner/card--banner.yml
@@ -0,0 +1,74 @@
+banners:
+ images:
+ -
+ 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'
+ big_text: 'Image1'
+ small_text: 'Caption 1'
+ link: 'http://google.ca'
+ -
+ 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'
+ big_text: 'Image2'
+ -
+ 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'
+ big_text: 'Image3'
+ link: 'http://google.ca'
+ autoplay: 1
+ slide_speed: 7000
+ style: 'full-width'
+ transition_speed: 400
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 085eb596b703452328d4f9d93c4cd9fe1348bcc0..66d07abecba87810547fcd449aa0a217cb5184fb 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -1,82 +1,114 @@
{% 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>
+<article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ type }}" >
+ <div class="card__body">
+
+ {% if title or author or date or sub_title %}
+ <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 %}
+
+ {% if title or sub_title %}
+
+ {% if title %}
<h{{ header_level }} class="card__title">
+ {% if url %}
<a href="{{ url }}">
- {{ title }}
+ {% endif %}
+ {{ title }}
+ {% if url %}
</a>
+ {% endif %}
</h{{ header_level }}>
- <div class="card__author">
- {% if author_link %}
- by
- <a href="{{ author_link }}">
- {% endif %}
+ {% endif %}
- {{ author_name }}
+ {% if sub_title %}
+ <span class="sub-title">{{ sub_title }}</span>
+ {% endif %}
- {% if author_link %}
- </a>
- {% endif %}
- </div>
- </div>
- {% if sources or img_element %}
- <div class="card__media">
- {% if url %}
- <a href="{{ url }}">
+ {% endif %}
+
+ {% if author_name %}
+ <div class="card__author">
+ {% if author_link %}
+ by
+ <a href="{{ author_link }}">
{% endif %}
- {% include "@components/responsive-image/responsive-image.twig" with {
- sources: sources,
- img_element: img_element,
- alt: alt
- }%}
- {% if url %}
- </a>
+
+ {{ author_name }}
+
+ {% if author_link %}
+ </a>
{% endif %}
- </div>
+ </div>
{% endif %}
- <div class="card__content">
+
+ </div>
+ {% endif %}
+
+
+ {% 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>
+ {% 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>