project modules: header-sticky

Available Variants

prototype
header-sticky README

Header Sticky

  • It adds subscription elements to existing Sportico header sticky.

Parent components

  • header

Sub components

  • Subscription dropdown menu (subscription-drop-down-menu )

Structure Tree

 header
    ├── subscription-dropdown-menu
    └── header-sticky
            └── subscription-dropdown-menu

Variable used for subscription header elements

  • subs_login_section_class
    • Used by subscription js to show/hide login - subscribe button on main header.
header-sticky Twig The markup file.
<div class="header-sticky // u-max-width-100vw lrv-u-border-color-grey-light lrv-u-border-b-1 {{ header_sticky_classes }}">

	<div class="lrv-u-flex lrv-a-wrapper lrv-u-align-items-center">

		<div class="u-border-lr-1@desktop lrv-u-border-color-grey-light">
			{% include "@larva/objects/o-icon-button/o-icon-button.twig" with o_icon_button_menu %}
		</div>

		<div class="lrv-u-overflow-auto lrv-u-flex u-flex-grow-1@desktop">
			<div class="lrv-u-align-items-center lrv-u-flex lrv-u-justify-content-center lrv-u-margin-l-1">
				{% if read_next %}
					{% include "@project/modules/read-next/read-next.twig" with read_next %}
				{% endif %}
			</div>
		</div>

		<div class="lrv-u-flex-shrink-0 u-margin-lr-auto@desktop-max u-flex-order-n1@desktop u-padding-lr-1@desktop lrv-u-flex lrv-u-align-items-center u-height-30 {{ header_sticky_logo_classes }}">
			{% include "@project/components/c-logo/c-logo.twig" with c_logo %}
		</div>

		<div class="lrv-u-flex lrv-u-align-items-center lrv-u-border-color-grey-light">
			{% if c_link %}
				{% include "@larva/components/c-link/c-link.twig" with c_link %}
			{% endif %}

			{% if expandable_search_sticky %}
				{% include "@project/modules/expandable-search/expandable-search.twig" with expandable_search_sticky %}
			{% endif %}

			<div class="lrv-u-flex lrv-u-margin-l-2@desktop u-hidden@print lrv-a-hidden {{ subs_login_section_class }}">
				<div class={{ subs_button_classes }}>
					<div id="pmc-piano-mobile-header-sticky-button" class="lrv-u-flex u-width-75 u-display-none@desktop"></div>
				</div>
				<div class={{ subs_button_classes }}>
					<div id="pmc-piano-header-sticky-button" class="lrv-u-display-inline-block u-width-150 u-display-none@desktop-max"></div>
				</div>
				{% include "@larva/components/c-link/c-link.twig" with c_link_login %}
			</div>

			{% include "@project/modules/subscription-dropdown-menu/subscription-dropdown-menu.twig" with subscription_menu %}

		</div>

	</div>

</div>
header-sticky JSON The data object for this pattern.
{
	"header_sticky_classes": "lrv-u-background-color-white lrv-u-width-100p u-box-shadow-medium@tablet u-box-shadow-header-sticky@mobile-max",
	"header_sticky_logo_classes": "u-max-width-180 ",
	"o_icon_button_menu": {
		"o_icon_button_classes": "mega-menu-button js-MegaMenu-Trigger lrv-u-align-items-center lrv-u-border-a-0 lrv-u-flex o-icon-button u-min-height-50 u-padding-lr-1@desktop a-become-close-button a-become-close-button--trigger lrv-u-background-color-transparent",
		"o_icon_button_ga_tracking": {},
		"o_icon_button_rel_attr": "",
		"o_icon_button_screen_reader_text": "Click to expand the Mega Menu",
		"o_icon_button_target_attr": "",
		"c_icon": {
			"c_icon_link_classes": "",
			"c_icon_name": "hamburger",
			"c_icon_target_attr": "_blank",
			"c_icon_link_screen_reader_text": "Icon Link",
			"c_icon_url": false,
			"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": "Plus Icon",
			"c_icon_screen_reader_title_attr": "Plus Icon"
		},
		"c_span": {
			"modifier_class": "",
			"c_span_classes": "lrv-u-margin-l-050 a-hidden@desktop-max a-font-primary-bold-s",
			"c_span_text": "Menu",
			"c_span_url": false,
			"c_span_link_classes": ""
		}
	},
	"o_icon_button_search": {
		"o_icon_button_classes": "lrv-a-unstyle-button lrv-a-unstyle-link lrv-u-cursor-pointer lrv-u-flex",
		"o_icon_button_ga_tracking": {},
		"o_icon_button_rel_attr": "",
		"o_icon_button_screen_reader_text": "Click to Expand Search Input",
		"o_icon_button_target_attr": "",
		"c_icon": {
			"c_icon_link_classes": "",
			"c_icon_name": "search",
			"c_icon_target_attr": "_blank",
			"c_icon_link_screen_reader_text": "Icon Link",
			"c_icon_url": false,
			"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": "Plus Icon",
			"c_icon_screen_reader_title_attr": "Plus Icon"
		},
		"c_span": false
	},
	"c_logo": {
		"c_logo_is_h1": false,
		"c_logo_classes": "u-color-logo lrv-u-max-width-150",
		"c_logo_url": "#",
		"c_logo_svg": "sportico",
		"c_logo_screen_reader_text": "Sportico"
	},
	"main_menu": {
		"o_nav": {
			"modifier_class": "",
			"o_nav_classes": "",
			"o_nav_title_text": "",
			"o_nav_title_id_attr": "",
			"o_nav_title_classes": "",
			"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-u-flex lrv-u-justify-content-center lrv-a-space-children-horizontal lrv-a-space-children--2 a-font-primary-bold-s lrv-u-text-transform-uppercase u-letter-spacing-0031@desktop-xl",
			"o_nav_list_item_classes": "",
			"o_nav_list_items": [
				{
					"modifier_class": "",
					"c_link_classes": "lrv-a-unstyle-link lrv-u-color-grey-dark:hover lrv-a-hover-effect lrv-u-whitespace-nowrap",
					"c_link_text": "Business",
					"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 lrv-u-color-grey-dark:hover lrv-a-hover-effect lrv-u-whitespace-nowrap",
					"c_link_text": "Tech",
					"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 lrv-u-color-grey-dark:hover lrv-a-hover-effect lrv-u-whitespace-nowrap",
					"c_link_text": "Legal",
					"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 lrv-u-color-grey-dark:hover lrv-a-hover-effect lrv-u-whitespace-nowrap",
					"c_link_text": "Valuations",
					"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 lrv-u-color-grey-dark:hover lrv-a-hover-effect lrv-u-whitespace-nowrap",
					"c_link_text": "Finance",
					"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 lrv-u-color-grey-dark:hover lrv-a-hover-effect lrv-u-whitespace-nowrap",
					"c_link_text": "Media",
					"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 lrv-u-color-grey-dark:hover lrv-a-hover-effect lrv-u-whitespace-nowrap",
					"c_link_text": "Leagues",
					"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 lrv-u-color-grey-dark:hover lrv-a-hover-effect lrv-u-whitespace-nowrap",
					"c_link_text": "Events",
					"c_link_url": "#",
					"c_link_rel_attr": false,
					"c_link_aria_label_attr": false,
					"c_link_target_attr": false
				}
			],
			"o_nav_list_labelledby_attr": ""
		}
	},
	"read_next": {
		"read_next_classes": "lrv-u-font-family-primary u-max-width-500",
		"c_span": {
			"modifier_class": "",
			"c_span_classes": "lrv-u-whitespace-nowrap lrv-u-text-transform-uppercase lrv-u-font-weight-bold lrv-u-color-brand-primary",
			"c_span_text": "Read Next:",
			"c_span_url": "",
			"c_span_link_classes": ""
		},
		"c_title": {
			"c_title_classes": "lrv-u-padding-l-050 u-max-width-500 a-truncate-ellipsis lrv-u-font-weight-normal",
			"c_title_tag_text": "",
			"c_title_id_attr": "title-of-a-story",
			"c_title_text": "Here is some really long title text, it should be truncated with a-truncate-ellispis, we hope!!!!!! Wow it's so long.",
			"c_title_markup": "",
			"c_title_link_classes": "lrv-a-unstyle-link",
			"c_title_url": "#"
		}
	},
	"expandable_search_sticky": {
		"expandable_search_parent_classes": "js-ExpandableSearch lrv-u-flex u-border-lr-1@desktop lrv-u-border-color-grey-light lrv-u-padding-lr-1 u-display-none@desktop-max",
		"expandable_search_classes": "lrv-a-glue-parent js-ExpandableSearch-target lrv-a-unstyle-button lrv-u-color-black js-fade js-fade-is-out",
		"expandable_search_inner_classes": "lrv-a-glue lrv-a-glue--r-0 lrv-a-glue--t-0 ",
		"expandable_search_attr": "hidden",
		"o_icon_button_search": {
			"o_icon_button_classes": "lrv-a-unstyle-button lrv-a-unstyle-link lrv-u-cursor-pointer lrv-u-flex js-ExpandableSearch-trigger",
			"o_icon_button_ga_tracking": {},
			"o_icon_button_rel_attr": "",
			"o_icon_button_screen_reader_text": "Click to Expand Search Input",
			"o_icon_button_target_attr": "",
			"c_icon": {
				"c_icon_link_classes": "",
				"c_icon_name": "search",
				"c_icon_target_attr": "_blank",
				"c_icon_link_screen_reader_text": "Icon Link",
				"c_icon_url": false,
				"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16 lrv-u-margin-a-1",
				"c_icon_rel_name": "noopener noreferrer",
				"c_icon_screen_reader_tag_text": "",
				"c_icon_screen_reader_text": "Plus Icon",
				"c_icon_screen_reader_title_attr": "Plus Icon"
			},
			"c_span": false
		},
		"search_form": {
			"search_form_classes": "",
			"search_form_action_url": "/",
			"search_form_label_classes": "",
			"search_form_is_swiftype": false,
			"search_form_input_classes": " u-width-200",
			"search_form_input_placeholder_attr": "Search",
			"search_form_submit_classes": ""
		}
	},
	"c_link_subscribe": {
		"modifier_class": "",
		"c_link_classes": "lrv-a-unstyle-link lrv-u-color-white@desktop lrv-u-background-color-brand-primary@desktop u-background-color-brand-primary-dark:hover lrv-u-color-white:hover a-font-primary-medium-s  lrv-u-padding-tb-050@desktop lrv-u-padding-lr-2@desktop lrv-u-margin-r-025@desktop",
		"c_link_text": "Subscribe",
		"c_link_url": "#",
		"c_link_rel_attr": false,
		"c_link_aria_label_attr": false,
		"c_link_target_attr": false
	},
	"c_link_login": {
		"modifier_class": "",
		"c_link_classes": "lrv-a-unstyle-link lrv-u-color-grey-darkest lrv-u-color-grey-darkest:hover lrv-u-border-color-grey-darkest a-font-primary-medium-s lrv-u-padding-tb-050@desktop lrv-u-padding-lr-2 u-display-none@desktop-max",
		"c_link_text": "Log In",
		"c_link_url": "#",
		"c_link_rel_attr": false,
		"c_link_aria_label_attr": false,
		"c_link_target_attr": false
	},
	"subs_login_section_class": "js-subscription-login-section",
	"subscription_menu": {
		"c_link_user_name": {
			"modifier_class": "",
			"c_link_classes": "lrv-a-unstyle-link lrv-u-font-size-16 lrv-u-font-weight-bold lrv-u-overflow-hidden lrv-u-display-block",
			"c_link_text": "",
			"c_link_url": "#",
			"c_link_rel_attr": false,
			"c_link_aria_label_attr": false,
			"c_link_target_attr": false
		},
		"c_link_manage_account": {
			"modifier_class": "",
			"c_link_classes": "lrv-a-unstyle-link lrv-u-color-black lrv-u-color-black:hover lrv-u-font-weight-bold lrv-u-font-size-14 lrv-u-color-brand-primary:hover lrv-u-display-block",
			"c_link_text": "Manage Account",
			"c_link_url": "#",
			"c_link_rel_attr": false,
			"c_link_aria_label_attr": false,
			"c_link_target_attr": false
		},
		"c_link_logout": {
			"modifier_class": "",
			"c_link_classes": "lrv-a-unstyle-link lrv-u-color-black lrv-u-color-black:hover lrv-u-font-weight-bold lrv-u-font-size-14 lrv-u-color-brand-primary:hover lrv-u-display-block",
			"c_link_text": "Log Out",
			"c_link_url": "#",
			"c_link_rel_attr": false,
			"c_link_aria_label_attr": false,
			"c_link_target_attr": false
		},
		"c_link_subscribe": {
			"modifier_class": "",
			"c_link_classes": "lrv-a-unstyle-link lrv-u-color-white lrv-u-color-white:hover lrv-u-background-color-brand-primary u-background-color-brand-primary-dark:hover a-font-primary-medium-s lrv-u-padding-tb-050 lrv-u-padding-lr-2 lrv-u-margin-r-025 pmc-sportico-loggedin-subscribe-button lrv-a-hidden",
			"c_link_text": "Subscribe",
			"c_link_url": "#",
			"c_link_rel_attr": false,
			"c_link_aria_label_attr": false,
			"c_link_target_attr": false
		},
		"subscriber_uname_class": "js-subscription-username-section"
	}
}