diff --git a/templates/docs/patterns/rich-list-horizontal/index.md b/templates/docs/patterns/rich-list-horizontal/index.md new file mode 100644 index 000000000..60b53e787 --- /dev/null +++ b/templates/docs/patterns/rich-list-horizontal/index.md @@ -0,0 +1,222 @@ +--- +wrapper_template: '_layouts/docs.html' +context: + title: Rich horizontal list | Patterns +--- + +{% from "docs/macros/patterns/wip-notice.jinja" import pattern_wip_notice %} + +{{- pattern_wip_notice() }} + +The rich horizontal 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 horizontal section, which is a list with a horizontal divider between each row of items. +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). + +The rich horizontal 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 (**required**) | A [horizontal section list](/docs/patterns/lists#horizontal-section-new) with up to 8 list items. | +| Call to action block | [Call to action block](/docs/patterns/cta-block) beneath the list. | +| Image | Main list visual. | + +## Default + +By default, all the pattern elements are vertically stacked. + +
+View example of the rich horizontal list pattern +
+ +## 50/50 + +The 50/50 layout splits the title, description, and logo section into two columns. This makes use of more horizontal white space, allowing for a more compact layout. + +
+View example of the rich horizontal list pattern in the 50/50 layout +
+ +## Minimal + +The only mandatory elements in the rich horizontal list are the title and the list, and one of the other (optional) elements. + +
+View example of the rich horizontal list pattern with minimal contents +
+ +## Jinja Macro + +The `vf_rich_horizontal_list` Jinja macro can be used to generate a rich horizontal list pattern. The API for the macro is shown below. + +### Parameters + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameRequired?TypeDefaultDescription
+ title_text + + Yes + + string + + N/A + + Title of the rich horizontal list. +
+ list_item_style + + No + + One of:
+ 'bullet',
+ 'tick',
+ 'number' + 		+ N/A + + Type of list item styling. +
+ variant + + No + + One of:
+ 'full-width',
+ '50/50' + 		+ "full-width" + + Layout variant selection +
+
+ +### 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 Rich Horizontal List Jinja macro, copy the following import statement into your +Jinja template. + +```jinja +{% raw -%} +{% from "_macros/vf_rich-horizontal-list.jinja" import vf_rich_horizontal_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.