From 7eb67de62292c73bb97db19981455ce7fcebbb36 Mon Sep 17 00:00:00 2001 From: Muhammad Ali Date: Mon, 21 Apr 2025 13:03:12 +0500 Subject: [PATCH 1/9] feat: add image to tiered list (full width or default) --- templates/_macros/vf_tiered-list.jinja | 56 +++++++++-- .../patterns/tiered-list/combined.html | 2 + .../tiered-list/with-default-width-image.html | 98 +++++++++++++++++++ .../tiered-list/with-full-width-image.html | 98 +++++++++++++++++++ templates/docs/patterns/tiered-list/index.md | 40 ++++++++ 5 files changed, 287 insertions(+), 7 deletions(-) create mode 100644 templates/docs/examples/patterns/tiered-list/with-default-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/with-full-width-image.html diff --git a/templates/_macros/vf_tiered-list.jinja b/templates/_macros/vf_tiered-list.jinja index c953afe95..e081056a8 100644 --- a/templates/_macros/vf_tiered-list.jinja +++ b/templates/_macros/vf_tiered-list.jinja @@ -3,22 +3,27 @@ # desktop vs. 50/50 split between title/description # is_list_full_width_on_tablet: whether list title/description each have their # own row on tablet vs. 50/50 split between title/description +# is_image_full_width: whether the image is full width # Slots # title: top-level title element # description: top-level description element +# image: top-level image element # list_item_title_[1-25]: title element of each child list item # list_item_description_[1-25]: description element of each child list item # cta: CTA block element {% macro vf_tiered_list( is_description_full_width_on_desktop=true, - is_list_full_width_on_tablet=true) -%} + is_list_full_width_on_tablet=true, + is_image_full_width=false) -%} {%- set title_content = caller('title') -%} {%- set description_content = caller('description') -%} {%- set has_description = description_content|trim|length > 0 -%} + {%- set image = caller('image') -%} + {%- set has_image = image|trim|length > 0 -%} {%- set cta_content = caller('cta') -%} {%- set has_cta = cta_content|trim|length > 0 -%} -
+
{% if has_description == true -%} @@ -55,6 +60,22 @@
{%- endif %} + {% if has_image -%} +
+ {%- if is_image_full_width -%} +
+ {{ image }} +
+ {%- else -%} +
+
+ {{ image }} +
+
+ {%- endif -%} +
+ {%- endif -%} + {#- When there is a CTA, we use shallow spacing to space the list away from the CTA. When there is no CTA, shallow spacing would combine with the pattern-level p-section padding, which introduces too much space. @@ -111,14 +132,35 @@ {%- endif -%} {% if has_cta == true -%} -
-
-
-

+

{# This div adds the shallow spacing around the CTA #} +
+
{{ cta_content }} -

+
{%- endif %}
{%- endmacro %} + + {%- if image -%} +
+ {%- if is_image_full_width -%} +
+ {{ image }} +
+ {%- else -%} +
+
+ {{ image }} +
+
+ {%- endif -%} +
+ {%- endif -%} + + {#- + When there is a CTA, we use shallow spacing to space the list away from the CTA. + When there is no CTA, shallow spacing would combine with the pattern-level p-section padding, which introduces too much space. + -#} + {%- if has_cta -%} \ No newline at end of file diff --git a/templates/docs/examples/patterns/tiered-list/combined.html b/templates/docs/examples/patterns/tiered-list/combined.html index de190205c..4cad501cd 100644 --- a/templates/docs/examples/patterns/tiered-list/combined.html +++ b/templates/docs/examples/patterns/tiered-list/combined.html @@ -15,5 +15,7 @@
{% include 'docs/examples/patterns/tiered-list/full-width-without-description.html' %}
{% include 'docs/examples/patterns/tiered-list/full-width-with-description.html' %}
{% include 'docs/examples/patterns/tiered-list/full-width-with-description-without-cta.html' %}
+
{% include 'docs/examples/patterns/tiered-list/with-default-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/with-full-width-image.html' %}
{% endwith %} {% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/with-default-width-image.html new file mode 100644 index 000000000..9d981b564 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/with-default-width-image.html @@ -0,0 +1,98 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on desktop with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_image_full_width=false) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == "image" -%} +
+ {{ image(url="https://assets.ubuntu.com/v1/3f63a18c-data-center.png", + alt="", + width="2464", + height="1028", + hi_def=True, + loading="lazy", + attrs={"class": "p-image-container__image"} + ) | safe + }} +
+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/with-full-width-image.html new file mode 100644 index 000000000..e86bbd719 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/with-full-width-image.html @@ -0,0 +1,98 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on desktop with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_image_full_width=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == "image" -%} +
+ {{ image(url="https://assets.ubuntu.com/v1/3f63a18c-data-center.png", + alt="", + width="2464", + height="1028", + hi_def=True, + loading="lazy", + attrs={"class": "p-image-container__image"} + ) | safe + }} +
+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/patterns/tiered-list/index.md b/templates/docs/patterns/tiered-list/index.md index 26792c6e0..66697136b 100644 --- a/templates/docs/patterns/tiered-list/index.md +++ b/templates/docs/patterns/tiered-list/index.md @@ -20,6 +20,8 @@ from a variety of tiered list layouts: - [50/50 with description](#5050-with-description) - [Full-width without description](#full-width-without-description) - [Full-width with description](#full-width-with-description) +- [Default-width image](#full-width-with-description) +- [Full-width image](#full-width-with-description) The tiered list pattern is composed of the following elements: @@ -27,6 +29,7 @@ The tiered list pattern is composed of the following elements: | --------------------- | ----------------------------------------------------------------------------------- | | Title (**required**) | h2 title text | | Description | p description text with optional [CTA block](/docs/patterns/cta-block) | +| Image (optional) | Image to show under description | | List item title | Title text/content | | List item description | Description text/content with optional [CTA block](/docs/patterns/cta-block) | | Call to action block | [CTA block](/docs/patterns/cta-block) beneath the list | @@ -89,6 +92,26 @@ respectively. View example of the tiered list pattern
+## With default width image + +This variant contains a top-level description, and its title, description, and +child list are presented full-width on desktop and tablet screen sizes +respectively. Additionally, it also contains an image with a default width under the title and description. + +
+View example of the tiered list pattern +
+ +## With full width image + +This variant contains a top-level description, and its title, description, and +child list are presented full-width on desktop and tablet screen sizes +respectively. Additionally, it also contains an image with full width under the title and description. + +
+View example of the tiered list pattern +
+ ## Additional CTA options In addition to the CTA block placed below the list, you may also add CTA blocks @@ -155,6 +178,23 @@ The `vf_tiered_list` Jinja macro can be used to generate a tiered list pattern. Whether the list element should be full-width on tablet + + + is_image_full_width + + + No + + + boolean + + + false + + + Whether the image should be full-width + +
From 23bebb08c82d5855578643c227e9b944290cac91 Mon Sep 17 00:00:00 2001 From: Muhammad Ali Date: Tue, 22 Apr 2025 09:55:48 +0500 Subject: [PATCH 2/9] Addressed review comments --- templates/_macros/vf_tiered-list.jinja | 2 +- .../patterns/tiered-list/with-default-width-image.html | 4 ++-- .../examples/patterns/tiered-list/with-full-width-image.html | 4 ++-- templates/docs/patterns/tiered-list/index.md | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/templates/_macros/vf_tiered-list.jinja b/templates/_macros/vf_tiered-list.jinja index e081056a8..240640102 100644 --- a/templates/_macros/vf_tiered-list.jinja +++ b/templates/_macros/vf_tiered-list.jinja @@ -67,7 +67,7 @@ {{ image }} {%- else -%} -
+
{{ image }}
diff --git a/templates/docs/examples/patterns/tiered-list/with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/with-default-width-image.html index 9d981b564..42b0d8297 100644 --- a/templates/docs/examples/patterns/tiered-list/with-default-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/with-default-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on desktop with description{% endblock %} +{% block title %}Tiered list / 50/50 with default width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} @@ -19,7 +19,7 @@

H2 - up to two lines; ideally one.

{%- endif -%} {%- if slot == "image" -%} -
+
{{ image(url="https://assets.ubuntu.com/v1/3f63a18c-data-center.png", alt="", width="2464", diff --git a/templates/docs/examples/patterns/tiered-list/with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/with-full-width-image.html index e86bbd719..e9d8dbe42 100644 --- a/templates/docs/examples/patterns/tiered-list/with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/with-full-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on desktop with description{% endblock %} +{% block title %}Tiered list / 50/50 with full width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} @@ -19,7 +19,7 @@

H2 - up to two lines; ideally one.

{%- endif -%} {%- if slot == "image" -%} -
+
{{ image(url="https://assets.ubuntu.com/v1/3f63a18c-data-center.png", alt="", width="2464", diff --git a/templates/docs/patterns/tiered-list/index.md b/templates/docs/patterns/tiered-list/index.md index 66697136b..0670dcfb4 100644 --- a/templates/docs/patterns/tiered-list/index.md +++ b/templates/docs/patterns/tiered-list/index.md @@ -96,7 +96,7 @@ View example of the tiered list pattern This variant contains a top-level description, and its title, description, and child list are presented full-width on desktop and tablet screen sizes -respectively. Additionally, it also contains an image with a default width under the title and description. +respectively. Additionally, this variant features a default width image positioned beneath the title and description.
View example of the tiered list pattern @@ -106,7 +106,7 @@ View example of the tiered list pattern This variant contains a top-level description, and its title, description, and child list are presented full-width on desktop and tablet screen sizes -respectively. Additionally, it also contains an image with full width under the title and description. +respectively. Additionally, this variant features a full width image positioned beneath the title and description.
View example of the tiered list pattern From 07227174e1934fc1eec6b7b94d71387f5a299ec1 Mon Sep 17 00:00:00 2001 From: Muhammad Ali Date: Wed, 23 Apr 2025 11:05:08 +0500 Subject: [PATCH 3/9] All images within tiered lists to have p-image-container--cinematic aspect ratio --- templates/_macros/vf_tiered-list.jinja | 12 ++++++++---- .../tiered-list/with-default-width-image.html | 2 -- .../patterns/tiered-list/with-full-width-image.html | 2 -- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/templates/_macros/vf_tiered-list.jinja b/templates/_macros/vf_tiered-list.jinja index 240640102..ba56b919f 100644 --- a/templates/_macros/vf_tiered-list.jinja +++ b/templates/_macros/vf_tiered-list.jinja @@ -63,13 +63,17 @@ {% if has_image -%}
{%- if is_image_full_width -%} -
- {{ image }} -
+
+
+ {{ image }} +
+
{%- else -%}
- {{ image }} +
+ {{ image }} +
{%- endif -%} diff --git a/templates/docs/examples/patterns/tiered-list/with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/with-default-width-image.html index 42b0d8297..74c21ace7 100644 --- a/templates/docs/examples/patterns/tiered-list/with-default-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/with-default-width-image.html @@ -19,7 +19,6 @@

H2 - up to two lines; ideally one.

{%- endif -%} {%- if slot == "image" -%} -
{{ image(url="https://assets.ubuntu.com/v1/3f63a18c-data-center.png", alt="", width="2464", @@ -29,7 +28,6 @@

H2 - up to two lines; ideally one.

attrs={"class": "p-image-container__image"} ) | safe }} -
{%- endif -%} {%- if slot == 'list_item_title_1' -%} diff --git a/templates/docs/examples/patterns/tiered-list/with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/with-full-width-image.html index e9d8dbe42..1cde1d737 100644 --- a/templates/docs/examples/patterns/tiered-list/with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/with-full-width-image.html @@ -19,7 +19,6 @@

H2 - up to two lines; ideally one.

{%- endif -%} {%- if slot == "image" -%} -
{{ image(url="https://assets.ubuntu.com/v1/3f63a18c-data-center.png", alt="", width="2464", @@ -29,7 +28,6 @@

H2 - up to two lines; ideally one.

attrs={"class": "p-image-container__image"} ) | safe }} -
{%- endif -%} {%- if slot == 'list_item_title_1' -%} From 5d37f7bc17df05a2b71c2b555e12142c5a658caa Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Mon, 9 Jun 2025 12:13:32 -0400 Subject: [PATCH 4/9] resolve rebases --- templates/_macros/vf_tiered-list.jinja | 32 +++----------------------- 1 file changed, 3 insertions(+), 29 deletions(-) diff --git a/templates/_macros/vf_tiered-list.jinja b/templates/_macros/vf_tiered-list.jinja index ba56b919f..cee012fb1 100644 --- a/templates/_macros/vf_tiered-list.jinja +++ b/templates/_macros/vf_tiered-list.jinja @@ -64,16 +64,12 @@
{%- if is_image_full_width -%}
-
- {{ image }} -
+ {{ image }}
{%- else -%}
-
- {{ image }} -
+ {{ image }}
{%- endif -%} @@ -136,7 +132,7 @@ {%- endif -%} {% if has_cta == true -%} -
{# This div adds the shallow spacing around the CTA #} +
{{ cta_content }} @@ -146,25 +142,3 @@ {%- endif %}
{%- endmacro %} - - {%- if image -%} -
- {%- if is_image_full_width -%} -
- {{ image }} -
- {%- else -%} -
-
- {{ image }} -
-
- {%- endif -%} -
- {%- endif -%} - - {#- - When there is a CTA, we use shallow spacing to space the list away from the CTA. - When there is no CTA, shallow spacing would combine with the pattern-level p-section padding, which introduces too much space. - -#} - {%- if has_cta -%} \ No newline at end of file From 938d051fb14543668039c6137662a325535bccec Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Mon, 9 Jun 2025 12:45:10 -0400 Subject: [PATCH 5/9] Add default/full-width/video use case, many examples for test coverage docs --- releases.yml | 4 + templates/_macros/vf_tiered-list.jinja | 135 ++++++++++++++---- ...efault-width-image-before-description.html | 93 ++++++++++++ ...cription-cta-with-default-width-image.html | 93 ++++++++++++ ...h-full-width-image-before-description.html | 96 +++++++++++++ ...description-cta-with-full-width-image.html | 96 +++++++++++++ ...fault-width-image-before-description.html} | 12 +- ...-description-with-default-width-image.html | 88 ++++++++++++ ...h-full-width-image-before-description.html | 90 ++++++++++++ ...th-description-with-full-width-image.html} | 22 ++- ...efault-width-image-before-description.html | 88 ++++++++++++ ...-description-with-default-width-image.html | 88 ++++++++++++ ...h-full-width-image-before-description.html | 90 ++++++++++++ ...ith-description-with-full-width-image.html | 90 ++++++++++++ ...efault-width-image-before-description.html | 81 +++++++++++ ...-description-with-default-width-image.html | 81 +++++++++++ ...h-full-width-image-before-description.html | 83 +++++++++++ ...out-description-with-full-width-image.html | 83 +++++++++++ ...efault-width-image-before-description.html | 88 ++++++++++++ ...-description-with-default-width-image.html | 88 ++++++++++++ ...h-full-width-image-before-description.html | 90 ++++++++++++ ...ith-description-with-full-width-image.html | 90 ++++++++++++ ...efault-width-image-before-description.html | 83 +++++++++++ ...-without-cta-with-default-width-image.html | 83 +++++++++++ ...h-full-width-image-before-description.html | 85 +++++++++++ ...ion-without-cta-with-full-width-image.html | 85 +++++++++++ .../patterns/tiered-list/combined.html | 43 +++++- ...efault-width-image-before-description.html | 88 ++++++++++++ ...-description-with-default-width-image.html | 88 ++++++++++++ ...h-full-width-image-before-description.html | 90 ++++++++++++ ...ith-description-with-full-width-image.html | 90 ++++++++++++ ...efault-width-image-before-description.html | 83 +++++++++++ ...-without-cta-with-default-width-image.html | 83 +++++++++++ ...h-full-width-image-before-description.html | 85 +++++++++++ ...ion-without-cta-with-full-width-image.html | 85 +++++++++++ ...efault-width-image-before-description.html | 81 +++++++++++ ...-description-with-default-width-image.html | 81 +++++++++++ ...h-full-width-image-before-description.html | 83 +++++++++++ ...out-description-with-full-width-image.html | 83 +++++++++++ .../examples/patterns/tiered-list/video.html | 88 ++++++++++++ templates/docs/patterns/tiered-list/index.md | 104 ++++++++++++-- 41 files changed, 3294 insertions(+), 66 deletions(-) create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html rename templates/docs/examples/patterns/tiered-list/{with-default-width-image.html => 50-50-desktop-with-description-with-default-width-image-before-description.html} (89%) create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html rename templates/docs/examples/patterns/tiered-list/{with-full-width-image.html => 50-50-desktop-with-description-with-full-width-image.html} (87%) create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html create mode 100644 templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html create mode 100644 templates/docs/examples/patterns/tiered-list/video.html diff --git a/releases.yml b/releases.yml index 6a3c35fe1..081679ebd 100644 --- a/releases.yml +++ b/releases.yml @@ -1,5 +1,9 @@ - version: 4.25.0 features: + - component: Tiered list + url: /docs/patterns/tiered-list + status: Updated + notes: We've added support for embedding images or videos to the tiered list pattern. - component: CTA Block url: /docs/patterns/cta-block status: Updated diff --git a/templates/_macros/vf_tiered-list.jinja b/templates/_macros/vf_tiered-list.jinja index cee012fb1..8674f08b0 100644 --- a/templates/_macros/vf_tiered-list.jinja +++ b/templates/_macros/vf_tiered-list.jinja @@ -3,31 +3,90 @@ # desktop vs. 50/50 split between title/description # is_list_full_width_on_tablet: whether list title/description each have their # own row on tablet vs. 50/50 split between title/description -# is_image_full_width: whether the image is full width +# is_media_full_width: whether the media is full width +# media_placement: where the image is placed relative to the description. Options are "after_description" or "before_description". # Slots # title: top-level title element # description: top-level description element -# image: top-level image element +# video: top-level video element. Mutually exclusive with image, and takes priority over the image. +# image: top-level image element. Mutually exclusive with video. Is not rendered if the video is provided. # list_item_title_[1-25]: title element of each child list item # list_item_description_[1-25]: description element of each child list item # cta: CTA block element {% macro vf_tiered_list( is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, - is_image_full_width=false) -%} + is_media_full_width=false, + media_placement="after_description" + ) -%} {%- set title_content = caller('title') -%} {%- set description_content = caller('description') -%} {%- set has_description = description_content|trim|length > 0 -%} - {%- set image = caller('image') -%} - {%- set has_image = image|trim|length > 0 -%} + {%- set image_content = caller('image') -%} + {%- set has_image = image_content|trim|length > 0 -%} {%- set cta_content = caller('cta') -%} {%- set has_cta = cta_content|trim|length > 0 -%} + {%- set video_content = caller('video') -%} + {%- set has_video = video_content|trim|length > 0 -%} + {%- set has_media = has_image or has_video -%} -
+ {% if media_placement not in ["before_description", "after_description"] %} + {% set media_placement = "after_description" %} + {% endif %} + + {% set image_aspect_ratio = "16-9" %} + {% if is_media_full_width and not is_video %} + {% set image_aspect_ratio = "cinematic" %} + {% endif %} + + {% macro _wrapped_media() %} + {%- if has_media -%} + {%- if has_video -%} +
+ {#- u-embedded-media applies 16:9 aspect ratio via padding. -#} +
+ {#- Assume u-embedded-media__element on the content -#} + {{- video_content -}} +
+
+ {%- elif has_image -%} +
+
+ {#- Assume p-image-container__image on the content -#} + {{- image_content -}} +
+
+ {%- endif -%} + {%- endif -%} + {% endmacro %} + + {% macro _full_width_media_row() %} + {%- if has_media and is_media_full_width -%} +
+
+ {{- _wrapped_media() -}} +
+
+ {%- endif -%} + {% endmacro %} + + {%- if title_content|trim|length == 0 -%} + {%- set title_content = "

Tiered List

" -%} + {%- endif -%} + + {%- if description_content|trim|length == 0 -%} + {%- set description_content = "

This is a tiered list.

" -%} + {%- endif -%} + + {%- if cta_content|trim|length == 0 -%} + {%- set cta_content = "

No CTA provided.

" -%} + {%- endif -%} + +
- {% if has_description == true -%} - {%- if is_description_full_width_on_desktop == true -%} + {% if has_description -%} + {%- if is_description_full_width_on_desktop -%}
{{ title_content }} @@ -36,10 +95,18 @@
+ {#- Non-full-width media before description -#} + {% if has_media and media_placement == "before_description" and not is_media_full_width %} + {{- _wrapped_media() -}} + {% endif %} {{ description_content }} + {#- Non-full-width media after description -#} + {% if has_media and media_placement == "after_description" and not is_media_full_width %} + {{- _wrapped_media() -}} + {% endif %}
- {%- else -%} + {%- else -%} {#- (50/50 desktop layout) -#}
@@ -48,33 +115,38 @@
+ {#- Non-full-width media before description -#} + {%- if has_media and media_placement == "before_description" and not is_media_full_width -%} + {{- _wrapped_media() -}} + {%- endif -%} {{ description_content }} + {#- Non-full-width media after description -#} + {%- if has_media and media_placement == "after_description" and not is_media_full_width -%} + {{- _wrapped_media() -}} + {%- endif -%}
{%- endif -%} - {%- else -%} -
-
- {{ title_content }} -
-
- {%- endif %} - - {% if has_image -%} + {%- else -%} {#- No description (has_description is false) -#}
- {%- if is_image_full_width -%} + {#- No description; the non-full-width media goes directly adjacent to the title -#} +
- {{ image }} + {{ title_content }}
- {%- else -%} -
-
- {{ image }} -
+
+ {% if has_media and not is_media_full_width %} +
+ {{- _wrapped_media() -}}
- {%- endif -%} + {% endif %}
- {%- endif -%} + {%- endif %} + + {#- Always render full-width media in its own row, after the main title/description/no-description blocks -#} + {% if has_media and is_media_full_width %} + {{- _full_width_media_row() -}} + {% endif %} {#- When there is a CTA, we use shallow spacing to space the list away from the CTA. @@ -132,11 +204,12 @@ {%- endif -%} {% if has_cta == true -%} -
-
-
+
+
+
+

{{ cta_content }} -

+

{%- endif %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html new file mode 100644 index 000000000..04fd80201 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html @@ -0,0 +1,93 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on desktop with description CTA{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ + +
+ Link to blog post › +
+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html new file mode 100644 index 000000000..b61f99add --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html @@ -0,0 +1,93 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on desktop with description CTA{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ + +
+ Link to blog post › +
+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html new file mode 100644 index 000000000..b625e9179 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html @@ -0,0 +1,96 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on desktop with description CTA{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_media_full_width=true, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ + +
+ Link to blog post › +
+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html new file mode 100644 index 000000000..1c551c996 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html @@ -0,0 +1,96 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on desktop with description CTA{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_media_full_width=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ + +
+ Link to blog post › +
+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image-before-description.html similarity index 89% rename from templates/docs/examples/patterns/tiered-list/with-default-width-image.html rename to templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image-before-description.html index 74c21ace7..ee6e56a7a 100644 --- a/templates/docs/examples/patterns/tiered-list/with-default-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image-before-description.html @@ -6,7 +6,7 @@ {% block standalone_css %}patterns_all{% endblock %} {% block content %} -{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_image_full_width=false) -%} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, media_placement="before_description") -%} {%- if slot == 'title' -%}

H2 - up to two lines; ideally one.

{%- endif -%} @@ -19,15 +19,7 @@

H2 - up to two lines; ideally one.

{%- endif -%} {%- if slot == "image" -%} - {{ image(url="https://assets.ubuntu.com/v1/3f63a18c-data-center.png", - alt="", - width="2464", - height="1028", - hi_def=True, - loading="lazy", - attrs={"class": "p-image-container__image"} - ) | safe - }} + {%- endif -%} {%- if slot == 'list_item_title_1' -%} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html new file mode 100644 index 000000000..2ba58741f --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html @@ -0,0 +1,88 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 with default width image{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html new file mode 100644 index 000000000..c3781bc8e --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html @@ -0,0 +1,90 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 with default width image{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_media_full_width=true, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html similarity index 87% rename from templates/docs/examples/patterns/tiered-list/with-full-width-image.html rename to templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html index 1cde1d737..d05596f76 100644 --- a/templates/docs/examples/patterns/tiered-list/with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html @@ -1,16 +1,22 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with full width image{% endblock %} +{% block title %}Tiered list / 50/50 with default width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} {% block content %} -{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_image_full_width=true) -%} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_media_full_width=true) -%} {%- if slot == 'title' -%}

H2 - up to two lines; ideally one.

{%- endif -%} + {%- if slot == "image" -%} + + {%- endif -%} + {%- if slot == 'description' -%}

A private cloud provides organisations with on-demand compute, storage and other resources that can be accessed over the network @@ -18,18 +24,6 @@

H2 - up to two lines; ideally one.

or via a 3rd party.

{%- endif -%} - {%- if slot == "image" -%} - {{ image(url="https://assets.ubuntu.com/v1/3f63a18c-data-center.png", - alt="", - width="2464", - height="1028", - hi_def=True, - loading="lazy", - attrs={"class": "p-image-container__image"} - ) | safe - }} - {%- endif -%} - {%- if slot == 'list_item_title_1' -%}

Rich portfolio of products

{%- endif -%} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html new file mode 100644 index 000000000..2ddb2e931 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html @@ -0,0 +1,88 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on tablet with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=false, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html new file mode 100644 index 000000000..f32c5c4ed --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html @@ -0,0 +1,88 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on tablet with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=false) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html new file mode 100644 index 000000000..9dfe8155c --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html @@ -0,0 +1,90 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on tablet with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=false, is_media_full_width=true, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html new file mode 100644 index 000000000..b71ee2547 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html @@ -0,0 +1,90 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on tablet with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=false, is_media_full_width=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html new file mode 100644 index 000000000..fde892c1e --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html @@ -0,0 +1,81 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on tablet without description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=false, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html new file mode 100644 index 000000000..7811e46ad --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html @@ -0,0 +1,81 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on tablet without description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=false) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html new file mode 100644 index 000000000..3fa71562b --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html @@ -0,0 +1,83 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on tablet without description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=false, is_media_full_width=true, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html new file mode 100644 index 000000000..841a7c343 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html @@ -0,0 +1,83 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 on tablet without description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=false, is_media_full_width=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html new file mode 100644 index 000000000..00091938a --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html @@ -0,0 +1,88 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html new file mode 100644 index 000000000..4eec32c1a --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html @@ -0,0 +1,88 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html new file mode 100644 index 000000000..3f56eb2b3 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html @@ -0,0 +1,90 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false, is_media_full_width=true, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html new file mode 100644 index 000000000..51bc52431 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html @@ -0,0 +1,90 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false, is_media_full_width=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html new file mode 100644 index 000000000..82dc4f8e5 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html @@ -0,0 +1,83 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 with description / Without CTA{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html new file mode 100644 index 000000000..fbb297be5 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html @@ -0,0 +1,83 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 with description / Without CTA{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html new file mode 100644 index 000000000..776989732 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html @@ -0,0 +1,85 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 with description / Without CTA{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false, is_media_full_width=true, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html new file mode 100644 index 000000000..2a6a0ea2a --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html @@ -0,0 +1,85 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / 50/50 with description / Without CTA{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false, is_media_full_width=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/combined.html b/templates/docs/examples/patterns/tiered-list/combined.html index 4cad501cd..8f238e654 100644 --- a/templates/docs/examples/patterns/tiered-list/combined.html +++ b/templates/docs/examples/patterns/tiered-list/combined.html @@ -15,7 +15,44 @@
{% include 'docs/examples/patterns/tiered-list/full-width-without-description.html' %}
{% include 'docs/examples/patterns/tiered-list/full-width-with-description.html' %}
{% include 'docs/examples/patterns/tiered-list/full-width-with-description-without-cta.html' %}
-
{% include 'docs/examples/patterns/tiered-list/with-default-width-image.html' %}
-
{% include 'docs/examples/patterns/tiered-list/with-full-width-image.html' %}
+ +{# All new and renamed files from git status (using their NEW names) #} +
{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html' %}
+
{% include 'docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html' %}
+
{% include 'docs/examples/patterns/tiered-list/video.html' %}
{% endwith %} -{% endblock %} +{% endblock %} \ No newline at end of file diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html new file mode 100644 index 000000000..151feb85a --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html @@ -0,0 +1,88 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html new file mode 100644 index 000000000..9eb3d8d02 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html @@ -0,0 +1,88 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html new file mode 100644 index 000000000..3c5aeaed5 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html @@ -0,0 +1,90 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, is_media_full_width=true, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html new file mode 100644 index 000000000..583f1213a --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html @@ -0,0 +1,90 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, is_media_full_width=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html new file mode 100644 index 000000000..94d92914e --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html @@ -0,0 +1,83 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html new file mode 100644 index 000000000..94d92914e --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html @@ -0,0 +1,83 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html new file mode 100644 index 000000000..0b257b9a2 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html @@ -0,0 +1,85 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, is_media_full_width=true, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html new file mode 100644 index 000000000..f79b34673 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html @@ -0,0 +1,85 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, is_media_full_width=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html new file mode 100644 index 000000000..4fdb25918 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html @@ -0,0 +1,81 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width without description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=true, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html new file mode 100644 index 000000000..4e8dd11eb --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html @@ -0,0 +1,81 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width without description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html new file mode 100644 index 000000000..c41311767 --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html @@ -0,0 +1,83 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width without description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=true, is_media_full_width=true, media_placement="before_description") -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html new file mode 100644 index 000000000..e73e4d76e --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html @@ -0,0 +1,83 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width without description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=true, is_media_full_width=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == "image" -%} + + {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/video.html b/templates/docs/examples/patterns/tiered-list/video.html new file mode 100644 index 000000000..194adeacc --- /dev/null +++ b/templates/docs/examples/patterns/tiered-list/video.html @@ -0,0 +1,88 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} + +{% block title %}Tiered list / Full-width with description{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true) -%} + {%- if slot == 'title' -%} +

H2 - up to two lines; ideally one.

+ {%- endif -%} + + {%- if slot == 'video' -%} + + {%- endif -%} + + {%- if slot == 'description' -%} +

A private cloud provides organisations with on-demand + compute, storage and other resources that can be accessed over the network + and that are reserved exclusively for them - either in their own data centre + or via a 3rd party.

+ {%- endif -%} + + {%- if slot == 'list_item_title_1' -%} +

Rich portfolio of products

+ {%- endif -%} + + {%- if slot == 'list_item_description_1' -%} +

Resell the full range of Canonical’s portfolio of private and public + cloud products: OpenStack, Kubernetes, IoT, support, security and + compliance for Ubuntu.

+ {%- endif -%} + + {%- if slot == 'list_item_title_2' -%} +

Sales enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_2' -%} +

Canonical can help train your field sales and presales teams and + provide you with sales collateral and permission to use the Canonical + and Ubuntu trademarks in your own materials.

+ {%- endif -%} + + {%- if slot == 'list_item_title_3' -%} +

Access to Canonical partner portal

+ {%- endif -%} + + {%- if slot == 'list_item_description_3' -%} +

We host a partner portal with product and solutions collaterals, agreed + pricing, incentives and a deal registration system.

+ {%- endif -%} + + {%- if slot == 'list_item_title_4' -%} +

Training and certification

+ {%- endif -%} + + {%- if slot == 'list_item_description_4' -%} +

Gain access to technology that is the foundation for digital + transformation and expand your business through marketing support and + alignment with a trusted brand

+ {%- endif -%} + + {%- if slot == 'list_item_title_5' -%} +

Technical enablement

+ {%- endif -%} + + {%- if slot == 'list_item_description_5' -%} +

We provide in-depth technical training for your customer engineering + teams with access to technical resources for your labs and customer + engagements.

+ {%- endif -%} + + {%- if slot == 'list_item_title_6' -%} +

Go to market with Canonical

+ {%- endif -%} + + {%- if slot == 'list_item_description_6' -%} +

Working with our dedicated partner team, get new joint marketing + opportunities and lead generation.

+ {%- endif -%} + + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{%- endcall -%} +{% endblock %} diff --git a/templates/docs/patterns/tiered-list/index.md b/templates/docs/patterns/tiered-list/index.md index 0670dcfb4..87340e33e 100644 --- a/templates/docs/patterns/tiered-list/index.md +++ b/templates/docs/patterns/tiered-list/index.md @@ -21,7 +21,7 @@ from a variety of tiered list layouts: - [Full-width without description](#full-width-without-description) - [Full-width with description](#full-width-with-description) - [Default-width image](#full-width-with-description) -- [Full-width image](#full-width-with-description) +- [With media](#with-media-new) The tiered list pattern is composed of the following elements: @@ -29,7 +29,7 @@ The tiered list pattern is composed of the following elements: | --------------------- | ----------------------------------------------------------------------------------- | | Title (**required**) | h2 title text | | Description | p description text with optional [CTA block](/docs/patterns/cta-block) | -| Image (optional) | Image to show under description | +| Media (optional) | Image or video to show near description | | List item title | Title text/content | | List item description | Description text/content with optional [CTA block](/docs/patterns/cta-block) | | Call to action block | [CTA block](/docs/patterns/cta-block) beneath the list | @@ -92,23 +92,82 @@ respectively. View example of the tiered list pattern
-## With default width image +## With media {{ status('new') }} + +You can embed an [image](#image) or a [video](#video) near the description. + +### Image + +You can embed a [default width](#default-width-image) or [full width](#full-width-image) image near the description. +The image may be positioned before or after the description, depending on the variant you choose. +The aspect ratio of the image depends on the variant you choose, and it will be wrapped in an [image container](/docs/patterns/images#image-container-with-aspect-ratio) to ensure it maintains the correct aspect ratio. + +**Always apply the `p-image-container__image` class to your image** to ensure the image is styled correctly. + +#### Default width image This variant contains a top-level description, and its title, description, and child list are presented full-width on desktop and tablet screen sizes respectively. Additionally, this variant features a default width image positioned beneath the title and description. -
+When using the default width image, the image will use half of the page width on large screens. +We recommend following these guidelines when using the default width image: + +- Use an image with a width sufficient to fill the page width on all screens. +- Use an image with an aspect ratio of approximately 16:9 to avoid using too much vertical space. + - The Jinja macro will wrap your image in + a [16:9 image container](/docs/patterns/images#image-container-with-aspect-ratio) and make your + image [fill its contents](/docs/patterns/images#cover-image). Use an image with approximately a 16:9 aspect ratio, + otherwise some of your image contents may be cropped at some screen sizes. + +The following example demonstrates a good usage of the default width image variant: + +
View example of the tiered list pattern
-## With full width image +#### Full width image This variant contains a top-level description, and its title, description, and child list are presented full-width on desktop and tablet screen sizes respectively. Additionally, this variant features a full width image positioned beneath the title and description. -
+When using the full width image, the image will use the full width of the page on all screens. +We recommend following these guidelines when using the full width image: + +- Use an image with a width sufficient to fill the page width on all screens. +- Use an image with an aspect ratio of approximately 2.4:1 to avoid using too much vertical space. + - The Jinja macro will wrap your image in + a [2.4:1 ("cinematic") image container](/docs/patterns/images#image-container-with-aspect-ratio) and make your + image [fill its contents](/docs/patterns/images#cover-image). Use an image with approximately a 2.4:1 aspect + ratio, otherwise some of your image contents may be cropped at some screen sizes. + +The following example demonstrates a good usage of the full width image variant: + +
+View example of the tiered list pattern +
+ +### Variable media placement + +By default, the media is displayed after the description, but you can choose whether it should be displayed before or after the description. +To do this, set the `media_placement` parameter in the Jinja macro to either `before_description` or `after_description`. + +
+View example of the tiered list pattern +
+ +### Video + +You may also use this variant to embed a video. Videos are positioned exactly the same as images, but they always have a +16:9 aspect ratio. + +When embedding a video with the Jinja macro, follow the following guidelines: + +- Use the `video` slot instead of the `image` slot. +- Apply the `u-embedded-media__element` class, which is provided by the [embedded media utility](/docs/utilities/embedded-media). + +
View example of the tiered list pattern
@@ -180,7 +239,7 @@ The `vf_tiered_list` Jinja macro can be used to generate a tiered list pattern. - is_image_full_width + is_media_full_width No @@ -192,7 +251,10 @@ The `vf_tiered_list` Jinja macro can be used to generate a tiered list pattern. false - Whether the image should be full-width + Whether the media should be full-width and displayed in its own row.
+ If the media is a full-width image, a cinematic (2.4:1 aspect ratio) image container will wrap your image.
+ If the media is a default-width image, a 16:9 image container will wrap your image.
+ If you use the video slot, this parameter will affect the positioning of the video, but will not change its aspect ratio. Videos are always 16:9. @@ -222,6 +284,32 @@ The `vf_tiered_list` Jinja macro can be used to generate a tiered list pattern. Title sentence displayed at the top of the pattern + + + image + + + No + + + Image to display near the description.
+ Must have the class p-image-container__image.
+ If the video slot is used, this slot will be ignored. + + + + + video + + + No + + + Video to display near the description.
+ Must have the class u-embedded-media__element.
+ Takes precedence over the image slot, so if both are used, the video will be displayed instead of the image. + + description From 1aca7511563c6d8e986ffc5a1db24666a718ca50 Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Mon, 9 Jun 2025 17:55:42 -0400 Subject: [PATCH 6/9] tweak docs --- templates/docs/patterns/tiered-list/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/templates/docs/patterns/tiered-list/index.md b/templates/docs/patterns/tiered-list/index.md index 87340e33e..5eb2e53a2 100644 --- a/templates/docs/patterns/tiered-list/index.md +++ b/templates/docs/patterns/tiered-list/index.md @@ -20,7 +20,6 @@ from a variety of tiered list layouts: - [50/50 with description](#5050-with-description) - [Full-width without description](#full-width-without-description) - [Full-width with description](#full-width-with-description) -- [Default-width image](#full-width-with-description) - [With media](#with-media-new) The tiered list pattern is composed of the following elements: From 26968727b97850c51d15a9fc9854ff9cf1980077 Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Mon, 9 Jun 2025 18:05:01 -0400 Subject: [PATCH 7/9] Tweak tiered list example titles --- ...ription-cta-with-default-width-image-before-description.html | 2 +- ...0-desktop-with-description-cta-with-default-width-image.html | 2 +- ...escription-cta-with-full-width-image-before-description.html | 2 +- ...0-50-desktop-with-description-cta-with-full-width-image.html | 2 +- ...description-with-default-width-image-before-description.html | 2 +- ...50-50-desktop-with-description-with-default-width-image.html | 2 +- ...th-description-with-full-width-image-before-description.html | 2 +- .../50-50-desktop-with-description-with-full-width-image.html | 2 +- ...description-with-default-width-image-before-description.html | 2 +- .../50-50-tablet-with-description-with-default-width-image.html | 2 +- ...th-description-with-full-width-image-before-description.html | 2 +- .../50-50-tablet-with-description-with-full-width-image.html | 2 +- ...description-with-default-width-image-before-description.html | 2 +- ...-50-tablet-without-description-with-default-width-image.html | 2 +- ...ut-description-with-full-width-image-before-description.html | 2 +- .../50-50-tablet-without-description-with-full-width-image.html | 2 +- ...description-with-default-width-image-before-description.html | 2 +- .../50-50-with-description-with-default-width-image.html | 2 +- ...th-description-with-full-width-image-before-description.html | 2 +- .../50-50-with-description-with-full-width-image.html | 2 +- ...without-cta-with-default-width-image-before-description.html | 2 +- ...0-with-description-without-cta-with-default-width-image.html | 2 +- ...on-without-cta-with-full-width-image-before-description.html | 2 +- ...0-50-with-description-without-cta-with-full-width-image.html | 2 +- ...description-with-default-width-image-before-description.html | 2 +- .../full-width-with-description-with-default-width-image.html | 2 +- ...th-description-with-full-width-image-before-description.html | 2 +- .../full-width-with-description-with-full-width-image.html | 2 +- ...without-cta-with-default-width-image-before-description.html | 2 +- ...h-with-description-without-cta-with-default-width-image.html | 2 +- ...on-without-cta-with-full-width-image-before-description.html | 2 +- ...idth-with-description-without-cta-with-full-width-image.html | 2 +- ...description-with-default-width-image-before-description.html | 2 +- ...full-width-without-description-with-default-width-image.html | 2 +- ...ut-description-with-full-width-image-before-description.html | 2 +- .../full-width-without-description-with-full-width-image.html | 2 +- templates/docs/examples/patterns/tiered-list/video.html | 2 +- 37 files changed, 37 insertions(+), 37 deletions(-) diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html index 04fd80201..f3b6ef805 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on desktop with description CTA{% endblock %} +{% block title %}Tiered list / 50/50 on desktop with description CTA / With default width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html index b61f99add..03db05617 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on desktop with description CTA{% endblock %} +{% block title %}Tiered list / 50/50 on desktop with description CTA / With default width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html index b625e9179..15a341265 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on desktop with description CTA{% endblock %} +{% block title %}Tiered list / 50/50 on desktop with description CTA / With full width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html index 1c551c996..01a1f1a04 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on desktop with description CTA{% endblock %} +{% block title %}Tiered list / 50/50 on desktop with description CTA / With full width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image-before-description.html index ee6e56a7a..5124beee4 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with default width image{% endblock %} +{% block title %}Tiered list / 50/50 with default width image / With default width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html index 2ba58741f..5d9a0fdc6 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with default width image{% endblock %} +{% block title %}Tiered list / 50/50 with default width image / With default width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html index c3781bc8e..d21070424 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with default width image{% endblock %} +{% block title %}Tiered list / 50/50 with default width image / With full width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html index d05596f76..d08d50fb3 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with default width image{% endblock %} +{% block title %}Tiered list / 50/50 with default width image / With full width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html index 2ddb2e931..add23bd6a 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on tablet with description{% endblock %} +{% block title %}Tiered list / 50/50 on tablet with description / With default width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html index f32c5c4ed..9ab6e0e9b 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on tablet with description{% endblock %} +{% block title %}Tiered list / 50/50 on tablet with description / With default width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html index 9dfe8155c..379f12fd9 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on tablet with description{% endblock %} +{% block title %}Tiered list / 50/50 on tablet with description / With full width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html index b71ee2547..17f964065 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on tablet with description{% endblock %} +{% block title %}Tiered list / 50/50 on tablet with description / With full width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html index fde892c1e..8534f66eb 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on tablet without description{% endblock %} +{% block title %}Tiered list / 50/50 on tablet without description / With default width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html index 7811e46ad..a30900861 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on tablet without description{% endblock %} +{% block title %}Tiered list / 50/50 on tablet without description / With default width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html index 3fa71562b..8fb4ee137 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on tablet without description{% endblock %} +{% block title %}Tiered list / 50/50 on tablet without description / With full width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html index 841a7c343..90dbb512e 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 on tablet without description{% endblock %} +{% block title %}Tiered list / 50/50 on tablet without description / With full width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html index 00091938a..697284fd2 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with description{% endblock %} +{% block title %}Tiered list / 50/50 with description / With default width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html index 4eec32c1a..246fd5497 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with description{% endblock %} +{% block title %}Tiered list / 50/50 with description / With default width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html index 3f56eb2b3..7680dca0b 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with description{% endblock %} +{% block title %}Tiered list / 50/50 with description / With full width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html index 51bc52431..0e286f8f0 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with description{% endblock %} +{% block title %}Tiered list / 50/50 with description / With full width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html index 82dc4f8e5..9f895e3c3 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with description / Without CTA{% endblock %} +{% block title %}Tiered list / 50/50 with description / Without CTA / With default width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html index fbb297be5..52c912004 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with description / Without CTA{% endblock %} +{% block title %}Tiered list / 50/50 with description / Without CTA / With default width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html index 776989732..a693dfc57 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with description / Without CTA{% endblock %} +{% block title %}Tiered list / 50/50 with description / Without CTA / With full width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html index 2a6a0ea2a..673887a67 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / 50/50 with description / Without CTA{% endblock %} +{% block title %}Tiered list / 50/50 with description / Without CTA / With full width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html index 151feb85a..a58bcdfbb 100644 --- a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width with description{% endblock %} +{% block title %}Tiered list / Full-width with description / With default width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html index 9eb3d8d02..bb4d8d740 100644 --- a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width with description{% endblock %} +{% block title %}Tiered list / Full-width with description / With default width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html index 3c5aeaed5..dbba26f6a 100644 --- a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width with description{% endblock %} +{% block title %}Tiered list / Full-width with description / With full width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html index 583f1213a..a90857748 100644 --- a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width with description{% endblock %} +{% block title %}Tiered list / Full-width with description / With full width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html index 94d92914e..f08825cf6 100644 --- a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width with description{% endblock %} +{% block title %}Tiered list / Full-width with description / With default width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html index 94d92914e..e8c39305d 100644 --- a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width with description{% endblock %} +{% block title %}Tiered list / Full-width with description / With default width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html index 0b257b9a2..580d8e0ee 100644 --- a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width with description{% endblock %} +{% block title %}Tiered list / Full-width with description / With full width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html index f79b34673..b3a9ca999 100644 --- a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width with description{% endblock %} +{% block title %}Tiered list / Full-width with description / With full width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html index 4fdb25918..bb091993e 100644 --- a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width without description{% endblock %} +{% block title %}Tiered list / Full-width without description / With default width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html index 4e8dd11eb..c09764bee 100644 --- a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width without description{% endblock %} +{% block title %}Tiered list / Full-width without description / With default width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html index c41311767..e53ea09fb 100644 --- a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html +++ b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width without description{% endblock %} +{% block title %}Tiered list / Full-width without description / With full width image before description{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html index e73e4d76e..629737589 100644 --- a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width without description{% endblock %} +{% block title %}Tiered list / Full-width without description / With full width image{% endblock %} {% block standalone_css %}patterns_all{% endblock %} diff --git a/templates/docs/examples/patterns/tiered-list/video.html b/templates/docs/examples/patterns/tiered-list/video.html index 194adeacc..001c70880 100644 --- a/templates/docs/examples/patterns/tiered-list/video.html +++ b/templates/docs/examples/patterns/tiered-list/video.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} -{% block title %}Tiered list / Full-width with description{% endblock %} +{% block title %}Tiered list / With video{% endblock %} {% block standalone_css %}patterns_all{% endblock %} From f4282942293627f93cfb79dc31b5cba5b09be249 Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Thu, 26 Jun 2025 14:54:15 -0400 Subject: [PATCH 8/9] wip --- requirements.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/requirements.txt b/requirements.txt index 17816bef3..bdc51444a 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,6 +1,6 @@ canonicalwebteam.flask-base==2.5.0 canonicalwebteam.templatefinder==1.0.0 canonicalwebteam.search==2.1.1 -canonicalwebteam.image-template==1.5.0 +canonicalwebteam.image-template==1.6.0 mistune==0.8.4 pyyaml==6.0.2 From 2f32fec02665b84af9baadc340c065a17fe5d30f Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Thu, 26 Jun 2025 15:05:57 -0400 Subject: [PATCH 9/9] initial update to test that the _attrs update is working --- templates/_macros/vf_tiered-list.jinja | 34 +++++++++++++------ ...ith-description-with-full-width-image.html | 16 +++++---- .../examples/patterns/tiered-list/video.html | 2 +- 3 files changed, 33 insertions(+), 19 deletions(-) diff --git a/templates/_macros/vf_tiered-list.jinja b/templates/_macros/vf_tiered-list.jinja index 8674f08b0..33b776e8b 100644 --- a/templates/_macros/vf_tiered-list.jinja +++ b/templates/_macros/vf_tiered-list.jinja @@ -5,11 +5,11 @@ # own row on tablet vs. 50/50 split between title/description # is_media_full_width: whether the media is full width # media_placement: where the image is placed relative to the description. Options are "after_description" or "before_description". +# img_attrs: attributes for the image element, e.g. src, alt, class +# video_attrs: attributes for the video element, e.g. src, class # Slots # title: top-level title element # description: top-level description element -# video: top-level video element. Mutually exclusive with image, and takes priority over the image. -# image: top-level image element. Mutually exclusive with video. Is not rendered if the video is provided. # list_item_title_[1-25]: title element of each child list item # list_item_description_[1-25]: description element of each child list item # cta: CTA block element @@ -17,17 +17,17 @@ is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, is_media_full_width=false, - media_placement="after_description" + media_placement="after_description", + img_attrs={}, + video_attrs={} ) -%} {%- set title_content = caller('title') -%} {%- set description_content = caller('description') -%} {%- set has_description = description_content|trim|length > 0 -%} - {%- set image_content = caller('image') -%} - {%- set has_image = image_content|trim|length > 0 -%} {%- set cta_content = caller('cta') -%} {%- set has_cta = cta_content|trim|length > 0 -%} - {%- set video_content = caller('video') -%} - {%- set has_video = video_content|trim|length > 0 -%} + {%- set has_image = img_attrs['src']|trim|length > 0 -%} + {%- set has_video = video_attrs['src']|trim|length > 0 -%} {%- set has_media = has_image or has_video -%} {% if media_placement not in ["before_description", "after_description"] %} @@ -45,15 +45,27 @@
{#- u-embedded-media applies 16:9 aspect ratio via padding. -#}
- {#- Assume u-embedded-media__element on the content -#} - {{- video_content -}} +
{%- elif has_image -%}
- {#- Assume p-image-container__image on the content -#} - {{- image_content -}} +
{%- endif -%} diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html index d08d50fb3..a8eed15c5 100644 --- a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html +++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html @@ -6,17 +6,19 @@ {% block standalone_css %}patterns_all{% endblock %} {% block content %} -{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_media_full_width=true) -%} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_media_full_width=true, img_attrs=image( +url="https://assets.ubuntu.com/v1/3f63a18c-data-center.png", +alt="", +width="2464", +height="1028", +hi_def=True, +loading="auto|lazy", +output_mode="attrs" +)) -%} {%- if slot == 'title' -%}

H2 - up to two lines; ideally one.

{%- endif -%} - {%- if slot == "image" -%} - - {%- endif -%} - {%- if slot == 'description' -%}

A private cloud provides organisations with on-demand compute, storage and other resources that can be accessed over the network diff --git a/templates/docs/examples/patterns/tiered-list/video.html b/templates/docs/examples/patterns/tiered-list/video.html index 001c70880..ea0cdc303 100644 --- a/templates/docs/examples/patterns/tiered-list/video.html +++ b/templates/docs/examples/patterns/tiered-list/video.html @@ -6,7 +6,7 @@ {% block standalone_css %}patterns_all{% endblock %} {% block content %} -{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true) -%} +{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, video_attrs={"src": "https://www.youtube.com/embed/TShKZLeZzWE", "allowfullscreen": ""}) -%} {%- if slot == 'title' -%}

H2 - up to two lines; ideally one.

{%- endif -%}