diff --git a/templates/_macros/vf_rich-horizontal-list.jinja b/templates/_macros/vf_rich-horizontal-list.jinja index 000ffbef2..a5ed64ef6 100644 --- a/templates/_macros/vf_rich-horizontal-list.jinja +++ b/templates/_macros/vf_rich-horizontal-list.jinja @@ -5,7 +5,7 @@ # Slots # image (optional): Image displayed at the top of the pattern # description (optional): Description paragraph -# logo_section (optional): `.p-logo-section` with between 4 and 8 logos +# logo_section_items (optional): Block of `.p-logo-section__item` elements, ideally between 4 and 8 items. # cta (optional): Call to action area, likely a paragraph element with a button and a link # list_item_[1-8]: List item contents for items in the `.p-list--horizontal-section`. Each will be wrapped in a `li.p-list__item` element, with the item style decided by the `list_item_style` parameter. {% macro vf_rich_horizontal_list( @@ -15,7 +15,7 @@ ) -%} {% set image_content = caller("image") %} {% set description_content = caller("description") %} - {% set logo_section_content = caller("logo_section") %} + {% set logo_section_content = caller("logo_section_items") %} {% set cta_content = caller("cta") %} {% set has_image = image_content|trim|length > 0 %} {% set has_logo_section = logo_section_content|trim|length > 0 %} @@ -79,6 +79,14 @@ {%- endif -%} {%- endmacro -%} + + {%- macro _logo_section(logo_section_content) -%} +
+
+ {{- logo_section_content -}} +
+
+ {%- endmacro -%}
@@ -102,7 +110,7 @@ {%- if has_logo_section %} {#- When the description is present, the logo section wraps to another line, so we need to offset it to align with the description. -#}
- {{- logo_section_content -}} + {{- _logo_section(logo_section_content) -}}
{%- endif -%} {%- if has_list %} @@ -125,7 +133,7 @@
{%- if has_logo_section %}
- {{- logo_section_content -}} + {{- _logo_section(logo_section_content) -}}
{%- endif -%} {% if has_description %} diff --git a/templates/docs/examples/patterns/rich-list-horizontal/bulleted-50-50-responsive.html b/templates/docs/examples/patterns/rich-list-horizontal/bulleted-50-50-responsive.html index 0da4e5667..f44113738 100644 --- a/templates/docs/examples/patterns/rich-list-horizontal/bulleted-50-50-responsive.html +++ b/templates/docs/examples/patterns/rich-list-horizontal/bulleted-50-50-responsive.html @@ -14,31 +14,27 @@
{%- endif -%} - {%- if slot == 'logo_section' -%} -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ {%- if slot == 'logo_section_items' -%} +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
{%- endif -%} {%- if slot == 'description' -%} diff --git a/templates/docs/examples/patterns/rich-list-horizontal/bulleted-responsive.html b/templates/docs/examples/patterns/rich-list-horizontal/bulleted-responsive.html index 23d083a1d..3f28ab114 100644 --- a/templates/docs/examples/patterns/rich-list-horizontal/bulleted-responsive.html +++ b/templates/docs/examples/patterns/rich-list-horizontal/bulleted-responsive.html @@ -13,31 +13,27 @@
{%- endif -%} - {%- if slot == 'logo_section' -%} -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ {%- if slot == 'logo_section_items' -%} +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
{%- endif -%} {%- if slot == 'description' -%} diff --git a/templates/docs/examples/patterns/rich-list-horizontal/bulletless-50-50-no-description-responsive.html b/templates/docs/examples/patterns/rich-list-horizontal/bulletless-50-50-no-description-responsive.html index ae6c4bd2a..4a09c56cb 100644 --- a/templates/docs/examples/patterns/rich-list-horizontal/bulletless-50-50-no-description-responsive.html +++ b/templates/docs/examples/patterns/rich-list-horizontal/bulletless-50-50-no-description-responsive.html @@ -13,31 +13,27 @@
{%- endif -%} - {%- if slot == 'logo_section' -%} -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ {%- if slot == 'logo_section_items' -%} +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
{%- endif -%} {%- if slot == 'list_item_1' -%} diff --git a/templates/docs/examples/patterns/rich-list-horizontal/bulletless-50-50-responsive.html b/templates/docs/examples/patterns/rich-list-horizontal/bulletless-50-50-responsive.html index 8ddeb5903..76dfbecf1 100644 --- a/templates/docs/examples/patterns/rich-list-horizontal/bulletless-50-50-responsive.html +++ b/templates/docs/examples/patterns/rich-list-horizontal/bulletless-50-50-responsive.html @@ -13,31 +13,27 @@
{%- endif -%} - {%- if slot == 'logo_section' -%} -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ {%- if slot == 'logo_section_items' -%} +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
{%- endif -%} {%- if slot == 'description' -%} diff --git a/templates/docs/examples/patterns/rich-list-horizontal/bulletless-no-description-responsive.html b/templates/docs/examples/patterns/rich-list-horizontal/bulletless-no-description-responsive.html index 24710a802..ea2c58258 100644 --- a/templates/docs/examples/patterns/rich-list-horizontal/bulletless-no-description-responsive.html +++ b/templates/docs/examples/patterns/rich-list-horizontal/bulletless-no-description-responsive.html @@ -12,31 +12,27 @@
{%- endif -%} - {%- if slot == 'logo_section' -%} -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ {%- if slot == 'logo_section_items' -%} +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
{%- endif -%} {%- if slot == 'list_item_1' -%} diff --git a/templates/docs/examples/patterns/rich-list-horizontal/bulletless-responsive.html b/templates/docs/examples/patterns/rich-list-horizontal/bulletless-responsive.html index 06001bbbc..9c56fda57 100644 --- a/templates/docs/examples/patterns/rich-list-horizontal/bulletless-responsive.html +++ b/templates/docs/examples/patterns/rich-list-horizontal/bulletless-responsive.html @@ -12,31 +12,27 @@
{%- endif -%} - {%- if slot == 'logo_section' -%} -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ {%- if slot == 'logo_section_items' -%} +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
{%- endif -%} {%- if slot == 'description' -%} diff --git a/templates/docs/examples/patterns/rich-list-horizontal/ordered-50-50-responsive.html b/templates/docs/examples/patterns/rich-list-horizontal/ordered-50-50-responsive.html index 6286a816c..072b518eb 100644 --- a/templates/docs/examples/patterns/rich-list-horizontal/ordered-50-50-responsive.html +++ b/templates/docs/examples/patterns/rich-list-horizontal/ordered-50-50-responsive.html @@ -14,31 +14,27 @@
{%- endif -%} - {%- if slot == 'logo_section' -%} -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ {%- if slot == 'logo_section_items' -%} +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
{%- endif -%} {%- if slot == 'description' -%} diff --git a/templates/docs/examples/patterns/rich-list-horizontal/ordered-responsive.html b/templates/docs/examples/patterns/rich-list-horizontal/ordered-responsive.html index 9c9236bf2..15ad40d5c 100644 --- a/templates/docs/examples/patterns/rich-list-horizontal/ordered-responsive.html +++ b/templates/docs/examples/patterns/rich-list-horizontal/ordered-responsive.html @@ -13,31 +13,27 @@
{%- endif -%} - {%- if slot == 'logo_section' -%} -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ {%- if slot == 'logo_section_items' -%} +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
{%- endif -%} {%- if slot == 'description' -%} diff --git a/templates/docs/examples/patterns/rich-list-horizontal/ticked-50-50-responsive.html b/templates/docs/examples/patterns/rich-list-horizontal/ticked-50-50-responsive.html index 772726085..25f0043cb 100644 --- a/templates/docs/examples/patterns/rich-list-horizontal/ticked-50-50-responsive.html +++ b/templates/docs/examples/patterns/rich-list-horizontal/ticked-50-50-responsive.html @@ -14,31 +14,27 @@
{%- endif -%} - {%- if slot == 'logo_section' -%} -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ {%- if slot == 'logo_section_items' -%} +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
{%- endif -%} {%- if slot == 'description' -%} diff --git a/templates/docs/examples/patterns/rich-list-horizontal/ticked-responsive.html b/templates/docs/examples/patterns/rich-list-horizontal/ticked-responsive.html index da00d21d5..cbdb99d3b 100644 --- a/templates/docs/examples/patterns/rich-list-horizontal/ticked-responsive.html +++ b/templates/docs/examples/patterns/rich-list-horizontal/ticked-responsive.html @@ -13,31 +13,27 @@
{%- endif -%} - {%- if slot == 'logo_section' -%} -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ {%- if slot == 'logo_section_items' -%} +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
{%- endif -%} {%- if slot == 'description' -%} diff --git a/templates/docs/patterns/rich-list-horizontal/index.md b/templates/docs/patterns/rich-list-horizontal/index.md index 8b1a7d51f..fe0b409d5 100644 --- a/templates/docs/patterns/rich-list-horizontal/index.md +++ b/templates/docs/patterns/rich-list-horizontal/index.md @@ -173,13 +173,13 @@ The `vf_rich_horizontal_list` Jinja macro can be used to generate a rich horizon - logo_section + logo_section_items No - A logo section component. + A block of 4-8 .p-logo-section__item elements. @@ -190,7 +190,7 @@ The `vf_rich_horizontal_list` Jinja macro can be used to generate a rich horizon Yes, at least 4 items - Contents of a .p-list__item element for the list item. + Contents of a .p-list__item element for the list item.