diff --git a/templates/_macros/vf_tiered-list.jinja b/templates/_macros/vf_tiered-list.jinja index ea4dbabb9..c68b2e3f8 100644 --- a/templates/_macros/vf_tiered-list.jinja +++ b/templates/_macros/vf_tiered-list.jinja @@ -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 %}
diff --git a/templates/docs/patterns/hero/index.md b/templates/docs/patterns/hero/index.md index e0bda1c51..d052e687a 100644 --- a/templates/docs/patterns/hero/index.md +++ b/templates/docs/patterns/hero/index.md @@ -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
- +
- - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + +
NameIs requiredTypeDefaultDescriptionNameRequired?TypeDefaultDescription
layoutYes - One of: - '50/50', - '50/50-full-width-image', - '75/25', - '25/75', - 'fallback' - 'fallback'Choice of hero layout. + layout + + Yes + + One of:
+ '50/50',
+ '50/50-full-width-image',
+ '75/25',
+ '25/75',
+ 'fallback' + 		+ 'fallback' + + Choice of hero layout +
title_textYesstringN/Ah1 title text + title_text + + Yes + + string + + N/A + + h1 title text +
subtitle_textNostringN/Ah2 subtitle text + subtitle_text + + No + + string + + N/A + + h2 subtitle text +
is_split_on_mediumYesbooleanfalseWhether the layout is split on tablet-sized devices. + is_split_on_medium + + Yes + + boolean + + false + + Whether the layout is split on tablet-sized devices +
@@ -81,34 +119,60 @@ The hero pattern is composed of the following elements: ### Slots
- +
- - - + + + - - - + + + - - - + + + - - - + + + - - - + + +
NameIs requiredDescriptionNameRequired?Description
descriptionNoParagraph-style content below the title and subtitle. + description + + No + + Paragraph-style content below the title and subtitle +
ctaYesContents of a Call to action block beneath the title and description. + cta + + Yes + + Contents of a CTA block beneath + the title and description +
imageYes, when layout='50/50-full-width-image'Image content. + image + + Yes, when layout='50/50-full-width-image' + + Image content +
signpost_imageYes, when layout='25/75'Small image (such as a logo) to place in the left column of the 25/75 Hero. + signpost_image + + Yes, when layout='25/75' + + Small image (such as a logo) to place in the left column of the + 25/75 Hero +
@@ -195,7 +259,8 @@ 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 -%} @@ -203,7 +268,8 @@ To import the Hero Jinja macro, copy the following import statement into your Ji {%- 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 diff --git a/templates/docs/patterns/tiered-list/index.md b/templates/docs/patterns/tiered-list/index.md index 9487731e0..cd4b364ed 100644 --- a/templates/docs/patterns/tiered-list/index.md +++ b/templates/docs/patterns/tiered-list/index.md @@ -27,6 +27,132 @@ The tiered list pattern is composed of the following elements: | List item description | Description text/content with optional [CTA block](/docs/patterns/cta-block) | | Call to action block | [CTA block](/docs/patterns/cta-block) beneath the list | +## Jinja Macro + +### Parameters + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
NameRequired?TypeDefaultDescription
+ is_description_full_width_on_desktop + + Yes + + boolean + + true + + Whether the description element should be full-width on desktop +
+ is_list_full_width_on_tablet + + Yes + + boolean + + true + + Whether the list element should be full-width on tablet +
+
+ +### Slots + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameRequired?Description
+ title + + Yes + + Title sentence displayed at the top of the pattern +
+ description + + No + + Description paragraph displayed below the title +
+ list_item_title_[1-25] + + Yes, at least 1 + + Title element of each child list item; max of 25 +
+ list_item_description_[1-25] + + Yes, at least 1 + + Description element of each child list item; max of 25 +
+ cta + + No + + Contents of a CTA block at the + bottom of the pattern +
+
+ ## 50/50 on desktop with description This variant contains a top-level description which is presented side-by-side @@ -101,6 +227,20 @@ View example of the tiered list pattern ## Import +### Jinja Macro + +To import the Tiered List Jinja macro, copy the following import statement into +your Jinja template: + +```jinja +{% raw -%} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} +{%- endraw -%} +``` + +View the [building with Jinja macros guide](/docs/building-vanilla#jinja-macros) +for macro installation instructions. + 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.