project modules: `data-wrapper`

Available Variants

prototype

Data Wrapper Widget

data-wrapper README

This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.

data-wrapper Twig The markup file.

<div class="data-wrapper // {{ data_wrapper_classes }}">
	<div class="lrv-a-wrapper">
		{% if c_heading %}
			{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
		{% endif %}

		<div class="{{data_wrapper_cards_classes}} ">
			{% for item in data_wrapper_items %}
				{% include "@project/objects/o-data-wrapper-item/o-data-wrapper-item.twig" with item %}
			{% endfor %}
		</div>
	</div>
</div>

data-wrapper JSON The data object for this pattern.

{
	"data_wrapper_classes": "lrv-u-background-color-grey-lightest lrv-u-align-items-center u-padding-tb-150@mobile-max u-padding-tb-3",
	"data_wrapper_cards_classes": "lrv-a-grid a-cols3@tablet u-padding-t-1@tablet u-grid-gap-0@mobile-max u-grid-gap-250@tablet a-children-border-vertical@mobile-max a-children-border--grey-light",
	"c_heading": {
		"c_heading_classes": "lrv-u-text-transform-uppercase a-font-secondary-bold-l lrv-u-padding-b-050 lrv-u-width-100p lrv-u-text-align-center lrv-u-border-b-1 lrv-u-border-color-grey-light lrv-u-line-height-normal",
		"c_heading_id_attr": "section-heading",
		"c_heading_text": "Data Wrapper Widget",
		"c_heading_url": "",
		"c_heading_link_classes": "",
		"c_heading_outer": false,
		"c_heading_outer_classes": "",
		"c_heading_is_primary_heading": false
	},
	"data_wrapper_items": [
		{
			"o_data_wrapper_item_classes": "lrv-u-flex lrv-u-flex-direction-column lrv-u-padding-tb-1 u-padding-tb-150@mobile-max lrv-u-align-items-center lrv-u-height-100p",
			"c_iframe": {
				"c_iframe_wrapper_classes": "lrv-u-width-100p lrv-u-height-100p",
				"c_iframe_classes": "lrv-u-width-100p",
				"c_iframe_url": "https://fr.wikipedia.org/wiki/Main_Page",
				"c_iframe_height_attr": "",
				"c_iframe_width_attr": ""
			},
			"more_stories_button": {
				"more_stories_button_classes": "a-font-secondary-bold-m lrv-u-text-transform-uppercase lrv-u-background-color-brand-secondary lrv-u-margin-t-150 u-width-250@tablet lrv-u-width-100p@mobile-max u-background-color-brand-secondary-dark:hover",
				"c_button": {
					"c_button_classes": "lrv-u-text-transform-uppercase lrv-u-width-100p lrv-u-color-black lrv-u-color-black:hover lrv-u-flex lrv-u-justify-content-center lrv-u-align-items-center lrv-u-font-size-18 lrv-u-font-family-primary lrv-u-font-weight-bold lrv-u-padding-tb-075",
					"c_button_ga_tracking": {},
					"c_button_inner_classes": "",
					"c_button_rel_attr": "",
					"c_button_screen_reader_text": "Sign Up",
					"c_button_target_attr": "",
					"c_button_text": "Read The Report",
					"c_button_type_attr": "submit",
					"c_button_url": "#"
				},
				"c_button_prev": false,
				"c_button_next": false
			}
		},
		{
			"o_data_wrapper_item_classes": "lrv-u-flex lrv-u-flex-direction-column lrv-u-padding-tb-1 u-padding-tb-150@mobile-max lrv-u-align-items-center lrv-u-height-100p",
			"c_iframe": {
				"c_iframe_wrapper_classes": "lrv-u-width-100p lrv-u-height-100p",
				"c_iframe_classes": "lrv-u-width-100p",
				"c_iframe_url": "https://fr.wikipedia.org/wiki/Main_Page",
				"c_iframe_height_attr": "",
				"c_iframe_width_attr": ""
			},
			"more_stories_button": {
				"more_stories_button_classes": "a-font-secondary-bold-m lrv-u-text-transform-uppercase lrv-u-background-color-brand-secondary lrv-u-margin-t-150 u-width-250@tablet lrv-u-width-100p@mobile-max u-background-color-brand-secondary-dark:hover",
				"c_button": {
					"c_button_classes": "lrv-u-text-transform-uppercase lrv-u-width-100p lrv-u-color-black lrv-u-color-black:hover lrv-u-flex lrv-u-justify-content-center lrv-u-align-items-center lrv-u-font-size-18 lrv-u-font-family-primary lrv-u-font-weight-bold lrv-u-padding-tb-075",
					"c_button_ga_tracking": {},
					"c_button_inner_classes": "",
					"c_button_rel_attr": "",
					"c_button_screen_reader_text": "Sign Up",
					"c_button_target_attr": "",
					"c_button_text": "Read The Report",
					"c_button_type_attr": "submit",
					"c_button_url": "#"
				},
				"c_button_prev": false,
				"c_button_next": false
			}
		},
		{
			"o_data_wrapper_item_classes": "lrv-u-flex lrv-u-flex-direction-column lrv-u-padding-tb-1 u-padding-tb-150@mobile-max lrv-u-align-items-center lrv-u-height-100p",
			"c_iframe": {
				"c_iframe_wrapper_classes": "lrv-u-width-100p lrv-u-height-100p",
				"c_iframe_classes": "lrv-u-width-100p",
				"c_iframe_url": "https://fr.wikipedia.org/wiki/Main_Page",
				"c_iframe_height_attr": "",
				"c_iframe_width_attr": ""
			},
			"more_stories_button": {
				"more_stories_button_classes": "a-font-secondary-bold-m lrv-u-text-transform-uppercase lrv-u-background-color-brand-secondary lrv-u-margin-t-150 u-width-250@tablet lrv-u-width-100p@mobile-max u-background-color-brand-secondary-dark:hover",
				"c_button": {
					"c_button_classes": "lrv-u-text-transform-uppercase lrv-u-width-100p lrv-u-color-black lrv-u-color-black:hover lrv-u-flex lrv-u-justify-content-center lrv-u-align-items-center lrv-u-font-size-18 lrv-u-font-family-primary lrv-u-font-weight-bold lrv-u-padding-tb-075",
					"c_button_ga_tracking": {},
					"c_button_inner_classes": "",
					"c_button_rel_attr": "",
					"c_button_screen_reader_text": "Sign Up",
					"c_button_target_attr": "",
					"c_button_text": "Read The Report",
					"c_button_type_attr": "submit",
					"c_button_url": "#"
				},
				"c_button_prev": false,
				"c_button_next": false
			}
		}
	]
}