Skip to content

Commit

Permalink
Build rich horizontal list docs page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmuzina
jmuzina committed Jan 24, 2025
1 parent 6be3011 commit 9a5d036
Showing 1 changed file with 222 additions and 0 deletions.
222 changes: 222 additions & 0 deletions templates/docs/patterns/rich-list-horizontal/index.md
View file
Original file line number Diff line number Diff line change
@@ -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 <a href="/docs/patterns/list#horizontal-section-new">horizontal section</a>, 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**) | <code>H2</code> title text. |
| Logo section | A [logo section](/docs/patterns/logo-section) component. |
| Description | <code>p</code> 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.

<div class="embedded-example"><a href="/docs/examples/patterns/rich-list-horizontal/ticked" class="js-example" data-lang="jinja">
View example of the rich horizontal list pattern
</a></div>

## 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.

<div class="embedded-example"><a href="/docs/examples/patterns/rich-list-horizontal/ticked-50-50" class="js-example" data-lang="jinja">
View example of the rich horizontal list pattern in the 50/50 layout
</a></div>

## Minimal

The only mandatory elements in the rich horizontal list are the title and the list, and one of the other (optional) elements.

<div class="embedded-example"><a href="/docs/examples/patterns/rich-list-horizontal/minimal" class="js-example" data-lang="jinja">
View example of the rich horizontal list pattern with minimal contents
</a></div>

## 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

<div style="overflow: auto;">
<table>
<thead>
<tr>
<th style="width: 220px;">Name</th>
<th style="width: 160px;">Required?</th>
<th style="width: 160px;">Type</th>
<th style="width: 160px;">Default</th>
<th style="width: 250px;">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>title_text</code>
</td>
<td>
Yes
</td>
<td>
<code>string</code>
</td>
<td>
<code>N/A</code>
</td>
<td>
Title of the rich horizontal list.
</td>
</tr>
<tr>
<td>
<code>list_item_style</code>
</td>
<td>
No
</td>
<td>
One of:<br>
<code>'bullet'</code>,<br>
<code>'tick'</code>,<br>
<code>'number'</code>
</td>
<td>
<code>N/A</code>
</td>
<td>
Type of list item styling.
</td>
</tr>
<tr>
<td>
<code>variant</code>
</td>
<td>
No
</td>
<td>
One of:<br>
<code>'full-width'</code>,<br>
<code>'50/50'</code>
</td>
<td>
<code>"full-width"</code>
</td>
<td>
Layout variant selection
</td>
</tr>
</tbody>
</table>
</div>

### Slots

<div style="overflow: auto;">
<table>
<thead>
<tr>
<th style="width: 220px;">Name</th>
<th style="width: 160px;">Required?</th>
<th style="width: 250px;">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>description</code>
</td>
<td>
No
</td>
<td>
Paragraph-style description of the list.
</td>
</tr>
<tr>
<td>
<code>logo_section</code>
</td>
<td>
No
</td>
<td>
A <a href="/docs/patterns/logo-section">logo section</a> component.
</td>
</tr>
<tr>
<td>
<code>list_item_[1-7]</code>
</td>
<td>
No
</td>
<td>
A <a href="/docs/patterns/lists#ticked-with-horizontal-divider">divided list</a> item.
</td>
</tr>
<tr>
<td>
<code>cta</code>
</td>
<td>
No
</td>
<td>
Contents of a <a href="/docs/patterns/cta-block">CTA block</a> to display beneath the list.
</td>
</tr>
<tr>
<td>
<code>image</code>
</td>
<td>
Yes
</td>
<td>
Main list visual.
</td>
</tr>
</tbody>
</table>
</div>

## 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.

0 comments on commit 9a5d036

Please sign in to comment.