diff --git a/package.json b/package.json index 9e1b99414..43cea8fe6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vanilla-framework", - "version": "4.17.1", + "version": "4.18.0", "author": { "email": "webteam@canonical.com", "name": "Canonical Webteam" diff --git a/releases.yml b/releases.yml index 2cda0edd9..132cb53dd 100644 --- a/releases.yml +++ b/releases.yml @@ -1,3 +1,9 @@ +- version: 4.18.0 + features: + - component: Rich vertical list + url: /docs/patterns/rich-list-vertical + status: New + notes: We've introduced a new rich list pattern. - version: 4.17.0 features: - component: Tiered list @@ -50,10 +56,6 @@ url: /docs/patterns/list-tree status: Updated notes: We've updated the list tree to be more accessible and modern. We recommend you update your list tree markup and scripts to match the new structure. However, the legacy structure is still supported. - - component: Rich list / Vertical - url: /docs/patterns/rich-list#vertical - status: New - notes: We've introduced a new rich list pattern. - version: 4.15.0 features: - component: CTA Block diff --git a/side-navigation.yaml b/side-navigation.yaml index f549536b7..e08fb5044 100644 --- a/side-navigation.yaml +++ b/side-navigation.yaml @@ -113,8 +113,8 @@ subheadings: - title: Hero url: /docs/patterns/hero - - title: Rich list - url: /docs/patterns/rich-list + - title: Rich list (vertical) + url: /docs/patterns/rich-list-vertical - title: Tiered list url: /docs/patterns/tiered-list - heading: Utilities diff --git a/templates/_macros/vf_rich-vertical-list.jinja b/templates/_macros/vf_rich-vertical-list.jinja index 231d82094..6c1aa3d01 100644 --- a/templates/_macros/vf_rich-vertical-list.jinja +++ b/templates/_macros/vf_rich-vertical-list.jinja @@ -5,7 +5,7 @@ # Slots # description: Paragraph-style description content # logo_section Logo section block -# list_item_[1-15]: List item content, assumed to be li.p-list__item +# list_item_[1-7]: List item content, assumed to be li.p-list__item # image (required) {% macro vf_rich_vertical_list( title_text, @@ -20,7 +20,7 @@ {% set has_cta = cta_content|trim|length > 0 %} {% set has_list = caller('list_item_1')|trim|length > 0 %} {% set image_content = caller('image') %} - {% set max_list_items = 15 %} + {% set max_list_items = 7 %} {% set list_item_tick_style=list_item_tick_style|trim|lower %} {% if list_item_tick_style|length > 0 and list_item_tick_style not in ['bullet', 'tick', 'number'] %} @@ -54,13 +54,13 @@ {% endif %} {%- macro _text_column_contents(list_items) %} - + {#- Mandatory title -#}

{{ title_text }}

{%- if has_logo_section %} - + {#- Optional logo section -#}
{{- logo_section_content -}} @@ -69,14 +69,14 @@ {%- endif -%} {%- if has_description %} - + {#- Optional description -#}
{{- description_content -}}
{%- endif -%} {%- if list_items|length > 0 %} - + {#- Optional list -#} <{{ list_element_type }} class="p-list--divided"> {% for list_item in list_items %}
  • @@ -87,7 +87,7 @@ {%- endif -%} {%- if has_cta %} - + {#- Optional CTA block -#}
    {{- cta_content -}}
    @@ -96,7 +96,7 @@ {%- endmacro -%} {%- macro _image_column_contents() %} - + {#- Mandatory image -#}
    {{- image_content -}}
    @@ -113,7 +113,7 @@ {{- _image_column_contents() -}}
    • {%- else -%} - + {#- For flipped layout, place the image contents in the first column and the text in the second column -#}
    {{- _image_column_contents() -}}
    diff --git a/templates/docs/examples/patterns/code-snippet/combined.html b/templates/docs/examples/patterns/code-snippet/combined.html index 040ee6e6b..9e02fb3b1 100644 --- a/templates/docs/examples/patterns/code-snippet/combined.html +++ b/templates/docs/examples/patterns/code-snippet/combined.html @@ -11,7 +11,7 @@
    {% include 'docs/examples/patterns/code-snippet/dropdown-multiple.html' %}
    {% include 'docs/examples/patterns/code-snippet/icon.html' %}
    {% include 'docs/examples/patterns/code-snippet/is-bordered.html' %}
    -
    {% include 'docs/examples/patterns/code-snippet/ordered.html' %}
    +
    {% include 'docs/examples/patterns/code-snippet/numbered.html' %}
    {% include 'docs/examples/patterns/code-snippet/prism.html' %}
    {% include 'docs/examples/patterns/code-snippet/wrapping.html' %}
    {% endwith %} diff --git a/templates/docs/examples/patterns/rich-list/vertical/_logo-section.html b/templates/docs/examples/patterns/rich-list-vertical/_logo-section.html similarity index 94% rename from templates/docs/examples/patterns/rich-list/vertical/_logo-section.html rename to templates/docs/examples/patterns/rich-list-vertical/_logo-section.html index 340398750..5e623ebf3 100644 --- a/templates/docs/examples/patterns/rich-list/vertical/_logo-section.html +++ b/templates/docs/examples/patterns/rich-list-vertical/_logo-section.html @@ -1,4 +1,4 @@ -{# Common logo section block used by vertical rich list examples #} +{#- Common logo section block used by vertical rich list examples -#}
    diff --git a/templates/docs/examples/patterns/rich-list/vertical/bulleted-flipped.html b/templates/docs/examples/patterns/rich-list-vertical/bulleted-flipped.html similarity index 85% rename from templates/docs/examples/patterns/rich-list/vertical/bulleted-flipped.html rename to templates/docs/examples/patterns/rich-list-vertical/bulleted-flipped.html index f3197be85..d944dafef 100644 --- a/templates/docs/examples/patterns/rich-list/vertical/bulleted-flipped.html +++ b/templates/docs/examples/patterns/rich-list-vertical/bulleted-flipped.html @@ -16,7 +16,7 @@

    {%- endif -%} {%- if slot == 'logo_section' -%} - {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %} + {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %} {%- endif -%} {%- if slot == 'list_item_1' -%} No mandatory subscriptions for Ubuntu @@ -44,17 +44,18 @@ {%- if slot == 'list_item_7' -%} TCO analysis of Open Infra {%- endif -%} - {%- if slot == 'list_item_8' -%} - 451 study on private/public cloud cost - {%- endif -%} {%- if slot == 'cta' -%} Learn more Contact us › {%- endif -%} {%- if slot == 'image' -%} -
    +
    Factory floor + alt="Factory floor"/> +
    +
    + Factory floor
    {%- endif -%} {% endcall -%} diff --git a/templates/docs/examples/patterns/rich-list/vertical/bulleted.html b/templates/docs/examples/patterns/rich-list-vertical/bulleted.html similarity index 82% rename from templates/docs/examples/patterns/rich-list/vertical/bulleted.html rename to templates/docs/examples/patterns/rich-list-vertical/bulleted.html index 3f7ed579c..8db1edd8a 100644 --- a/templates/docs/examples/patterns/rich-list/vertical/bulleted.html +++ b/templates/docs/examples/patterns/rich-list-vertical/bulleted.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %} -{% block title %}Rich list / Vertical / Bulleted / Default{% endblock %} +{% block title %}Rich list / Vertical / Bulleted{% endblock %} {% block standalone_css %}patterns_all{% endblock %} {% block content %} {% call(slot) vf_rich_vertical_list( @@ -15,7 +15,7 @@

    {%- endif -%} {%- if slot == 'logo_section' -%} - {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %} + {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %} {%- endif -%} {%- if slot == 'list_item_1' -%} No mandatory subscriptions for Ubuntu @@ -43,17 +43,18 @@ {%- if slot == 'list_item_7' -%} TCO analysis of Open Infra {%- endif -%} - {%- if slot == 'list_item_8' -%} - 451 study on private/public cloud cost - {%- endif -%} {%- if slot == 'cta' -%} Learn more Contact us › {%- endif -%} {%- if slot == 'image' -%} -
    +
    Factory floor + alt="Factory floor"/> +
    +
    + Factory floor
    {%- endif -%} {% endcall -%} diff --git a/templates/docs/examples/patterns/rich-list/vertical/default.html b/templates/docs/examples/patterns/rich-list-vertical/bulletless-flipped.html similarity index 81% rename from templates/docs/examples/patterns/rich-list/vertical/default.html rename to templates/docs/examples/patterns/rich-list-vertical/bulletless-flipped.html index f31278450..9721b889a 100644 --- a/templates/docs/examples/patterns/rich-list/vertical/default.html +++ b/templates/docs/examples/patterns/rich-list-vertical/bulletless-flipped.html @@ -1,11 +1,12 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %} -{% block title %}Rich list / Vertical / Bulleted / Default{% endblock %} +{% block title %}Rich list / Vertical / Flipped{% endblock %} {% block standalone_css %}patterns_all{% endblock %} {% block content %} {% call(slot) vf_rich_vertical_list( - title_text='H2 - this can take up to two lines, but best to stick to one line.' + title_text='H2 - this can take up to two lines, but best to stick to one line.', + is_flipped=true ) -%} {%- if slot == 'description' -%}

    @@ -14,7 +15,7 @@

    {%- endif -%} {%- if slot == 'logo_section' -%} - {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %} + {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %} {%- endif -%} {%- if slot == 'list_item_1' -%} No mandatory subscriptions for Ubuntu @@ -42,17 +43,18 @@ {%- if slot == 'list_item_7' -%} TCO analysis of Open Infra {%- endif -%} - {%- if slot == 'list_item_8' -%} - 451 study on private/public cloud cost - {%- endif -%} {%- if slot == 'cta' -%} Learn more Contact us › {%- endif -%} {%- if slot == 'image' -%} -
    +
    Factory floor + alt="Factory floor"/> +
    +
    + Factory floor
    {%- endif -%} {% endcall -%} diff --git a/templates/docs/examples/patterns/rich-list/vertical/flipped.html b/templates/docs/examples/patterns/rich-list-vertical/bulletless.html similarity index 82% rename from templates/docs/examples/patterns/rich-list/vertical/flipped.html rename to templates/docs/examples/patterns/rich-list-vertical/bulletless.html index f6f326344..0f28abeb0 100644 --- a/templates/docs/examples/patterns/rich-list/vertical/flipped.html +++ b/templates/docs/examples/patterns/rich-list-vertical/bulletless.html @@ -1,12 +1,11 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %} -{% block title %}Rich list / Vertical / Default{% endblock %} +{% block title %}Rich list / Vertical{% endblock %} {% block standalone_css %}patterns_all{% endblock %} {% block content %} {% call(slot) vf_rich_vertical_list( title_text='H2 - this can take up to two lines, but best to stick to one line.', - is_flipped=true ) -%} {%- if slot == 'description' -%}

    @@ -15,7 +14,7 @@

    {%- endif -%} {%- if slot == 'logo_section' -%} - {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %} + {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %} {%- endif -%} {%- if slot == 'list_item_1' -%} No mandatory subscriptions for Ubuntu @@ -43,17 +42,18 @@ {%- if slot == 'list_item_7' -%} TCO analysis of Open Infra {%- endif -%} - {%- if slot == 'list_item_8' -%} - 451 study on private/public cloud cost - {%- endif -%} {%- if slot == 'cta' -%} Learn more Contact us › {%- endif -%} {%- if slot == 'image' -%} -
    +
    Factory floor + alt="Factory floor"/> +
    +
    + Factory floor
    {%- endif -%} {% endcall -%} diff --git a/templates/docs/examples/patterns/rich-list-vertical/combined.html b/templates/docs/examples/patterns/rich-list-vertical/combined.html new file mode 100644 index 000000000..06ae8288a --- /dev/null +++ b/templates/docs/examples/patterns/rich-list-vertical/combined.html @@ -0,0 +1,18 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Rich list / Combined{% endblock %} + +{% block standalone_css %}patterns_all{% endblock %} + +{% block content %} + {% with is_combined = true %} +
    {% include 'docs/examples/patterns/rich-list-vertical/bulletless.html' %}
    +
    {% include 'docs/examples/patterns/rich-list-vertical/bulletless-flipped.html' %}
    +
    {% include 'docs/examples/patterns/rich-list-vertical/ticked.html' %}
    +
    {% include 'docs/examples/patterns/rich-list-vertical/ticked-flipped.html' %}
    +
    {% include 'docs/examples/patterns/rich-list-vertical/bulleted.html' %}
    +
    {% include 'docs/examples/patterns/rich-list-vertical/bulleted-flipped.html' %}
    +
    {% include 'docs/examples/patterns/rich-list-vertical/ordered.html' %}
    +
    {% include 'docs/examples/patterns/rich-list-vertical/ordered-flipped.html' %}
    +
    {% include 'docs/examples/patterns/rich-list-vertical/minimal.html' %}
    + {% endwith %} +{% endblock %} diff --git a/templates/docs/examples/patterns/rich-list/vertical/minimal.html b/templates/docs/examples/patterns/rich-list-vertical/minimal.html similarity index 68% rename from templates/docs/examples/patterns/rich-list/vertical/minimal.html rename to templates/docs/examples/patterns/rich-list-vertical/minimal.html index 88412e3a9..107862bd7 100644 --- a/templates/docs/examples/patterns/rich-list/vertical/minimal.html +++ b/templates/docs/examples/patterns/rich-list-vertical/minimal.html @@ -14,8 +14,13 @@

    {%- endif -%} {%- if slot == 'image' -%} -
    - Factory floor +
    + Factory floor +
    +
    + Factory floor
    {%- endif -%} {% endcall -%} diff --git a/templates/docs/examples/patterns/rich-list/vertical/ordered-flipped.html b/templates/docs/examples/patterns/rich-list-vertical/ordered-flipped.html similarity index 85% rename from templates/docs/examples/patterns/rich-list/vertical/ordered-flipped.html rename to templates/docs/examples/patterns/rich-list-vertical/ordered-flipped.html index 3588fc04e..919d5b343 100644 --- a/templates/docs/examples/patterns/rich-list/vertical/ordered-flipped.html +++ b/templates/docs/examples/patterns/rich-list-vertical/ordered-flipped.html @@ -16,7 +16,7 @@

    {%- endif -%} {%- if slot == 'logo_section' -%} - {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %} + {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %} {%- endif -%} {%- if slot == 'list_item_1' -%} No mandatory subscriptions for Ubuntu @@ -44,17 +44,18 @@ {%- if slot == 'list_item_7' -%} TCO analysis of Open Infra {%- endif -%} - {%- if slot == 'list_item_8' -%} - 451 study on private/public cloud cost - {%- endif -%} {%- if slot == 'cta' -%} Learn more Contact us › {%- endif -%} {%- if slot == 'image' -%} -
    +
    Factory floor + alt="Factory floor"/> +
    +
    + Factory floor
    {%- endif -%} {% endcall -%} diff --git a/templates/docs/examples/patterns/rich-list/vertical/ordered.html b/templates/docs/examples/patterns/rich-list-vertical/ordered.html similarity index 82% rename from templates/docs/examples/patterns/rich-list/vertical/ordered.html rename to templates/docs/examples/patterns/rich-list-vertical/ordered.html index 98a9eb7dd..1220e6d15 100644 --- a/templates/docs/examples/patterns/rich-list/vertical/ordered.html +++ b/templates/docs/examples/patterns/rich-list-vertical/ordered.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %} -{% block title %}Rich list / Vertical / Numbered / Default{% endblock %} +{% block title %}Rich list / Vertical / Numbered{% endblock %} {% block standalone_css %}patterns_all{% endblock %} {% block content %} {% call(slot) vf_rich_vertical_list( @@ -15,7 +15,7 @@

    {%- endif -%} {%- if slot == 'logo_section' -%} - {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %} + {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %} {%- endif -%} {%- if slot == 'list_item_1' -%} No mandatory subscriptions for Ubuntu @@ -43,17 +43,18 @@ {%- if slot == 'list_item_7' -%} TCO analysis of Open Infra {%- endif -%} - {%- if slot == 'list_item_8' -%} - 451 study on private/public cloud cost - {%- endif -%} {%- if slot == 'cta' -%} Learn more Contact us › {%- endif -%} {%- if slot == 'image' -%} -
    +
    Factory floor + alt="Factory floor"/> +
    +
    + Factory floor
    {%- endif -%} {% endcall -%} diff --git a/templates/docs/examples/patterns/rich-list/vertical/ticked-flipped.html b/templates/docs/examples/patterns/rich-list-vertical/ticked-flipped.html similarity index 84% rename from templates/docs/examples/patterns/rich-list/vertical/ticked-flipped.html rename to templates/docs/examples/patterns/rich-list-vertical/ticked-flipped.html index 573657a2a..c62d2da82 100644 --- a/templates/docs/examples/patterns/rich-list/vertical/ticked-flipped.html +++ b/templates/docs/examples/patterns/rich-list-vertical/ticked-flipped.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %} -{% block title %}Rich list / Vertical / Ticked / Default{% endblock %} +{% block title %}Rich list / Vertical / Ticked / Flipped{% endblock %} {% block standalone_css %}patterns_all{% endblock %} {% block content %} {% call(slot) vf_rich_vertical_list( @@ -16,7 +16,7 @@

    {%- endif -%} {%- if slot == 'logo_section' -%} - {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %} + {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %} {%- endif -%} {%- if slot == 'list_item_1' -%} No mandatory subscriptions for Ubuntu @@ -44,18 +44,19 @@ {%- if slot == 'list_item_7' -%} TCO analysis of Open Infra {%- endif -%} - {%- if slot == 'list_item_8' -%} - 451 study on private/public cloud cost - {%- endif -%} {%- if slot == 'cta' -%} Learn more Contact us › {%- endif -%} {%- if slot == 'image' -%} -
    +
    Factory floor
    +
    + Factory floor +
    {%- endif -%} {% endcall -%} {% endblock %} diff --git a/templates/docs/examples/patterns/rich-list/vertical/ticked.html b/templates/docs/examples/patterns/rich-list-vertical/ticked.html similarity index 82% rename from templates/docs/examples/patterns/rich-list/vertical/ticked.html rename to templates/docs/examples/patterns/rich-list-vertical/ticked.html index 1ed73675e..8364894d9 100644 --- a/templates/docs/examples/patterns/rich-list/vertical/ticked.html +++ b/templates/docs/examples/patterns/rich-list-vertical/ticked.html @@ -1,7 +1,7 @@ {% extends "_layouts/examples.html" %} {% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %} -{% block title %}Rich list / Vertical / Ticked / Default{% endblock %} +{% block title %}Rich list / Vertical / Ticked{% endblock %} {% block standalone_css %}patterns_all{% endblock %} {% block content %} {% call(slot) vf_rich_vertical_list( @@ -15,7 +15,7 @@

    {%- endif -%} {%- if slot == 'logo_section' -%} - {% include 'docs/examples/patterns/rich-list/vertical/_logo-section.html' %} + {% include 'docs/examples/patterns/rich-list-vertical/_logo-section.html' %} {%- endif -%} {%- if slot == 'list_item_1' -%} No mandatory subscriptions for Ubuntu @@ -43,17 +43,18 @@ {%- if slot == 'list_item_7' -%} TCO analysis of Open Infra {%- endif -%} - {%- if slot == 'list_item_8' -%} - 451 study on private/public cloud cost - {%- endif -%} {%- if slot == 'cta' -%} Learn more Contact us › {%- endif -%} {%- if slot == 'image' -%} -
    +
    Factory floor + alt="Factory floor"/> +
    +
    + Factory floor
    {%- endif -%} {% endcall -%} diff --git a/templates/docs/examples/patterns/rich-list/combined.html b/templates/docs/examples/patterns/rich-list/combined.html deleted file mode 100644 index 6dcdf387e..000000000 --- a/templates/docs/examples/patterns/rich-list/combined.html +++ /dev/null @@ -1,18 +0,0 @@ -{% extends "_layouts/examples.html" %} -{% block title %}Rich list / Combined{% endblock %} - -{% block standalone_css %}patterns_all{% endblock %} - -{% block content %} - {% with is_combined = true %} -
    {% include 'docs/examples/patterns/rich-list/vertical/default.html' %}
    -
    {% include 'docs/examples/patterns/rich-list/vertical/flipped.html' %}
    -
    {% include 'docs/examples/patterns/rich-list/vertical/ticked.html' %}
    -
    {% include 'docs/examples/patterns/rich-list/vertical/ticked-flipped.html' %}
    -
    {% include 'docs/examples/patterns/rich-list/vertical/bulleted.html' %}
    -
    {% include 'docs/examples/patterns/rich-list/vertical/bulleted-flipped.html' %}
    -
    {% include 'docs/examples/patterns/rich-list/vertical/ordered.html' %}
    -
    {% include 'docs/examples/patterns/rich-list/vertical/ordered-flipped.html' %}
    -
    {% include 'docs/examples/patterns/rich-list/vertical/minimal.html' %}
    - {% endwith %} -{% endblock %} diff --git a/templates/docs/patterns/rich-list-vertical/index.md b/templates/docs/patterns/rich-list-vertical/index.md new file mode 100644 index 000000000..dfd7d211e --- /dev/null +++ b/templates/docs/patterns/rich-list-vertical/index.md @@ -0,0 +1,214 @@ +--- +wrapper_template: '_layouts/docs.html' +context: + title: Rich vertical list | Patterns +--- + +The rich vertical list is used to display a list alongside a title, logo section, image, and call-to-action block. + +The list inside the rich list is a divided list, which is a list with a horizontal divider between each item. +The list items can be [bulletless](/docs/patterns/lists#bulletless-with-horizontal-divider), +[bulleted](/docs/patterns/lists#bulleted-with-horizontal-divider), +[ticked](/docs/patterns/lists#ticked-with-horizontal-divider), +or [ordered](/docs/patterns/lists#ordered-lists-with-horizontal-divider). + +By default, text is on the left and the image is on the right. + +The vertical rich list pattern is composed of the following elements: + +| Element | Description | +| -------------------- | ---------------------------------------------------------------------------------------------- | +| Title (**required**) | H2 title text. | +| Logo section | A [logo section](/docs/patterns/logo-section) component. | +| Description | p description text. | +| List | A [divided list](/docs/patterns/lists#ticked-with-horizontal-divider) with up to 7 list items. | +| Call to action block | [Call to action block](/docs/patterns/cta-block) beneath the description. | +| Image (**required**) | Main list visual. | + +
    +View example of the vertical rich list pattern +
    + +## Flipped + +The horizontal ordering of the rich list columns can also be reversed, creating a flipped layout. + +
    +View example of the vertical rich list pattern +
    + +## Minimal + +The only mandatory elements in the rich vertical list are the title and the image, and one of the other (optional) elements. + +
    +View example of the vertical rich list pattern +
    + +## Jinja Macro + +The `vf_rich_vertical_list` Jinja macro can be used to generate a rich vertical list pattern. The API for the macro is shown below. + +### Parameters + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameRequired?TypeDefaultDescription
    + title_text + + Yes + + string + + N/A + + Title of the rich vertical list. +
    + list_item_tick_style + + No + + One of:
    + 'bullet',
    + 'tick',
    + 'number' +     		+ N/A + + Type of list item tick styling. +
    + is_flipped + + No + + boolean + + false + + Whether the list items are flipped so the image is on the left and the text is on the right. +
    +
    + +### Slots + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameRequired?Description
    + description + + No + + Paragraph-style description of the list. +
    + logo_section + + No + + A logo section component. +
    + list_item_[1-7] + + No + + A divided list item. +
    + cta + + No + + Contents of a CTA block to display beneath the list. +
    + image + + Yes + + Main list visual. +
    +
    + +## Import + +### Jinja Macro + +To import the Hero Jinja macro, copy the following import statement into your +Jinja template. + +```jinja +{% raw -%} +{% from "_macros/vf_rich-vertical-list.jinja" import vf_rich_vertical_list %} +{%- endraw -%} +``` + +View the [building with Jinja macros guide](/docs/building-vanilla#jinja-macros) +for macro installation instructions. + +### SCSS + +Since Patterns leverage many other parts of Vanilla in their composition and content, we +recommend [importing the entirety of Vanilla](/docs#install) for full support. diff --git a/templates/docs/patterns/rich-list/index.md b/templates/docs/patterns/rich-list/index.md deleted file mode 100644 index 062fbd1de..000000000 --- a/templates/docs/patterns/rich-list/index.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -wrapper_template: '_layouts/docs.html' -context: - title: Rich list | Patterns ---- - -The rich list is used to display a list alongside a title, logo section, image, and call-to-action block. - -The list inside the rich list is a divided list, which is a list with a horizontal divider between each item. -The list items can be [bulletless](/docs/patterns/lists#bulletless-with-horizontal-divider), -[bulleted](/docs/patterns/lists#bulleted-with-horizontal-divider), -[ticked](/docs/patterns/lists#ticked-with-horizontal-divider), -or [ordered](/docs/patterns/lists#ordered-lists-with-horizontal-divider). - -## Vertical - -The vertical rich list splits content vertically. By default, text is on the left and the image is on the right. - -The vertical rich list pattern is composed of the following elements: - -| Element | Description | -| -------------------- | ---------------------------------------------------------------------------------------------- | -| Title (**required**) | h2 title text | -| Logo section | Up to 8 [logo section](/docs/patterns/logo-section) logos | -| Description | p description text | -| List | A [divided list](/docs/patterns/lists#ticked-with-horizontal-divider) with up to 15 list items | -| Call to action block | [Call to action block](/docs/patterns/cta-block) beneath the description | -| Image (**required**) | Main list visual | - -
    -View example of the vertical rich list pattern -
    - -### Flipped - -To flip the image and text, simply reverse the ordering of the columns in the markup. - -
    -View example of the vertical rich list pattern -
    - -### Minimal - -The only mandatory elements in the rich vertical list are the title and the image, and one of the other (optional) elements. - -
    -View example of the vertical rich list pattern -
    - -## Import - -Since Patterns leverage many other parts of Vanilla in their composition and content, we -recommend [importing the entirety of Vanilla](/docs#install) for full support.