vanilla-framework 4.27.0 → 4.28.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
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
- title_text (string) (required): The text to be displayed as the heading
|
|
4
4
|
- subtitle_text (string) (optional): The text to be displayed as the subtitle
|
|
5
5
|
- subtitle_heading_level (int) (optional): The heading level for the subtitle. Can be 4 or 5. Defaults to 5.
|
|
6
|
+
- highlight_images (boolean) (optional): If the images need to be highlighted, which means adding a subtle grey background. Not added by default.
|
|
6
7
|
- 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
8
|
- 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
9
|
- 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".
|
|
@@ -12,6 +13,7 @@
|
|
|
12
13
|
title_text,
|
|
13
14
|
subtitle_text="",
|
|
14
15
|
subtitle_heading_level=5,
|
|
16
|
+
highlight_images=false,
|
|
15
17
|
image_aspect_ratio_small="square",
|
|
16
18
|
image_aspect_ratio_medium="square",
|
|
17
19
|
image_aspect_ratio_large="2-3",
|
|
@@ -67,7 +69,7 @@
|
|
|
67
69
|
{#- Image item (required) -#}
|
|
68
70
|
<div class="p-equal-height-row__item">
|
|
69
71
|
<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">
|
|
72
|
+
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{% if highlight_images %} is-highlighted{% endif %}" >
|
|
71
73
|
{#- The consumer must pass in an img.p-image-container__image for the image to be properly formatted -#}
|
|
72
74
|
{{- image | safe -}}
|
|
73
75
|
</div>
|