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.

Sign up for GitHub

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

Jump to bottom

Document tiered list macro #5351

Merged
merged 10 commits into from
Sep 19, 2024
Merged

Document tiered list macro #5351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
eb0a770
Rename hero macro
pastelcyborg Aug 28, 2024
331aaad
Document hero macro (#5325)
jmuzina Sep 4, 2024
da0dc36
Update _index.scss
pastelcyborg Sep 13, 2024
c720584
Update _index.scss
pastelcyborg Sep 13, 2024
98e5a44
Add tiered list docs; minor formatting updates
pastelcyborg Sep 13, 2024
a4f8334
File formatting fixes
pastelcyborg Sep 13, 2024
5775085
Change "call to action block" to "CTA block"
pastelcyborg Sep 13, 2024
b588d52
Add cta block slot docs
pastelcyborg Sep 13, 2024
d6a1e1c
Add code comments
pastelcyborg Sep 13, 2024
a2140c0
Apply static widths to table columns
pastelcyborg Sep 17, 2024
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
View file
Open in desktop
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
View file
Open in desktop
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