diff --git a/src/patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig b/src/patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b28bb84205704f2370bf19b8374b1e8ed2a9732b
--- /dev/null
+++ b/src/patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig
@@ -0,0 +1,6 @@
+{% for info in lists[type] %}
+ {% include '@components/card/card--teaser/_card--teaser.twig' with {
+ 'teaser': info,
+ 'type': 'teaser',
+ } %}
+{% endfor %}
diff --git a/src/patterns/04-components/multi-type-list/_multi-type-list.scss b/src/patterns/04-components/multi-type-list/_multi-type-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f623f932cb2fa1b6fdaf4e74d16857c78b437715
--- /dev/null
+++ b/src/patterns/04-components/multi-type-list/_multi-type-list.scss
@@ -0,0 +1,5 @@
+.uw-multi-type-list__button {
+ display: block;
+ text-align: center;
+ width: 100%;
+}
diff --git a/src/patterns/04-components/multi-type-list/multi-type-list.twig b/src/patterns/04-components/multi-type-list/multi-type-list.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b37a42eaf7204c796fdd7b3625d6aa339f45d984
--- /dev/null
+++ b/src/patterns/04-components/multi-type-list/multi-type-list.twig
@@ -0,0 +1,72 @@
+{% set content_list = [] %}
+{% for type, list in lists %}
+ {% set content_list = content_list|merge([type]) %}
+{% endfor %}
+
+{% set button_modifier_classes -%}
+ button button--large {{ modifier_classes }}
+{%- endset %}
+
+{% embed '@components/tabs/_tabs.twig' with {
+ 'tab_type': 'content',
+ 'content_list': content_list,
+ 'button_modifier_classes': button_modifier_classes,
+} %}
+
+ {% for type, list in lists %}
+ {% for info in list %}
+
+ {% if loop.parent.loop.index == 1 %}
+ {% block content_area_1 %}
+ {% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
+ 'type': type,
+ 'lists': lists,
+ } %}
+ {% if view_all %}
+ <div class="uw-multi-type-list__button">
+ {% include '@components/button/button--large/button--large.twig' with {
+ 'url': view_all[type].url,
+ 'text': view_all[type].text,
+ } %}
+ </div>
+ {% endif %}
+ {% endblock %}
+ {% elseif loop.parent.loop.index == 2 %}
+ {% block content_area_2 %}
+ {% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
+ 'type': type,
+ 'lists': lists,
+ 'view_all': view_all,
+ } %}
+ {% if view_all %}
+ <div class="uw-multi-type-list__button">
+ {% include '@components/button/button--large/button--large.twig' with {
+ 'url': view_all[type].url,
+ 'text': view_all[type].text,
+ } %}
+ </div>
+ {% endif %}
+ {% endblock %}
+ {% elseif loop.parent.loop.index == 3 %}
+ {% block content_area_3 %}
+ {% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
+ 'type': type,
+ 'lists': lists,
+ 'view_all': view_all,
+ } %}
+ {% if view_all %}
+ <div class="uw-multi-type-list__button">
+ {% include '@components/button/button--large/button--large.twig' with {
+ 'url': view_all[type].url,
+ 'text': view_all[type].text,
+ } %}
+ </div>
+ {% endif %}
+ {% endblock %}
+ {% endif %}
+
+ {% endfor %}
+
+ {% endfor %}
+
+{% endembed %}
\ No newline at end of file
diff --git a/src/patterns/04-components/multi-type-list/multi-type-list.yml b/src/patterns/04-components/multi-type-list/multi-type-list.yml
new file mode 100644
index 0000000000000000000000000000000000000000..75115ab20b8fd6865a266567b39584e31d584f19
--- /dev/null
+++ b/src/patterns/04-components/multi-type-list/multi-type-list.yml
@@ -0,0 +1,502 @@
+lists:
+ blog:
+ -
+ url: '#'
+ bundle: 'blog'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Blog Teaser 1'
+ author:
+ name: 'Blog Author'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ image:
+ type: 'listing_image'
+ sources:
+ - srcset: '../../images/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../images/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ -
+ url: '#'
+ bundle: 'blog'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Blog Teaser 2'
+ author:
+ name: 'Blog Author'
+ link: '#'
+ footer:
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ image:
+ type: 'listing_image'
+ sources:
+ - srcset: '../../images/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../images/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ -
+ url: '#'
+ bundle: 'blog'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Blog Teaser 3'
+ author:
+ name: 'Blog Author'
+ link: '#'
+ footer:
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ image:
+ type: 'listing_image'
+ sources:
+ - srcset: '../../images/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../images/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ news:
+ -
+ url: '#'
+ bundle: 'news'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'News Teaser 1'
+ author:
+ name: 'News Author'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ image:
+ type: 'listing_image'
+ sources:
+ - srcset: '../../images/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../images/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ -
+ url: '#'
+ bundle: 'news'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'News Teaser 2'
+ author:
+ name: 'News Author'
+ link: '#'
+ footer:
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ image:
+ type: 'listing_image'
+ sources:
+ - srcset: '../../images/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../images/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ -
+ url: '#'
+ bundle: 'news'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'News Teaser 3'
+ author:
+ name: 'News Author'
+ link: '#'
+ footer:
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ image:
+ type: 'listing_image'
+ sources:
+ - srcset: '../../images/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../images/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ events:
+ -
+ url: '#'
+ bundle: 'event'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Event Teaser 1'
+ footer:
+ tags:
+ -
+ url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ image:
+ type: 'listing_image'
+ sources:
+ - srcset: '../../images/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../images/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ -
+ url: '#'
+ bundle: 'event'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Event Teaser 2'
+ footer:
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ image:
+ type: 'listing_image'
+ sources:
+ - srcset: '../../images/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../images/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ -
+ url: '#'
+ bundle: 'event'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Event Teaser 3'
+ footer:
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ image:
+ type: 'listing_image'
+ sources:
+ - srcset: '../../images/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../images/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../images/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'