larva objects: o-header-buttons
o-header-buttons README
This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.
o-header-buttons Twig The markup file.
<div class="lrv-u-flex {{o_header_button_classes}}">
<div class="item-wrap // {{ got_tip_wrapper_classes }}">
{% include "@larva/components/c-link/c-link.twig" with c_got_a_tip %}
</div>
{% if show_flyout %}
<div class="item-wrap // {{ account_menu_classes }} ">
{% include "@larva/objects/o-account-menu/o-account-menu.twig" with o_account_menu %}
</div>
{% else %}
<div class="item-wrap // {{ account_menu_classes }} {{ hide_flyout_classes}}">
{% include "@larva/components/c-link/c-link.twig" with c_account_link %}
</div>
{% endif %}
{% if button_wrap %}
<div class="items-wrap // {{ button_wrap_classes }}">
{% if c_subscribe_link %}
{% include "@larva/components/c-link/c-link.twig" with c_subscribe_link %}
{% endif %}
{% include "@larva/components/c-link/c-link.twig" with c_login_link %}
</div>
{% else %}
<div class="item-wrap // {{ subscribe_wrapper_classes }}">
{% if c_subscribe_link %}
{% include "@larva/components/c-link/c-link.twig" with c_subscribe_link %}
{% endif %}
</div>
<div class="item-wrap // {{ login_wrapper_classes }} ">
{% include "@larva/components/c-link/c-link.twig" with c_login_link %}
</div>
{% endif %}
</div>
o-header-buttons JSON The data object for this pattern.
{
"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",
"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": "subscriber-login-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",
"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"
}