project modules: footer

Available Variants

prototype
footer README

Footer

  • footer.prototype has class lrv-a-cols3@tablet, since there are only 3 menus.
  • This footer.prototype has class lrv-a-cols4@tablet, since there is an additional column for Subscriptions.
  • We only need the separate modules so that we can conditionally render subscription-footer prototype if the Cheezcap setting for Subscriptions is turned on. This conditional render can be found inside template-parts/footer/main.php.
  • Once Subscriptions goes live and the cheezcap is removed, we can remove subscription-footer and just update footer.prototype.js to always use class lrv-a-cols4@tablet.
footer Twig The markup file.
<div id="piano-sticky-footer" class="js-subscription-sticky-footer a-subscription-sticky-footer"></div>
<footer class="footer // {{ footer_classes }}">
	<div class="lrv-a-wrapper">
		{% include "@larva/modules/footer-menus/footer-menus.twig" with footer_menus %}

		{% if footer_social %}

			<div class="lrv-a-grid lrv-a-cols3@desktop lrv-u-border-t-1 lrv-u-border-color-grey lrv-u-padding-tb-1">
				<div class="lrv-u-border-r-1 lrv-u-border-color-grey lrv-u-padding-a-1 lrv-u-border-r-1@desktop">
					{% include "@larva/modules/footer-social/footer-social.twig" with footer_social %}
				</div>
				<div class="lrv-u-border-r-1 lrv-u-border-color-grey lrv-u-padding-a-1 lrv-u-border-t-1 lrv-u-border-t-0@desktop lrv-u-border-r-1@desktop">
					{% include "@larva/modules/footer-tip/footer-tip.twig" with footer_tip %}
				</div>
				<div class="lrv-u-border-r-1 lrv-u-border-color-grey lrv-u-padding-a-1 lrv-u-border-t-1 lrv-u-border-t-0@desktop">
					{% include "@larva/modules/footer-newsletter/footer-newsletter.twig" with footer_newsletter %}
				</div>
			</div>

		{% endif %}

	</div>
</footer>
footer JSON The data object for this pattern.
{
	"footer_classes": "lrv-u-background-color-black lrv-u-color-white lrv-u-padding-tb-1",
	"footer_menus": {
		"footer_menu_classes": "lrv-a-grid lrv-a-cols4@tablet lrv-u-background-color-black lrv-u-color-white",
		"o_navs": [
			{
				"modifier_class": "",
				"o_nav_classes": "lrv-js-MobileHeightToggle lrv-u-text-align-center@tablet lrv-u-border-a-1@mobile-max lrv-u-border-color-white",
				"o_nav_title_text": "Footer Menu",
				"o_nav_title_id_attr": "",
				"o_nav_title_classes": "a-font-primary-bold-m lrv-js-MobileHeightToggle-trigger lrv-u-padding-lr-1 lrv-u-margin-tb-00 lrv-u-padding-t-1 lrv-u-padding-t-050@tablet lrv-u-padding-b-050 lrv-u-width-100p@mobile-max lrv-a-icon-after lrv-a-icon-arrow-down lrv-a-icon-after:margin-l-auto lrv-a-icon-after-remove@tablet lrv-a-icon-invert lrv-u-cursor-pointer",
				"o_nav_aria_labelledby_attr": "",
				"o_nav_screen_reader_id_attr": "optional-screen-reader",
				"o_nav_screen_reader_text": "optional screen reader",
				"o_nav_list_classes": "lrv-a-unstyle-list lrv-js-MobileHeightToggle-target lrv-u-padding-b-050",
				"o_nav_list_item_classes": "lrv-u-padding-lr-1 lrv-u-padding-tb-025 lrv-u-font-size-12 lrv-u-color-grey-light lrv-u-color-white:hover a-font-primary-medium-s",
				"o_nav_list_items": [
					{
						"modifier_class": "",
						"c_link_classes": "lrv-a-unstyle-link",
						"c_link_text": "A plain text link",
						"c_link_url": "#",
						"c_link_rel_attr": false,
						"c_link_aria_label_attr": false,
						"c_link_target_attr": false
					},
					{
						"modifier_class": "",
						"c_link_classes": "lrv-a-unstyle-link",
						"c_link_text": "A plain text link",
						"c_link_url": "#",
						"c_link_rel_attr": false,
						"c_link_aria_label_attr": false,
						"c_link_target_attr": false
					},
					{
						"modifier_class": "",
						"c_link_classes": "lrv-a-unstyle-link",
						"c_link_text": "A plain text link",
						"c_link_url": "#",
						"c_link_rel_attr": false,
						"c_link_aria_label_attr": false,
						"c_link_target_attr": false
					}
				],
				"o_nav_list_labelledby_attr": ""
			},
			{
				"modifier_class": "",
				"o_nav_classes": "lrv-js-MobileHeightToggle lrv-u-text-align-center@tablet lrv-u-border-a-1@mobile-max lrv-u-border-color-white",
				"o_nav_title_text": "Footer Menu",
				"o_nav_title_id_attr": "",
				"o_nav_title_classes": "a-font-primary-bold-m lrv-js-MobileHeightToggle-trigger lrv-u-padding-lr-1 lrv-u-margin-tb-00 lrv-u-padding-t-1 lrv-u-padding-t-050@tablet lrv-u-padding-b-050 lrv-u-width-100p@mobile-max lrv-a-icon-after lrv-a-icon-arrow-down lrv-a-icon-after:margin-l-auto lrv-a-icon-after-remove@tablet lrv-a-icon-invert lrv-u-cursor-pointer",
				"o_nav_aria_labelledby_attr": "",
				"o_nav_screen_reader_id_attr": "optional-screen-reader",
				"o_nav_screen_reader_text": "optional screen reader",
				"o_nav_list_classes": "lrv-a-unstyle-list lrv-js-MobileHeightToggle-target lrv-u-padding-b-050",
				"o_nav_list_item_classes": "lrv-u-padding-lr-1 lrv-u-padding-tb-025 lrv-u-font-size-12 lrv-u-color-grey-light lrv-u-color-white:hover a-font-primary-medium-s",
				"o_nav_list_items": [
					{
						"modifier_class": "",
						"c_link_classes": "lrv-a-unstyle-link",
						"c_link_text": "A plain text link",
						"c_link_url": "#",
						"c_link_rel_attr": false,
						"c_link_aria_label_attr": false,
						"c_link_target_attr": false
					},
					{
						"modifier_class": "",
						"c_link_classes": "lrv-a-unstyle-link",
						"c_link_text": "A plain text link",
						"c_link_url": "#",
						"c_link_rel_attr": false,
						"c_link_aria_label_attr": false,
						"c_link_target_attr": false
					},
					{
						"modifier_class": "",
						"c_link_classes": "lrv-a-unstyle-link",
						"c_link_text": "A plain text link",
						"c_link_url": "#",
						"c_link_rel_attr": false,
						"c_link_aria_label_attr": false,
						"c_link_target_attr": false
					}
				],
				"o_nav_list_labelledby_attr": ""
			},
			{
				"modifier_class": "",
				"o_nav_classes": "lrv-js-MobileHeightToggle lrv-u-text-align-center@tablet lrv-u-border-a-1@mobile-max lrv-u-border-color-white",
				"o_nav_title_text": "Footer Menu",
				"o_nav_title_id_attr": "",
				"o_nav_title_classes": "a-font-primary-bold-m lrv-js-MobileHeightToggle-trigger lrv-u-padding-lr-1 lrv-u-margin-tb-00 lrv-u-padding-t-1 lrv-u-padding-t-050@tablet lrv-u-padding-b-050 lrv-u-width-100p@mobile-max lrv-a-icon-after lrv-a-icon-arrow-down lrv-a-icon-after:margin-l-auto lrv-a-icon-after-remove@tablet lrv-a-icon-invert lrv-u-cursor-pointer",
				"o_nav_aria_labelledby_attr": "",
				"o_nav_screen_reader_id_attr": "optional-screen-reader",
				"o_nav_screen_reader_text": "optional screen reader",
				"o_nav_list_classes": "lrv-a-unstyle-list lrv-js-MobileHeightToggle-target lrv-u-padding-b-050",
				"o_nav_list_item_classes": "lrv-u-padding-lr-1 lrv-u-padding-tb-025 lrv-u-font-size-12 lrv-u-color-grey-light lrv-u-color-white:hover a-font-primary-medium-s",
				"o_nav_list_items": [
					{
						"modifier_class": "",
						"c_link_classes": "lrv-a-unstyle-link",
						"c_link_text": "A plain text link",
						"c_link_url": "#",
						"c_link_rel_attr": false,
						"c_link_aria_label_attr": false,
						"c_link_target_attr": false
					},
					{
						"modifier_class": "",
						"c_link_classes": "lrv-a-unstyle-link",
						"c_link_text": "A plain text link",
						"c_link_url": "#",
						"c_link_rel_attr": false,
						"c_link_aria_label_attr": false,
						"c_link_target_attr": false
					},
					{
						"modifier_class": "",
						"c_link_classes": "lrv-a-unstyle-link",
						"c_link_text": "A plain text link",
						"c_link_url": "#",
						"c_link_rel_attr": false,
						"c_link_aria_label_attr": false,
						"c_link_target_attr": false
					}
				],
				"o_nav_list_labelledby_attr": ""
			}
		]
	},
	"footer_social": {
		"footer_social_classes": "lrv-u-text-align-center lrv-u-color-white lrv-u-background-color-black",
		"c_title": {
			"c_title_classes": "lrv-u-margin-b-025 a-font-primary-bold-m lrv-u-text-align-center",
			"c_title_tag_text": "",
			"c_title_id_attr": "title-of-a-story",
			"c_title_text": "Connect with Us",
			"c_title_markup": "",
			"c_title_link_classes": "",
			"c_title_url": false
		},
		"c_tagline": {
			"c_tagline_classes": "a-font-primary-medium-s lrv-u-font-size-12 lrv-u-color-grey-light lrv-u-text-align-center",
			"c_tagline_text": "Get our latest stories in the feed of your favorite networks"
		},
		"o_social_list": {
			"o_social_list_classes": "lrv-a-unstyle-list lrv-u-flex lrv-u-align-items-center lrv-u-justify-content-center",
			"o_social_list_labelledby_attr": "",
			"o_social_list_icons": [
				{
					"c_icon_link_classes": " lrv-u-display-block lrv-u-border-radius-50p lrv-u-color-grey lrv-u-margin-lr-050 lrv-u-padding-a-050 lrv-u-background-color-white lrv-u-color-grey-dark:hover lrv-u-color-brand-primary",
					"c_icon_name": "instagram",
					"c_icon_target_attr": "_blank",
					"c_icon_link_screen_reader_text": "Icon Link",
					"c_icon_url": "#",
					"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
					"c_icon_rel_name": "noopener noreferrer",
					"c_icon_screen_reader_tag_text": "",
					"c_icon_screen_reader_text": "Instagram",
					"c_icon_screen_reader_title_attr": "Instagram"
				},
				{
					"c_icon_link_classes": " lrv-u-display-block lrv-u-border-radius-50p lrv-u-color-grey lrv-u-margin-lr-050 lrv-u-padding-a-050 lrv-u-background-color-white lrv-u-color-grey-dark:hover lrv-u-color-brand-primary",
					"c_icon_name": "pinit",
					"c_icon_target_attr": "_blank",
					"c_icon_link_screen_reader_text": "Icon Link",
					"c_icon_url": "#",
					"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
					"c_icon_rel_name": "noopener noreferrer",
					"c_icon_screen_reader_tag_text": "",
					"c_icon_screen_reader_text": "Pinterest",
					"c_icon_screen_reader_title_attr": "Pinterest"
				},
				{
					"c_icon_link_classes": " lrv-u-display-block lrv-u-border-radius-50p lrv-u-color-grey lrv-u-margin-lr-050 lrv-u-padding-a-050 lrv-u-background-color-white lrv-u-color-grey-dark:hover lrv-u-color-brand-primary",
					"c_icon_name": "twitter",
					"c_icon_target_attr": "_blank",
					"c_icon_link_screen_reader_text": "Icon Link",
					"c_icon_url": "#",
					"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
					"c_icon_rel_name": "noopener noreferrer",
					"c_icon_screen_reader_tag_text": "",
					"c_icon_screen_reader_text": "X",
					"c_icon_screen_reader_title_attr": "X"
				},
				{
					"c_icon_link_classes": " lrv-u-display-block lrv-u-border-radius-50p lrv-u-color-grey lrv-u-margin-lr-050 lrv-u-padding-a-050 lrv-u-background-color-white lrv-u-color-grey-dark:hover lrv-u-color-brand-primary",
					"c_icon_name": "facebook",
					"c_icon_target_attr": "_blank",
					"c_icon_link_screen_reader_text": "Icon Link",
					"c_icon_url": "#",
					"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
					"c_icon_rel_name": "noopener noreferrer",
					"c_icon_screen_reader_tag_text": "",
					"c_icon_screen_reader_text": "Facebook",
					"c_icon_screen_reader_title_attr": "Facebook"
				},
				{
					"c_icon_link_classes": " lrv-u-display-block lrv-u-border-radius-50p lrv-u-color-grey lrv-u-margin-lr-050 lrv-u-padding-a-050 lrv-u-background-color-white lrv-u-color-grey-dark:hover lrv-u-color-brand-primary",
					"c_icon_name": "youtube",
					"c_icon_target_attr": "_blank",
					"c_icon_link_screen_reader_text": "Icon Link",
					"c_icon_url": "#",
					"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
					"c_icon_rel_name": "noopener noreferrer",
					"c_icon_screen_reader_tag_text": "",
					"c_icon_screen_reader_text": "YouTube",
					"c_icon_screen_reader_title_attr": "YouTube"
				}
			]
		}
	},
	"footer_tip": {
		"footer_tip_classes": "lrv-u-text-align-center lrv-u-color-white lrv-u-background-color-black",
		"c_title": {
			"c_title_classes": "lrv-u-margin-b-025 a-font-primary-bold-m",
			"c_title_tag_text": "",
			"c_title_id_attr": "title-of-a-story",
			"c_title_text": "Have a Tip?",
			"c_title_markup": "",
			"c_title_link_classes": "",
			"c_title_url": "#"
		},
		"c_tagline": {
			"c_tagline_classes": "a-font-primary-medium-s lrv-u-font-size-12 lrv-u-color-grey-light",
			"c_tagline_text": "We want to hear from you! Send us a tip using our anonymous form."
		},
		"c_button": {
			"c_button_classes": "lrv-a-unstyle-button lrv-u-cursor-pointer lrv-u-display-inline-flexlrv-u-font-size-12 lrv-u-text-transform-uppercase lrv-u-font-weight-bold lrv-u-color-white lrv-u-color-grey-light:hover lrv-u-background-color-black lrv-a-icon-after lrv-a-icon-arrow-right lrv-a-icon-invert",
			"c_button_ga_tracking": {},
			"c_button_inner_classes": "lrv-u-color-white lrv-u-color-grey-light:hover",
			"c_button_rel_attr": "",
			"c_button_screen_reader_text": "Sign Up",
			"c_button_target_attr": "",
			"c_button_text": "Send Us a Tip",
			"c_button_type_attr": "submit",
			"c_button_url": "https://google.com"
		}
	},
	"footer_newsletter": {
		"footer_newsletter_classes": "lrv-u-text-align-center lrv-u-color-white lrv-u-background-color-black lrv-u-flex lrv-u-flex-direction-column lrv-u-align-items-center",
		"c_title": {
			"c_title_classes": "a-font-primary-bold-m lrv-u-margin-b-025 lrv-u-text-align-center",
			"c_title_tag_text": "",
			"c_title_id_attr": "title-of-a-story",
			"c_title_text": "Stay In The Know",
			"c_title_markup": "",
			"c_title_link_classes": "",
			"c_title_url": false
		},
		"c_tagline": {
			"c_tagline_classes": "a-font-primary-medium-s lrv-u-font-size-12 lrv-u-color-grey-light lrv-u-text-align-center",
			"c_tagline_text": "Sign up for our daily newsletter"
		},
		"c_tagline_terms": {
			"c_tagline_classes": "lrv-u-width-300 lrv-u-max-width-100p lrv-u-margin-t-050 lrv-u-color-grey a-children-link-color-grey lrv-u-font-size-10 a-children-link-bold",
			"c_tagline_text": ""
		},
		"o_email_capture_form": {
			"o_email_capture_form_classes": "",
			"o_email_capture_form_context_name_attr": "NewsletterFormPost",
			"o_email_capture_form_inner_classes": "lrv-u-flex lrv-u-align-items-center lrv-u-justify-content-center lrv-u-border-b-1 lrv-u-border-color-currentColor",
			"o_email_capture_form_action_url": "",
			"o_email_capture_form_button_text": "Sign up",
			"o_email_capture_form_name_attr": "email-capture-form",
			"o_email_capture_form_success_url": "",
			"c_button": {
				"c_button_classes": "lrv-a-unstyle-button lrv-u-cursor-pointer lrv-u-display-inline-flex lrv-a-icon-after lrv-a-icon-arrow-right lrv-a-icon-invert",
				"c_button_ga_tracking": {},
				"c_button_inner_classes": "lrv-a-screen-reader-only",
				"c_button_rel_attr": "",
				"c_button_screen_reader_text": "Sign Up",
				"c_button_target_attr": "",
				"c_button_text": "Sign Up",
				"c_button_type_attr": "submit",
				"c_button_url": ""
			},
			"c_email_field": {
				"c_email_field_classes": "lrv-u-font-size-14 lrv-u-flex lrv-u-align-items-center",
				"c_email_field_label_classes": "lrv-u-padding-r-050 lrv-u-font-weight-bold lrv-u-whitespace-nowrap lrv-u-color-grey",
				"c_email_field_label_text": "Your Email",
				"c_email_field_input_id_attr": "footer_newsletter_email",
				"c_email_field_input_name_attr": "EmailAddress",
				"c_email_field_input_placeholder_attr": false,
				"c_email_field_input_classes": "lrv-u-background-color-transparent lrv-u-border-a-0 lrv-u-color-currentColor lrv-u-padding-a-050 lrv-u-font-size-14",
				"c_email_field_label_for_attr": "EmailAddress"
			},
			"o_email_capture_form_hidden_field_items": {
				"source": {
					"c_hidden_field_name_attr": "Source",
					"c_hidden_field_value_attr": "",
					"c_hidden_field_id_attr": "footer_source"
				},
				"editorial_daily_opted_in": {
					"c_hidden_field_name_attr": "Editorial_Daily_Opted_In",
					"c_hidden_field_value_attr": "",
					"c_hidden_field_id_attr": "footer_editorial_daily_opted_in"
				},
				"editorial_daily_opt_in_date": {
					"c_hidden_field_name_attr": "Editorial_Daily_Opt_In_Date",
					"c_hidden_field_value_attr": "",
					"c_hidden_field_id_attr": "footer_editorial_daily_opt_in_date"
				},
				"editorial_bna_opted_in": {
					"c_hidden_field_name_attr": "Editorial_BNA_Opted_In",
					"c_hidden_field_value_attr": "",
					"c_hidden_field_id_attr": "footer_editorial_bna_opted_in"
				},
				"editorial_bna_opt_in_date": {
					"c_hidden_field_name_attr": "Editorial_BNA_Opt_In_Date",
					"c_hidden_field_value_attr": "",
					"c_hidden_field_id_attr": "footer_editorial_bna_opt_in_date"
				},
				"editorial_wallStreet_opted_in": {
					"c_hidden_field_name_attr": "Editorial_WallStreet_Opted_In",
					"c_hidden_field_value_attr": "",
					"c_hidden_field_id_attr": "footer_editorial_wallStreet_opted_in"
				},
				"editorial_wallStreet_opt_in_date": {
					"c_hidden_field_name_attr": "Editorial_WallStreet_Opt_In_Date",
					"c_hidden_field_value_attr": "",
					"c_hidden_field_id_attr": "footer_editorial_wallStreet_opt_in_date"
				}
			}
		}
	}
}