From 2bc3791dd940ff1cd1da7fff165decb92d65440f Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Sun, 30 Nov 2025 07:22:46 -0500 Subject: [PATCH] Updated pattern docs to describe elements at a high level instead of duplicating Jinja API --- .../docs/patterns/equal-heights/index.md | 35 +++++++-------- .../patterns/linked-logo-section/index.md | 23 +++++----- .../docs/patterns/pricing-block/index.md | 44 +++++++++++-------- 3 files changed, 53 insertions(+), 49 deletions(-) diff --git a/templates/docs/patterns/equal-heights/index.md b/templates/docs/patterns/equal-heights/index.md index c1464b69e..1edf6cc1e 100644 --- a/templates/docs/patterns/equal-heights/index.md +++ b/templates/docs/patterns/equal-heights/index.md @@ -12,20 +12,15 @@ The equal heights pattern is used to display rich content about multiple items i The equal heights pattern is composed of the following elements: -| Element | Description | -| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| title_text (**required**) | `H2` title text. | -| subtitle_text | `H4` or `H5` subtitle text, depending on `subtitle_heading_level`. | -| subtitle_heading_level | Heading level of the subtitles. May be `4` or `5`. Defaults to `5`. | -| highlight_images | If the images need to be [highlighted](https://vanillaframework.io/docs/patterns/images#highlighted-image). Not added by default. | -| image_aspect_ratio_small | The aspect ratio to apply to item images on [small screens](/docs/settings/breakpoint-settings). Can be any of the [image container aspect ratio identifiers](/docs/patterns/images#class-reference) or "auto" to use the image's original aspect ratio. Defaults to "square". | -| image_aspect_ratio_medium | The aspect ratio to apply to item images on [medium screens](/docs/settings/breakpoint-settings). Can be any of the [image container aspect ratio identifiers](/docs/patterns/images#class-reference) or "auto" to use the image's original aspect ratio. Defaults to "square". | -| image_aspect_ratio_large | The aspect ratio to apply to item images on [large screens](/docs/settings/breakpoint-settings). Can be any of the [image container aspect ratio identifiers](/docs/patterns/images#class-reference) or "auto" to use the image's original aspect ratio. Defaults to "2-3". | -| items (**required**) | An `Array` of individual item properties. | -| items[].title_text | The title for the item. | -| items[].description_html | The description for the item. | -| items[].image_html | The image element for the item. | -| items[].cta_html | The call to action element for the item. | +| Element | Description | +| -------------------- | -------------------------------- | +| Title (**required**) | `H2` title text. | +| Subtitle | `H4` or `H5` subtitle text. | +| Items (**required**) | A series of equal heights items. | +| Item title | Title for the item | +| Item description | Description for the item | +| Item image | Image for the item | +| Item CTA | Call to action for the item | ## 4 columns @@ -37,7 +32,8 @@ View example of the equal heights pattern ## 3 columns -If the number of items is evenly divisible by 3, but not evenly divisible by 4 (for example, 6 items), the items will be laid out in 3 columns on large screens. +If the number of items is evenly divisible by 3, but not evenly divisible by 4 (for example, 6 items), the items will be +laid out in 3 columns on large screens.
View example of the equal heights pattern @@ -63,9 +59,11 @@ View example of the equal heights pattern The presence of an element in one of the items establishes a visual rhythm that should be upheld by the other items. For optimal visual consistency, the properties of the individual `items` should be consistent in each invocation -of the pattern. For example, if one item has a `description_html` property, all items should have a `description_html` property. +of the pattern. For example, if one item has a `description_html` property, all items should have a `description_html` +property. -In the following example, the second and fourth items are missing descriptions, and the third and fourth items are missing CTAs. +In the following example, the second and fourth items are missing descriptions, and the third and fourth items are +missing CTAs. This demonstrates what **not** to do with this pattern.
@@ -74,7 +72,8 @@ View example of the equal heights pattern ## Highlighted Images -To [highlight](https://vanillaframework.io/docs/patterns/images#highlighted-image) images within the pattern, set `highlight_images=True`. This is generally used when images are illustrations. +To [highlight](https://vanillaframework.io/docs/patterns/images#highlighted-image) images within the pattern, set +`highlight_images=True`. This is generally used when images are illustrations.
View example of the equal heights pattern diff --git a/templates/docs/patterns/linked-logo-section/index.md b/templates/docs/patterns/linked-logo-section/index.md index 34dac9a4d..e50d214ee 100644 --- a/templates/docs/patterns/linked-logo-section/index.md +++ b/templates/docs/patterns/linked-logo-section/index.md @@ -12,15 +12,11 @@ A linked logo section is used to display a list of logos which explicitly link t The linked logo section pattern is composed of the following elements: -| Element | Description | -| --------------------------------- | ----------------------------------------------------------------------------------------- | -| title_text | `H2` title text. | -| Layout | Defaults to `full-width`, with additional options for `50-50`, and `25-75` layout splits. | -| Links (**required**) | An `Array` of individual image link properties. | -| Links[].href (**required**) | The target link for the logo. | -| Links[].text (**required**) | The link text for the logo. | -| Links[].label (**required**) | The `aria-label` for the logo. | -| Links[].image_html (**required**) | The logo image element. | +| Element | Description | +| ------------------------- | ------------------------------------------ | +| Title | `H2` title text. | +| Links (**required**) | A series of links and associated metadata. | +| Link image (**required**) | An image to display for the link. | ## Full width @@ -32,7 +28,8 @@ View example of the linked logo section full-width pattern ## 50/50 -This variant can be used for adding a header and the logo section in different columns. This should only be used when there's a maximum of 6 logos to avoid occupying too much vertical space. +This variant can be used for adding a header and the logo section in different columns. This should only be used when +there's a maximum of 6 logos to avoid occupying too much vertical space.
View example of the linked logo section 50-50 pattern @@ -40,7 +37,8 @@ View example of the linked logo section 50-50 pattern ## 25/75 -This variant can be used for adding a header and the logo section in different columns, but can accommodate up to 9 logos. Be aware that the heading only occupies 25% width here, so only very short titles would be appropriate here. +This variant can be used for adding a header and the logo section in different columns, but can accommodate up to 9 +logos. Be aware that the heading only occupies 25% width here, so only very short titles would be appropriate here.
View example of the linked logo section 25-75 pattern @@ -48,7 +46,8 @@ View example of the linked logo section 25-75 pattern ## Jinja Macro -The `vf_linked_logo_section` Jinja macro can be used to generate a linked logo list pattern. The API for the macro is shown below. +The `vf_linked_logo_section` Jinja macro can be used to generate a linked logo list pattern. The API for the macro is +shown below. ### Parameters diff --git a/templates/docs/patterns/pricing-block/index.md b/templates/docs/patterns/pricing-block/index.md index 8b3c301de..ebf9059ed 100644 --- a/templates/docs/patterns/pricing-block/index.md +++ b/templates/docs/patterns/pricing-block/index.md @@ -4,7 +4,10 @@ context: title: Pricing block | Patterns --- -The Pricing block pattern is used to display individual cards representing different tiers of pricing and their associated offerings, positioned below a title and a description of the product. It uses the 4-4-8 grid pattern with subgrid, to retain alignment between rows. There are three variations of the block layout, depending on the number of cards displayed, ranging from two to four: +The Pricing block pattern is used to display individual cards representing different tiers of pricing and their +associated offerings, positioned below a title and a description of the product. It uses the 4-4-8 grid pattern with +subgrid, to retain alignment between rows. There are three variations of the block layout, depending on the number of +cards displayed, ranging from two to four: - 4 blocks, 25-25-25-25 split - 3 blocks, 25-75 split @@ -16,24 +19,24 @@ The Pricing block pattern is used to display individual cards representing diffe The Pricing block pattern is composed of the following elements: -| Element | Description | -| -------------------------------------------------------- | ----------------------------------------------------------------------------- | -| Title (**required**) | h2 title text | -| Description | p description text | -| Tiers (**required**) | An `Array` of individual tiers representing different pricing options | -| Tiers[].Name (**optional**) | h2 tier title | -| Tiers[].Price (**required**) | The price of the tier | -| Tiers[].Price explanation (**required**) | The timeframe/coverage for the pricing tier | -| Tier[].Description | Descriptive text for the pricing tier | -| Tier[].List label (**required**) | A header for the list of offerings | -| Tier[].Tier offerings (**required**) | An `Array` of what is offered in this tier | -| Tier[].Tier offerings[].List item style | The style of the list item | -| Tier[].Tier offerings[].List item content (**required**) | The list item content | -| Call to action | [Call to action block](/docs/patterns/cta-block) beneath the list | +| Element | Description | +| ---------------------------------------------- | ------------------------------------------------------------------- | +| Title (**required**) | h2 title text | +| Description | p description text | +| Tiers (**required**) | A series of individual tiers representing different pricing options | +| Tier name (**optional**) | h2 tier title | +| Tier price (**required**) | The price of the tier | +| Tier price explanation (**required**) | The timeframe/coverage for the pricing tier | +| Tier description | Descriptive text for the pricing tier | +| Tier list label (**required**) | A header for the list of offerings | +| Tier offerings (**required**) | What is offered in this tier | +| Tier offering List item content (**required**) | The list item content | +| Call to action | [Call to action block](/docs/patterns/cta-block) beneath the list | ## 4-blocks -The cards are evenly spread across the available space, with any gaps in content not affecting the alignment of the grid. +The cards are evenly spread across the available space, with any gaps in content not affecting the alignment of the +grid.
View example of 4 pricing blocks @@ -73,7 +76,8 @@ View example of the pricing block with a description ## Block with a highlighted rule -A pricing block with a highlighted rule at the top, instead of the default rule +A pricing block with a highlighted rule at the +top, instead of the default rule
View example of the pricing block with description and a highlighted rule @@ -81,7 +85,8 @@ View example of the pricing block with description and a highlighted rule ## Block with a muted rule -A pricing block with a muted rule at the top, instead of the default rule +A pricing block with a muted rule at the top, instead +of the default rule
View example of the pricing block with a muted rule and no description @@ -89,7 +94,8 @@ View example of the pricing block with a muted rule and no description ## Jinja Macro -The `vf_pricing_block` Jinja macro can be used to generate a pricing tier comparison. The API for the macro is shown below. +The `vf_pricing_block` Jinja macro can be used to generate a pricing tier comparison. The API for the macro is shown +below. ### Parameters