Skip to content

Commit 248adca

Browse files
jmuzinajmuzina
authored
Updated pattern docs to describe elements at a high level instead of duplicating Jinja API (canonical#5706)
1 parent eca812c commit 248adca

File tree

3 files changed

+60
-49
lines changed

3 files changed

+60
-49
lines changed

‎templates/docs/patterns/equal-heights/index.md‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,15 @@ The equal heights pattern is used to display rich content about multiple items i
1212

1313
The equal heights pattern is composed of the following elements:
1414

15-
| Element | Description |
16-
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
17-
| title_text (**required**) | `H2` title text. |
18-
| subtitle_text | `H4` or `H5` subtitle text, depending on `subtitle_heading_level`. |
19-
| subtitle_heading_level | Heading level of the subtitles. May be `4` or `5`. Defaults to `5`. |
20-
| highlight_images | If the images need to be [highlighted](https://vanillaframework.io/docs/patterns/images#highlighted-image). Not added by default. |
21-
| 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". |
22-
| 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". |
23-
| 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". |
24-
| items (**required**) | An `Array<Object>` of individual item properties. |
25-
| items[].title_text | The title for the item. |
26-
| items[].title_link_attrs | Object of attributes of an <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#attributes">anchor element</a> to link the title of item. |
27-
| items[].description_html | The description for the item. |
28-
| items[].image_html | The image element for the item. |
29-
| items[].cta_html | The call to action element for the item. |
15+
| Element | Description |
16+
| -------------------- | -------------------------------- |
17+
| Title (**required**) | `H2` title text. |
18+
| Subtitle | `H4` or `H5` subtitle text. |
19+
| Items (**required**) | A series of equal heights items. |
20+
| Item title | Title for the item |
21+
| Item description | Description for the item |
22+
| Item image | Image for the item |
23+
| Item CTA | Call to action for the item |
3024

3125
## 4 columns
3226

@@ -38,7 +32,8 @@ View example of the equal heights pattern
3832

3933
## 3 columns
4034

41-
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.
35+
If the number of items is evenly divisible by 3, but not evenly divisible by 4 (for example, 6 items), the items will be
36+
laid out in 3 columns on large screens.
4237

4338
<div class="embedded-example"><a href="/docs/examples/patterns/equal-heights/3-columns-responsive" class="js-example" data-lang="jinja">
4439
View example of the equal heights pattern
@@ -72,15 +67,26 @@ View example of the equal heights pattern
7267

7368
The presence of an element in one of the items establishes a visual rhythm that should be upheld by the other items.
7469
For optimal visual consistency, the properties of the individual `items` should be consistent in each invocation
75-
of the pattern. For example, if one item has a `description_html` property, all items should have a `description_html` property.
70+
of the pattern. For example, if one item has a `description_html` property, all items should have a `description_html`
71+
property.
7672

77-
In the following example, the second and fourth items are missing descriptions, and the third and fourth items are missing CTAs.
73+
In the following example, the second and fourth items are missing descriptions, and the third and fourth items are
74+
missing CTAs.
7875
This demonstrates what **not** to do with this pattern.
7976

8077
<div class="embedded-example"><a href="/docs/examples/patterns/equal-heights/mixed-column-items-responsive" class="js-example" data-lang="jinja">
8178
View example of the equal heights pattern
8279
</a></div>
8380

81+
## Highlighted Images
82+
83+
To [highlight](https://vanillaframework.io/docs/patterns/images#highlighted-image) images within the pattern, set
84+
`highlight_images=True`. This is generally used when images are illustrations.
85+
86+
<div class="embedded-example"><a href="/docs/examples/patterns/equal-heights/4-columns-highlighted-images" class="js-example" data-lang="jinja">
87+
View example of the equal heights pattern
88+
</a></div>
89+
8490
## Jinja Macro
8591

8692
The `vf_equal_heights` Jinja macro can be used to generate an equal heights pattern. The API for the macro is

‎templates/docs/patterns/linked-logo-section/index.md‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,11 @@ A linked logo section is used to display a list of logos which explicitly link t
1212

1313
The linked logo section pattern is composed of the following elements:
1414

15-
| Element | Description |
16-
| --------------------------------- | ----------------------------------------------------------------------------------------- |
17-
| title_text | `H2` title text. |
18-
| Layout | Defaults to `full-width`, with additional options for `50-50`, and `25-75` layout splits. |
19-
| Links (**required**) | An `Array<Object>` of individual image link properties. |
20-
| Links[].href (**required**) | The target link for the logo. |
21-
| Links[].text (**required**) | The link text for the logo. |
22-
| Links[].label (**required**) | The `aria-label` for the logo. |
23-
| Links[].image_html (**required**) | The logo image element. |
15+
| Element | Description |
16+
| ------------------------- | ------------------------------------------ |
17+
| Title | `H2` title text. |
18+
| Links (**required**) | A series of links and associated metadata. |
19+
| Link image (**required**) | An image to display for the link. |
2420

2521
## Full width
2622

@@ -32,23 +28,26 @@ View example of the linked logo section full-width pattern
3228

3329
## 50/50
3430

35-
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.
31+
This variant can be used for adding a header and the logo section in different columns. This should only be used when
32+
there's a maximum of 6 logos to avoid occupying too much vertical space.
3633

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

4138
## 25/75
4239

43-
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.
40+
This variant can be used for adding a header and the logo section in different columns, but can accommodate up to 9
41+
logos. Be aware that the heading only occupies 25% width here, so only very short titles would be appropriate here.
4442

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

4947
## Jinja Macro
5048

51-
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.
49+
The `vf_linked_logo_section` Jinja macro can be used to generate a linked logo list pattern. The API for the macro is
50+
shown below.
5251

5352
### Parameters
5453

‎templates/docs/patterns/pricing-block/index.md‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ context:
44
title: Pricing block | Patterns
55
---
66

7-
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:
7+
The Pricing block pattern is used to display individual cards representing different tiers of pricing and their
8+
associated offerings, positioned below a title and a description of the product. It uses the 4-4-8 grid pattern with
9+
subgrid, to retain alignment between rows. There are three variations of the block layout, depending on the number of
10+
cards displayed, ranging from two to four:
811

912
- 4 blocks, 25-25-25-25 split
1013
- 3 blocks, 25-75 split
@@ -16,24 +19,24 @@ The Pricing block pattern is used to display individual cards representing diffe
1619

1720
The Pricing block pattern is composed of the following elements:
1821

19-
| Element | Description |
20-
| -------------------------------------------------------- | ----------------------------------------------------------------------------- |
21-
| Title (**required**) | <code>h2</code> title text |
22-
| Description | <code>p</code> description text |
23-
| Tiers (**required**) | An `Array<Object>` of individual tiers representing different pricing options |
24-
| Tiers[].Name (**optional**) | <code>h2</code> tier title |
25-
| Tiers[].Price (**required**) | The price of the tier |
26-
| Tiers[].Price explanation (**required**) | The timeframe/coverage for the pricing tier |
27-
| Tier[].Description | Descriptive text for the pricing tier |
28-
| Tier[].List label (**required**) | A header for the list of offerings |
29-
| Tier[].Tier offerings (**required**) | An `Array<Object>` of what is offered in this tier |
30-
| Tier[].Tier offerings[].List item style | The style of the list item |
31-
| Tier[].Tier offerings[].List item content (**required**) | The list item content |
32-
| Call to action | [Call to action block](/docs/patterns/cta-block) beneath the list |
22+
| Element | Description |
23+
| ---------------------------------------------- | ------------------------------------------------------------------- |
24+
| Title (**required**) | <code>h2</code> title text |
25+
| Description | <code>p</code> description text |
26+
| Tiers (**required**) | A series of individual tiers representing different pricing options |
27+
| Tier name (**optional**) | <code>h2</code> tier title |
28+
| Tier price (**required**) | The price of the tier |
29+
| Tier price explanation (**required**) | The timeframe/coverage for the pricing tier |
30+
| Tier description | Descriptive text for the pricing tier |
31+
| Tier list label (**required**) | A header for the list of offerings |
32+
| Tier offerings (**required**) | What is offered in this tier |
33+
| Tier offering List item content (**required**) | The list item content |
34+
| Call to action | [Call to action block](/docs/patterns/cta-block) beneath the list |
3335

3436
## 4-blocks
3537

36-
The cards are evenly spread across the available space, with any gaps in content not affecting the alignment of the grid.
38+
The cards are evenly spread across the available space, with any gaps in content not affecting the alignment of the
39+
grid.
3740

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

7477
## Block with a highlighted rule
7578

76-
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>
79+
A pricing block with a <a href="https://vanillaframework.io/docs/patterns/rule#highlighted">highlighted rule</a> at the
80+
top, instead of the <a href="https://vanillaframework.io/docs/patterns/rule#default">default rule</a>
7781

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

8286
## Block with a muted rule
8387

84-
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>
88+
A pricing block with a <a href="https://vanillaframework.io/docs/patterns/rule#muted">muted rule</a> at the top, instead
89+
of the <a href="https://vanillaframework.io/docs/patterns/rule#default">default rule</a>
8590

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

9095
## Jinja Macro
9196

92-
The `vf_pricing_block` Jinja macro can be used to generate a pricing tier comparison. The API for the macro is shown below.
97+
The `vf_pricing_block` Jinja macro can be used to generate a pricing tier comparison. The API for the macro is shown
98+
below.
9399

94100
### Parameters
95101

0 commit comments

Comments
 (0)