Percy examples combination - patterns/ simple combinations

templates/docs/examples/patterns/accordion/combined.html

@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Accordion / Combined{% endblock %}
+
+{% block standalone_css %}patterns_accordion{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/accordion/default.html' %}</section>
+<section>{% include 'docs/examples/patterns/accordion/headings.html' %}</section>
+<section>{% include 'docs/examples/patterns/accordion/tick-elements.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/badge/combined.html

@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Badge / Combined{% endblock %}
+
+{% block standalone_css %}patterns_badge{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/badge/default.html' %}</section>
+<section>{% include 'docs/examples/patterns/badge/chips.html' %}</section>
+<section>{% include 'docs/examples/patterns/badge/colors.html' %}</section>
+<section>{% include 'docs/examples/patterns/badge/side-navigation.html' %}</section>
+<section>{% include 'docs/examples/patterns/badge/tabs.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/card/combined.html

@@ -0,0 +1,15 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Card / Combined{% endblock %}
+
+{% block standalone_css %}patterns_card{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/card/content-bleed.html' %}</section>
+<section>{% include 'docs/examples/patterns/card/default.html' %}</section>
+<section>{% include 'docs/examples/patterns/card/header.html' %}</section>
+<section>{% include 'docs/examples/patterns/card/highlighted.html' %}</section>
+<section>{% include 'docs/examples/patterns/card/image.html' %}</section>
+<section>{% include 'docs/examples/patterns/card/overlay.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/empty-state/combined.html

@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Empty state / Combined{% endblock %}
+
+{% block standalone_css %}patterns_empty-state{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/empty-state/error-management.html' %}</section>
+<section>{% include 'docs/examples/patterns/empty-state/no-content.html' %}</section>
+<section>{% include 'docs/examples/patterns/empty-state/user-triggered.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/equal-height-row/combined.html

@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Equal height row / Combined{% endblock %}
+
+{% block standalone_css %}patterns_equal-height-row{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/equal-height-row/3-column-row.html' %}</section>
+<section>{% include 'docs/examples/patterns/equal-height-row/4-items-per-column.html' %}</section>
+<section>{% include 'docs/examples/patterns/equal-height-row/default.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/grid/combined.html

@@ -0,0 +1,25 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / Combined{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/grid/25-25-25-25.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/25-25-50.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/25-75.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/25-75-mixed-responsive.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/25-75-responsive.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/50-50.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/bordered.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/default.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/empty-columns.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/full.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/incorrect-empty-columns.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/nested.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/nested-medium.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/nested-small.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/offsets.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/responsive.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/heading-icon/combined.html

@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Heading icon / Combined{% endblock %}
+
+{% block standalone_css %}patterns_heading-icon{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/heading-icon/heading-icon.html' %}</section>
+<section>{% include 'docs/examples/patterns/heading-icon/heading-icon-small.html' %}</section>
+<section>{% include 'docs/examples/patterns/heading-icon/heading-icon-stacked.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/headings/combined.html

@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Headings / Combined{% endblock %}
+
+{% block standalone_css %}patterns_headings{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/headings/default.html' %}</section>
+<section>{% include 'docs/examples/patterns/headings/display.html' %}</section>
+<section>{% include 'docs/examples/patterns/headings/mixed.html' %}</section>
+<section>{% include 'docs/examples/patterns/headings/muted.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/hero/combined.html

@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hero / Combined{% endblock %}
+
+{% block standalone_css %}patterns_hero{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/hero/hero-404.html' %}</section>
+<section>{% include 'docs/examples/patterns/hero/hero-blog.html' %}</section>
+<section>{% include 'docs/examples/patterns/hero/hero-heading-1.html' %}</section>
+<section>{% include 'docs/examples/patterns/hero/hero-heading-2.html' %}</section>
+<section>{% include 'docs/examples/patterns/hero/hero-line-breaks.html' %}</section>
+<section>{% include 'docs/examples/patterns/hero/hero-nested-grid.html' %}</section>
+<section>{% include 'docs/examples/patterns/hero/hero-rules.html' %}</section>
+<section>{% include 'docs/examples/patterns/hero/hero-sections.html' %}</section>
+<section>{% include 'docs/examples/patterns/hero/hero-sections-search.html' %}</section>
+<section>{% include 'docs/examples/patterns/hero/hero-signpost.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/image/combined.html

@@ -0,0 +1,15 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image / Combined{% endblock %}
+
+{% block standalone_css %}patterns_image{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/image/bordered.html' %}</section>
+<section>{% include 'docs/examples/patterns/image/caption.html' %}</section>
+<section>{% include 'docs/examples/patterns/image/shadowed.html' %}</section>
+<section>{% include 'docs/examples/patterns/image/spacing.html' %}</section>
+<section>{% include 'docs/examples/patterns/image/container/highlighted.html' %}</section>
+<section>{% include 'docs/examples/patterns/image/container/aspect-ratio/all.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/image/container/aspect-ratio/all.html

@@ -6,9 +6,7 @@
 {% block content %}
   <div>
     <span>16:9</span>
-    <div class="p-image-container--16-9 is-highlighted">
-      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
-    </div>
+    {% include 'docs/examples/patterns/image/container/aspect-ratio/16-9.html' %}
   </div>
   <div>
     <span>3:2</span>

templates/docs/examples/patterns/media-object/combined.html

@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Media object / Combined{% endblock %}
+
+{% block standalone_css %}patterns_media-object{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/media-object/media-object.html' %}</section>
+<section>{% include 'docs/examples/patterns/media-object/media-object-circ-img.html' %}</section>
+<section>{% include 'docs/examples/patterns/media-object/media-object-large.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/pagination/combined.html

@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Pagination / Combined{% endblock %}
+
+{% block standalone_css %}patterns_pagination{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/pagination/pagination.html' %}</section>
+<section>{% include 'docs/examples/patterns/pagination/pagination-deprecated.html' %}</section>
+<section>{% include 'docs/examples/patterns/pagination/pagination-disabled.html' %}</section>
+<section>{% include 'docs/examples/patterns/pagination/pagination-truncated.html' %}</section>
+<section>{% include 'docs/examples/patterns/pagination/pagination-verbose.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/pull-quotes/combined.html

@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Pull quote / Combined{% endblock %}
+
+{% block standalone_css %}patterns_pull-quotes{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/pull-quotes/default.html' %}</section>
+<section>{% include 'docs/examples/patterns/pull-quotes/default-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/pull-quotes/large.html' %}</section>
+<section>{% include 'docs/examples/patterns/pull-quotes/small.html' %}</section>
+<section>{% include 'docs/examples/patterns/pull-quotes/variants.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/section/combined.html

@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Section / Combined{% endblock %}
+
+{% block standalone_css %}patterns_section{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/section/deep.html' %}</section>
+<section>{% include 'docs/examples/patterns/section/hero.html' %}</section>
+<section>{% include 'docs/examples/patterns/section/section.html' %}</section>
+<section>{% include 'docs/examples/patterns/section/shallow.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/segmented-control/combined.html

@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Segmented control / Combined{% endblock %}
+
+{% block standalone_css %}patterns_segmented-control{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/segmented-control/default.html' %}</section>
+<section>{% include 'docs/examples/patterns/segmented-control/dense.html' %}</section>
+<section>{% include 'docs/examples/patterns/segmented-control/icons.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/strips/combined.html

@@ -0,0 +1,21 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strips / Combined{% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/strips/accent.html' %}</section>
+<section>{% include 'docs/examples/patterns/strips/dark.html' %}</section>
+<section>{% include 'docs/examples/patterns/strips/deep.html' %}</section>
+<section>{% include 'docs/examples/patterns/strips/highlighted.html' %}</section>
+<section>{% include 'docs/examples/patterns/strips/image.html' %}</section>
+<section>{% include 'docs/examples/patterns/strips/is-bordered.html' %}</section>
+<section>{% include 'docs/examples/patterns/strips/shallow.html' %}</section>
+<section>{% include 'docs/examples/patterns/strips/strips-dark.html' %}</section>
+<section>{% include 'docs/examples/patterns/strips/strips-light.html' %}</section>
+<section>{% include 'docs/examples/patterns/strips/suru.html' %}</section>
+<section>{% include 'docs/examples/patterns/strips/suru-topped.html' %}</section>
+<section>{% include 'docs/examples/patterns/strips/white.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/tab-buttons/combined.html

@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Tab Buttons / Combined{% endblock %}
+
+{% block standalone_css %}patterns_segmented-control{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/tab-buttons/default.html' %}</section>
+<section>{% include 'docs/examples/patterns/tab-buttons/dense.html' %}</section>
+<section>{% include 'docs/examples/patterns/tab-buttons/icons.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/table-of-contents/combined.html

@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table of Contents / Combined{% endblock %}
+
+{% block standalone_css %}patterns_table-of-contents{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/table-of-contents/default.html' %}</section>
+<section>{% include 'docs/examples/patterns/table-of-contents/sections.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/tooltips/combined.html

@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Tooltips / Combined{% endblock %}
+
+{% block standalone_css %}patterns_tooltips{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/tooltips/default.html' %}</section>
+<section>{% include 'docs/examples/patterns/tooltips/detached.html' %}</section>
+{% endwith %}
+{% endblock %}