Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document tiered list macro #5351

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions templates/_macros/vf_tiered-list.jinja
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@
{%- set list_item_description_content = caller('list_item_description_' + number|string) -%}
{%- set has_description_content = list_item_description_content|trim|length > 0 -%}

{#- Check to see if title/description content exist, since we're
iterating through 25 potential list items -#}
{%- if has_title_content and has_description_content -%}
{%- if is_list_full_width_on_tablet == true %}
<div class="row">
Expand Down
182 changes: 124 additions & 58 deletions templates/docs/patterns/hero/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,64 +15,102 @@ Depending on the size and composition of your content, you can choose from a var

The hero pattern is composed of the following elements:

| Element | Description |
| -------------------- | ------------------------------------------------------------------------ |
| Title (**required**) | Title text (to be placed in `h1` heading) |
| Subtitle | Subtitle text (using `h2` style) |
| Description | Description text (one or more paragraphs) |
| Call to action block | [Call to action block](/docs/patterns/cta-block) beneath the description |
| Image | Main hero visual |
| Element | Description |
| -------------------- | ------------------------------------------------------------- |
| Title (**required**) | Title text (to be placed in `h1` heading) |
| Subtitle | Subtitle text (using `h2` style) |
| Description | Description text (one or more paragraphs) |
| Call to action block | [CTA block](/docs/patterns/cta-block) beneath the description |
| Image | Main hero visual |

## Jinja Macro

### Parameters

<div style="overflow: auto;">
<table style="overflow: visible; width: auto;">
pastelcyborg marked this conversation as resolved.
Show resolved Hide resolved
<table>
<thead>
<tr>
<th style="width: 20%;">Name</th>
<th style="width: 10%;">Is required</th>
<th style="width: 25%;">Type</th>
<th style="width: 15%;">Default</th>
<th style="width: 30%;">Description</th>
<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>layout</code></td>
<td>Yes</td>
<td>
One of:
<code>'50/50'</code>,
<code>'50/50-full-width-image'</code>,
<code>'75/25'</code>,
<code>'25/75'</code>,
<code>'fallback'</code>
</td>
<td><code>'fallback'</code></td>
<td>Choice of hero layout.</td>
<td>
<code>layout</code>
</td>
<td>
Yes
</td>
<td>
One of:<br>
<code>'50/50'</code>,<br>
<code>'50/50-full-width-image'</code>,<br>
<code>'75/25'</code>,<br>
<code>'25/75'</code>,<br>
<code>'fallback'</code>
</td>
<td>
<code>'fallback'</code>
</td>
<td>
Choice of hero layout
</td>
</tr>
<tr>
<td><code>title_text</code></td>
<td>Yes</td>
<td><code>string</code></td>
<td><code>N/A</code></td>
<td><code>h1</code> title text</td>
<td>
<code>title_text</code>
</td>
<td>
Yes
</td>
<td>
<code>string</code>
</td>
<td>
<code>N/A</code>
</td>
<td>
<code>h1</code> title text
</td>
</tr>
<tr>
<td><code>subtitle_text</code></td>
<td>No</td>
<td><code>string</code></td>
<td><code>N/A</code></td>
<td><code>h2</code> subtitle text</td>
<td>
<code>subtitle_text</code>
</td>
<td>
No
</td>
<td>
<code>string</code>
</td>
<td>
<code>N/A</code>
</td>
<td>
<code>h2</code> subtitle text
</td>
</tr>
<tr>
<td><code>is_split_on_medium</code></td>
<td>Yes</td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>Whether the layout is split on tablet-sized devices.</td>
<td>
<code>is_split_on_medium</code>
</td>
<td>
Yes
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>
Whether the layout is split on tablet-sized devices
</td>
</tr>
</tbody>
</table>
Expand All @@ -81,34 +119,60 @@ The hero pattern is composed of the following elements:
### Slots

<div style="overflow: auto;">
<table style="overflow: visible; width: auto;">
<table>
<thead>
<tr>
<th style="width: 20%;">Name</th>
<th style="width: 25%;">Is required</th>
<th style="width: 55%;">Description</th>
<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 content below the title and subtitle.</td>
<td>
<code>description</code>
</td>
<td>
No
</td>
<td>
Paragraph-style content below the title and subtitle
</td>
</tr>
<tr>
<td><code>cta</code></td>
<td>Yes</td>
<td>Contents of a <a href="/docs/patterns/cta-block">Call to action block</a> beneath the title and description.</td>
<td>
<code>cta</code>
</td>
<td>
Yes
</td>
<td>
Contents of a <a href="/docs/patterns/cta-block">CTA block</a> beneath
the title and description
</td>
</tr>
<tr>
<td><code>image</code></td>
<td>Yes, when <code>layout='50/50-full-width-image'</code></td>
<td>Image content.</td>
<td>
<code>image</code>
</td>
<td>
Yes, when <code>layout='50/50-full-width-image'</code>
</td>
<td>
Image content
</td>
</tr>
<tr>
<td><code>signpost_image</code></td>
<td>Yes, when <code>layout='25/75'</code></td>
<td>Small image (such as a logo) to place in the left column of the 25/75 Hero.</td>
<td>
<code>signpost_image</code>
</td>
<td>
Yes, when <code>layout='25/75'</code>
</td>
<td>
Small image (such as a logo) to place in the left column of the
25/75 Hero
</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -195,15 +259,17 @@ View example of the hero pattern in fallback configuration

### Jinja Macro

To import the Hero Jinja macro, copy the following import statement into your Jinja template.
To import the Hero Jinja macro, copy the following import statement into your
Jinja template.

```jinja
{% raw -%}
{% from "_macros/vf_hero.jinja" import vf_hero %}
{%- endraw -%}
```

View the [building with Jinja macros guide](/docs/building-vanilla#jinja-macros) for macro installation instructions.
View the [building with Jinja macros guide](/docs/building-vanilla#jinja-macros)
for macro installation instructions.

### SCSS

Expand Down
Loading
Loading