vanilla-framework 4.23.2 → 4.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
Column:
|
|
16
16
|
.p-equal-height-row__col:
|
|
17
17
|
Column element within an equal height row.
|
|
18
|
+
.p-equal-height-row__col.is-borderless:
|
|
19
|
+
Column element within an equal height row with no top border.
|
|
18
20
|
Item:
|
|
19
21
|
.p-equal-height-row__item:
|
|
20
22
|
Item element within an equal height row column.
|
|
@@ -68,6 +70,10 @@
|
|
|
68
70
|
}
|
|
69
71
|
}
|
|
70
72
|
|
|
73
|
+
.p-equal-height-row__col.is-borderless {
|
|
74
|
+
border: none;
|
|
75
|
+
}
|
|
76
|
+
|
|
71
77
|
// DIVIDERS
|
|
72
78
|
|
|
73
79
|
// For each row or column grid we only have access to two pseudo elements:
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
{#-
|
|
2
|
+
Params
|
|
3
|
+
- title_text (string) (required): The text to be displayed as the heading
|
|
4
|
+
- subtitle_text (string) (optional): The text to be displayed as the subtitle
|
|
5
|
+
- subtitle_heading_level (int) (optional): The heading level for the subtitle. Can be 4 or 5. Defaults to 5.
|
|
6
|
+
- image_aspect_ratio_small (string) (optional): The aspect ratio for item images on small screens. Defaults to "square". Can be "square", "2-3", "3-2", "16-9", "cinematic". Defaults to "square".
|
|
7
|
+
- image_aspect_ratio_medium (string) (optional): The aspect ratio for item images on medium screens. Defaults to "square". Can be "square", "2-3", "3-2", "16-9", "cinematic". Defaults to "square".
|
|
8
|
+
- image_aspect_ratio_large (string) (optional): The aspect ratio for item images on large screens. Defaults to "2-3". Can be "square", "2-3", "3-2", "16-9", "cinematic". Defaults to "2-3".
|
|
9
|
+
- items (array) (required): An array of items, each including 'image_html', 'title_text', 'description_html', and 'cta_html'.
|
|
10
|
+
-#}
|
|
11
|
+
{%- macro vf_equal_heights(
|
|
12
|
+
title_text,
|
|
13
|
+
subtitle_text="",
|
|
14
|
+
subtitle_heading_level=5,
|
|
15
|
+
image_aspect_ratio_small="square",
|
|
16
|
+
image_aspect_ratio_medium="square",
|
|
17
|
+
image_aspect_ratio_large="2-3",
|
|
18
|
+
items=[]
|
|
19
|
+
) -%}
|
|
20
|
+
{% set has_subtitle = subtitle_text | trim | length > 0 %}
|
|
21
|
+
{% set description_content = caller('description') | trim %}
|
|
22
|
+
{% set has_description = description_content | length > 0 %}
|
|
23
|
+
{% set cta_content = caller('cta') | trim %}
|
|
24
|
+
{% set has_cta = cta_content | length > 0 %}
|
|
25
|
+
|
|
26
|
+
{% set has_two_top_cols = has_subtitle or has_description %}
|
|
27
|
+
|
|
28
|
+
{%- if subtitle_heading_level not in [4, 5] -%}
|
|
29
|
+
{% set subtitle_heading_level=5 %}
|
|
30
|
+
{%- endif -%}
|
|
31
|
+
|
|
32
|
+
<div class="p-section">
|
|
33
|
+
<hr class="p-rule is-fixed-width"/>
|
|
34
|
+
<div class="p-section--shallow">
|
|
35
|
+
{%- if has_two_top_cols -%}
|
|
36
|
+
<div class="row--50-50-on-large">
|
|
37
|
+
<div class="col">
|
|
38
|
+
{%- endif -%}
|
|
39
|
+
<h2{% if not has_two_top_cols %} class="u-fixed-width"{% endif %}>{{ title_text }}</h2>
|
|
40
|
+
{%- if has_two_top_cols -%}
|
|
41
|
+
</div>
|
|
42
|
+
{%- endif -%}
|
|
43
|
+
{%- if has_two_top_cols -%}
|
|
44
|
+
<div class="col">
|
|
45
|
+
{%- if has_subtitle -%}
|
|
46
|
+
<p class="p-heading--{{ subtitle_heading_level }}">{{ subtitle_text }}</p>
|
|
47
|
+
{%- endif -%}
|
|
48
|
+
{%- if has_description -%}
|
|
49
|
+
{{- description_content -}}
|
|
50
|
+
{%- endif -%}
|
|
51
|
+
</div>
|
|
52
|
+
{%- endif -%}
|
|
53
|
+
{%- if has_two_top_cols -%}
|
|
54
|
+
</div>
|
|
55
|
+
{%- endif -%}
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<div class="row">
|
|
59
|
+
<div class="{%- if items | length % 3 == 0 and items | length % 4 != 0 -%}col-9 col-start-large-4{%- else -%}col{%- endif -%}">
|
|
60
|
+
<div class="p-equal-height-row--wrap">
|
|
61
|
+
{%- for item in items -%}
|
|
62
|
+
{% set image = item.get("image_html") | trim %}
|
|
63
|
+
{% set title = item.get("title_text") | trim %}
|
|
64
|
+
{% set description = item.get("description_html") or "" | trim %}
|
|
65
|
+
{% set cta = item.get("cta_html") or "" | trim %}
|
|
66
|
+
<div class="p-equal-height-row__col is-borderless">
|
|
67
|
+
{#- Image item (required) -#}
|
|
68
|
+
<div class="p-equal-height-row__item">
|
|
69
|
+
<div
|
|
70
|
+
class="p-image-container--{{ image_aspect_ratio_small }}-on-small p-image-container--{{ image_aspect_ratio_medium }}-on-medium p-image-container--{{ image_aspect_ratio_large }}-on-large is-cover">
|
|
71
|
+
{#- The consumer must pass in an img.p-image-container__image for the image to be properly formatted -#}
|
|
72
|
+
{{- image | safe -}}
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
{#- Title item (required) -#}
|
|
76
|
+
<div class="p-equal-height-row__item">
|
|
77
|
+
<hr class="p-rule--highlight"/>
|
|
78
|
+
<p class="p-heading--{{ subtitle_heading_level }}">{{- title -}}</p>
|
|
79
|
+
</div>
|
|
80
|
+
{#- Description item (optional) -#}
|
|
81
|
+
<div class="p-equal-height-row__item">
|
|
82
|
+
{{- description | safe -}}
|
|
83
|
+
</div>
|
|
84
|
+
{#- CTA item (optional) -#}
|
|
85
|
+
<div class="p-equal-height-row__item">
|
|
86
|
+
{%- if cta | length > 0 -%}
|
|
87
|
+
<p>
|
|
88
|
+
{{- cta | safe -}}
|
|
89
|
+
</p>
|
|
90
|
+
{%- endif -%}
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
{%- endfor -%}
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
{%- if has_cta -%}
|
|
98
|
+
<div class="row">
|
|
99
|
+
<hr class="p-rule--muted">
|
|
100
|
+
<div class="col-6 col-medium-3 col-start-large-7 col-start-medium-4">
|
|
101
|
+
<p>
|
|
102
|
+
{{- cta_content -}}
|
|
103
|
+
</p>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
{%- endif -%}
|
|
107
|
+
</div>
|
|
108
|
+
{%- endmacro -%}
|