larva modules: header-sticky.article
header-sticky README
This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.
header-sticky Twig The markup file.
<div class="header-sticky // {{ header_sticky_classes }}">
<div class="header-sticky-content // {{ header_sticky_content_classes }} ">
<div class="lrv-a-wrapper">
<div class="header-sticky-content-inner // {{ header_sticky_content_inner_classes }}">
{% if icon_logo_wrap %}
<div class="header-sticky-icon-logo-wrap // {{ header_sticky_icon_logo_wrap_classes }} ">
{% endif %}
<div class="header-sticky-icons // {{ header_sticky_icons_classes }} ">
{% include "@larva/objects/o-icon-button/o-icon-button.twig" with o_icon_button_menu %}
{% include "@larva/modules/expandable-search/expandable-search.twig" with expandable_search %}
</div>
<div class="header-sticky-logo // {{ header_sticky_logo_classes }} ">
{% include "@larva/components/c-logo/c-logo.twig" with c_logo %}
</div>
{% if icon_logo_wrap %}
</div>
{% endif %}
{% if read_next %}
{% include "@larva/modules/read-next/read-next.twig" with read_next %}
{% endif %}
{% if o_social_list %}
{% include "@larva/objects/o-social-list/o-social-list.twig" with o_social_list %}
{% endif %}
<div class="header-sticky-links // {{ header_sticky_links_classes }} ">
{% include "@larva/objects/o-header-buttons/o-header-buttons.twig" with o_header_buttons %}
</div>
</div>
</div>
</div>
</div>
header-sticky.article JSON The data object for this pattern.
{
"header_sticky_classes": "lrv-u-border-color-grey-light lrv-u-border-b-1 lrv-u-background-color-white lrv-u-width-100p u-box-shadow-medium article-sticky-header",
"o_icon_button_menu": {
"o_icon_button_classes": "js-MegaMenu-Trigger lrv-u-align-items-center lrv-u-border-a-0 lrv-u-flex lrv-u-padding-lr-1 lrv-u-background-color-transparent lrv-u-color-brand-primary:hover",
"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-30 lrv-u-height-30",
"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",
"c_span_text": "",
"c_span_url": false,
"c_span_link_classes": ""
}
},
"c_logo": {
"c_logo_is_h1": false,
"c_logo_classes": "",
"c_logo_url": "/",
"c_logo_svg": "brand-logo",
"c_logo_screen_reader_text": "Logo text"
},
"read_next": {
"read_next_classes": " lrv-a-hidden@desktop-max lrv-u-flex lrv-u-align-items-center lrv-u-flex-1 lrv-u-font-family-body lrv-u-font-size-16 lrv-u-margin-l-125 lrv-u-overflow-hidden lrv-u-margin-r-1",
"c_span": {
"modifier_class": "",
"c_span_classes": "lrv-u-whitespace-nowrap lrv-u-text-transform-uppercase lrv-a-font-body-m lrv-u-font-weight-700",
"c_span_text": "Music",
"c_span_url": "",
"c_span_link_classes": ""
},
"c_title": {
"c_title_classes": "lrv-u-padding-l-1 lrv-u-max-width-500 lrv-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 lrv-a-truncate-ellispis, we hope!!!!!! Wow it's so long.",
"c_title_markup": "",
"c_title_link_classes": "lrv-a-unstyle-link lrv-u-whitespace-nowrap lrv-a-font-body-m",
"c_title_url": "#"
}
},
"expandable_search": {
"expandable_search_outer_classes": "js-ExpandableSearch lrv-u-flex lrv-u-margin-l-auto lrv-a-glue-parent",
"expandable_search_classes": "js-ExpandableSearch-target lrv-a-unstyle-button lrv-u-color-black js-fade js-fade-is-out sticky-expandable",
"expandable_search_inner_classes": "lrv-u-height-auto lrv-a-glue lrv-a-glue--l-0 lrv-a-glue--t-50p lrv-u-flex lrv-u-transform-translateY-n50p",
"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-24 lrv-u-height-24 lrv-u-color-brand-primary:hover",
"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_is_swiftype": false,
"search_form_input_classes": "",
"search_form_input_placeholder_attr": "Search...",
"search_form_submit_classes": ""
}
},
"o_social_list": {
"o_social_list_classes": " lrv-u-flex lrv-a-space-children--1 lrv-a-space-children-horizontal lrv-u-align-items-center lrv-a-unstyle-list lrv-u-margin-l-auto lrv-u-margin-r-150",
"o_social_list_labelledby_attr": "",
"o_social_list_icons": [
{
"c_icon_link_classes": "lrv-u-background-color-white lrv-u-border-radius-50p lrv-u-color-black lrv-u-color-brand-primary:hover lrv-u-display-block",
"c_icon_name": "facebook-rs",
"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": "Plus Icon",
"c_icon_screen_reader_title_attr": "Plus Icon"
},
{
"c_icon_link_classes": "lrv-u-background-color-white lrv-u-border-radius-50p lrv-u-color-black lrv-u-color-brand-primary:hover lrv-u-display-block",
"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": "Plus Icon",
"c_icon_screen_reader_title_attr": "Plus Icon"
},
{
"c_icon_link_classes": "lrv-u-background-color-white lrv-u-border-radius-50p lrv-u-color-black lrv-u-color-brand-primary:hover lrv-u-display-block",
"c_icon_name": "email",
"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": "Plus Icon",
"c_icon_screen_reader_title_attr": "Plus Icon"
}
]
},
"o_header_buttons": {
"c_login_link": {
"modifier_class": "",
"c_link_classes": " lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover",
"c_link_text": "Log In",
"c_link_url": "#",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
"c_subscribe_link": {
"modifier_class": "",
"c_link_classes": "lrv-a-unstyle-button lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover",
"c_link_text": "Subscribe",
"c_link_url": "#",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
"o_account_menu": {
"o_account_menu_classes": "js-Tooltip-parent lrv-a-glue-parent lrv-u-flex",
"o_account_content_classes": "js-Tooltip lrv-a-glue lrv-a-glue--t-100p lrv-u-box-shadow-medium",
"o_account_content_inner_classes": "lrv-a-glue-parent lrv-a-icon-after-arrow-top-left lrv-u-background-color-white lrv-u-border-a-2 lrv-u-flex lrv-u-flex-direction-column lrv-u-text-align-left lrv-u-flex-wrap-wrap lrv-u-margin-t-1 lrv-u-padding-tb-050 lrv-u-padding-lr-150 lrv-u-width-200",
"o_account_welcome_span_classes": "lrv-u-border-b-1 lrv-u-padding-tb-050",
"o_account_manage_account_classes": "lrv-u-border-b-1 lrv-u-padding-tb-050",
"o_account_logout_classes": "lrv-u-padding-tb-050",
"c_welcome_span": {
"modifier_class": "",
"c_span_classes": "subscriber-name lrv-a-font-body lrv-u-color-black lrv-u-font-size-12 lrv-u-text-transform-uppercase",
"c_span_text": "Welcome Name",
"c_span_url": "#",
"c_span_link_classes": "lrv-u-color-black lrv-u-color-brand-primary:hover"
},
"c_account_link": {
"modifier_class": "",
"c_link_classes": " lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover lrv-u-margin-tb-025",
"c_link_text": "Account",
"c_link_url": "#",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
"c_manage_account": {
"modifier_class": "",
"c_link_classes": "subscriber-self-care-link lrv-u-text-transform-uppercase lrv-a-font-secondary lrv-u-color-black lrv-u-font-size-12 lrv-u-width-100 lrv-u-text-align-center lrv-u-color-brand-primary:hover",
"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_log_out": {
"modifier_class": "",
"c_link_classes": "subscriber-logout-link lrv-a-font-secondary lrv-u-color-black lrv-u-color-brand-primary:hover lrv-u-font-size-12 lrv-u-text-transform-uppercase",
"c_link_text": "Sign Out",
"c_link_url": "#",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
}
},
"c_got_a_tip": {
"modifier_class": "",
"c_link_classes": "lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover",
"c_link_text": "Got A Tip?",
"c_link_url": "#",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
"c_account_link": {
"modifier_class": "",
"c_link_classes": "lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max lrv-u-color-brand-primary:hover lrv-u-border-color-white lrv-u-border-color-brand-primary:hover",
"c_link_text": "Account",
"c_link_url": "#",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
"button_wrap": false,
"show_flyout": true,
"o_header_button_classes": "lrv-a-space-children-horizontal lrv-a-space-children--1",
"got_tip_wrapper_classes": "lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025 lrv-u-flex lrv-u-align-items-center lrv-u-margin-tb-025 lrv-a-hidden@mobile-max",
"account_menu_classes": "lrv-u-flex lrv-u-align-items-center lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025 lrv-u-margin-tb-025",
"hide_flyout_classes": " ",
"subscribe_wrapper_classes": "subscribe-link cx-dynamic-link lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025 lrv-u-margin-tb-025",
"login_wrapper_classes": "lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025 lrv-a-hidden@mobile-max",
"button_wrap_classes": "lrv-u-flex lrv-u-flex-direction-column lrv-u-align-items-center lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-margin-tb-025"
},
"icon_logo_wrap": false,
"header_sticky_content_classes": "lrv-u-border-b-1 lrv-u-border-t-1 lrv-u-margin-t-025 lrv-u-padding-t-050 lrv-u-padding-b-050",
"header_sticky_content_inner_classes": " lrv-u-flex lrv-u-justify-content-space-between lrv-u-align-items-center",
"header_sticky_icon_logo_wrap_classes": " lrv-u-flex lrv-u-justify-content-space-between lrv-u-align-items-center",
"header_sticky_links_classes": "lrv-u-align-items-center lrv-u-flex lrv-u-justify-content-end lrv-u-width-21p",
"header_sticky_logo_classes": "lrv-u-align-items-center lrv-u-flex lrv-u-flex-shrink-0 lrv-u-justify-content-center lrv-u-margin-lr-00@desktop lrv-u-margin-lr-auto lrv-u-order-n1",
"header_sticky_inner_classes": "lrv-u-align-items-center lrv-u-flex",
"header_sticky_outer_classes": "lrv-a-wrapper",
"header_sticky_icons_classes": "lrv-a-glue-parent lrv-u-align-items-center lrv-u-flex lrv-u-padding-r-1 lrv-u-border-r-1"
}