Skip to content

docs(patterns): Pattern elements docs describe content, not API #5706

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

Open
jmuzina wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs(patterns): Pattern elements docs describe content, not API #5706

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
35 changes: 17 additions & 18 deletions templates/docs/patterns/equal-heights/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<Object>` 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

Expand All @@ -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.

<div class="embedded-example"><a href="/docs/examples/patterns/equal-heights/3-columns-responsive" class="js-example" data-lang="jinja">
View example of the equal heights pattern
Expand All @@ -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.

<div class="embedded-example"><a href="/docs/examples/patterns/equal-heights/mixed-column-items-responsive" class="js-example" data-lang="jinja">
Expand All @@ -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.

<div class="embedded-example"><a href="/docs/examples/patterns/equal-heights/4-columns-highlighted-images" class="js-example" data-lang="jinja">
View example of the equal heights pattern
Expand Down
23 changes: 11 additions & 12 deletions templates/docs/patterns/linked-logo-section/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<Object>` 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

Expand All @@ -32,23 +28,26 @@ 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.

<div class="embedded-example"><a href="/docs/examples/patterns/linked-logo-section/50-50" class="js-example" data-lang="jinja">
View example of the linked logo section 50-50 pattern
</a></div>

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

<div class="embedded-example"><a href="/docs/examples/patterns/linked-logo-section/25-75" class="js-example" data-lang="jinja">
View example of the linked logo section 25-75 pattern
</a></div>

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

Expand Down
44 changes: 25 additions & 19 deletions templates/docs/patterns/pricing-block/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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**) | <code>h2</code> title text |
| Description | <code>p</code> description text |
| Tiers (**required**) | An `Array<Object>` of individual tiers representing different pricing options |
| Tiers[].Name (**optional**) | <code>h2</code> 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<Object>` 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**) | <code>h2</code> title text |
| Description | <code>p</code> description text |
| Tiers (**required**) | A series of individual tiers representing different pricing options |
| Tier name (**optional**) | <code>h2</code> 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.

<div class="embedded-example"><a href="/docs/examples/patterns/pricing-block/4-blocks" class="js-example" data-lang="jinja">
View example of 4 pricing blocks
Expand Down Expand Up @@ -73,23 +76,26 @@ View example of the pricing block with a description

## Block with a highlighted rule

A pricing block with a <a href="https://vanillaframework.io/docs/patterns/rule#highlighted">highlighted rule</a> at the top, instead of the <a href="https://vanillaframework.io/docs/patterns/rule#default">default rule</a>
A pricing block with a <a href="https://vanillaframework.io/docs/patterns/rule#highlighted">highlighted rule</a> at the
top, instead of the <a href="https://vanillaframework.io/docs/patterns/rule#default">default rule</a>

<div class="embedded-example"><a href="/docs/examples/patterns/pricing-block/block-with-highlighted-rule" class="js-example" data-lang="jinja">
View example of the pricing block with description and a highlighted rule
</a></div>

## Block with a muted rule

A pricing block with a <a href="https://vanillaframework.io/docs/patterns/rule#muted">muted rule</a> at the top, instead of the <a href="https://vanillaframework.io/docs/patterns/rule#default">default rule</a>
A pricing block with a <a href="https://vanillaframework.io/docs/patterns/rule#muted">muted rule</a> at the top, instead
of the <a href="https://vanillaframework.io/docs/patterns/rule#default">default rule</a>

<div class="embedded-example"><a href="/docs/examples/patterns/pricing-block/block-with-muted-rule" class="js-example" data-lang="jinja">
View example of the pricing block with a muted rule and no description
</a></div>

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

Expand Down