Skip to content

Commit

Permalink
Wrap logo section
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmuzina
jmuzina committed Feb 5, 2025
1 parent c33d868 commit 909baef
Show file tree
Hide file tree
Showing 12 changed files with 225 additions and 257 deletions.
16 changes: 12 additions & 4 deletions templates/_macros/vf_rich-horizontal-list.jinja
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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 %}
Expand Down Expand Up @@ -79,6 +79,14 @@
</div>
{%- endif -%}
{%- endmacro -%}

{%- macro _logo_section(logo_section_content) -%}
<div class="p-logo-section">
<div class="p-logo-section__items">
{{- logo_section_content -}}
</div>
</div>
{%- endmacro -%}

<div class="p-section">
<div class="grid-row">
Expand All @@ -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. -#}
<div class="grid-col-4{% if has_description %} grid-col-start-large-5{% endif %}">
{{- logo_section_content -}}
{{- _logo_section(logo_section_content) -}}
</div>
{%- endif -%}
{%- if has_list %}
Expand All @@ -125,7 +133,7 @@
</div>
{%- if has_logo_section %}
<div class="grid-col-8 grid-col-order-small-2">
{{- logo_section_content -}}
{{- _logo_section(logo_section_content) -}}
</div>
{%- endif -%}
{% if has_description %}
Expand Down
46 changes: 21 additions & 25 deletions templates/docs/examples/patterns/rich-list-horizontal/bulleted-50-50-responsive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,31 +14,27 @@
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/a299c914-GettyImages-DataCenter.jpeg" alt="">
</div>
{%- endif -%}
{%- if slot == 'logo_section' -%}
<div class="p-logo-section">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
</div>
{%- if slot == 'logo_section_items' -%}
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
{%- endif -%}
{%- if slot == 'description' -%}
Expand Down
46 changes: 21 additions & 25 deletions templates/docs/examples/patterns/rich-list-horizontal/bulleted-responsive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,27 @@
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/a299c914-GettyImages-DataCenter.jpeg" alt="">
</div>
{%- endif -%}
{%- if slot == 'logo_section' -%}
<div class="p-logo-section">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
</div>
{%- if slot == 'logo_section_items' -%}
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
{%- endif -%}
{%- if slot == 'description' -%}
Expand Down
46 changes: 21 additions & 25 deletions ...cs/examples/patterns/rich-list-horizontal/bulletless-50-50-no-description-responsive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,27 @@
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/a299c914-GettyImages-DataCenter.jpeg" alt="">
</div>
{%- endif -%}
{%- if slot == 'logo_section' -%}
<div class="p-logo-section">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
</div>
{%- if slot == 'logo_section_items' -%}
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
{%- endif -%}
{%- if slot == 'list_item_1' -%}
Expand Down
46 changes: 21 additions & 25 deletions templates/docs/examples/patterns/rich-list-horizontal/bulletless-50-50-responsive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,27 @@
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/a299c914-GettyImages-DataCenter.jpeg" alt="">
</div>
{%- endif -%}
{%- if slot == 'logo_section' -%}
<div class="p-logo-section">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
</div>
{%- if slot == 'logo_section_items' -%}
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
{%- endif -%}
{%- if slot == 'description' -%}
Expand Down
46 changes: 21 additions & 25 deletions ...tes/docs/examples/patterns/rich-list-horizontal/bulletless-no-description-responsive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,31 +12,27 @@
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/a299c914-GettyImages-DataCenter.jpeg" alt="">
</div>
{%- endif -%}
{%- if slot == 'logo_section' -%}
<div class="p-logo-section">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
</div>
{%- if slot == 'logo_section_items' -%}
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
{%- endif -%}
{%- if slot == 'list_item_1' -%}
Expand Down
46 changes: 21 additions & 25 deletions templates/docs/examples/patterns/rich-list-horizontal/bulletless-responsive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,31 +12,27 @@
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/a299c914-GettyImages-DataCenter.jpeg" alt="">
</div>
{%- endif -%}
{%- if slot == 'logo_section' -%}
<div class="p-logo-section">
<div class="p-logo-section__items">
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
</div>
{%- if slot == 'logo_section_items' -%}
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e44aa9b2-nvidia-logo.png" alt="NVIDIA logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e4bbd168-amd-logo.png" alt="AMD logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0404df4-hp-logo.png" alt="HP logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/90161e97-dell-logo.png" alt="Dell logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/35549e17-lenovo-logo.png" alt="Lenovo logo" class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/94b00f2b-intel-new-logo.png" alt="Intel logo" class="p-logo-section__logo" />
</div>
{%- endif -%}
{%- if slot == 'description' -%}
Expand Down
Loading

0 comments on commit 909baef

Please sign in to comment.