larva objects: o-account-menu
Available Variants
prototypeo-account-menu
README
This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.
o-account-menu
Twig The markup file.
<div class="o-account-menu // {{ o_account_menu_classes }}">
{% include "@larva/components/c-link/c-link.twig" with c_account_link %}
<div class="o-account-content // {{ o_account_content_classes }}">
<div class="o-account-content-inner // {{ o_account_content_inner_classes }}">
{% if c_welcome_span %}
<div class="o-account-welcome-span-link // {{ o_account_welcome_span_classes }} ">
{% include "@larva/components/c-span/c-span.twig" with c_welcome_span %}
</div>
{% endif %}
{% if c_manage_account %}
<div class="o-account-manage-account-link // {{ o_account_manage_account_classes }} ">
{% include "@larva/components/c-link/c-link.twig" with c_manage_account %}
</div>
{% endif %}
{% if c_log_out %}
<div class="o-account-logout-link // {{ o_account_logout_classes }} ">
{% include "@larva/components/c-link/c-link.twig" with c_log_out %}
</div>
{% endif %}
</div>
</div>
</div>
o-account-menu
JSON The data object for this pattern.
{
"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": "subscriber-account-link lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max lrv-a-icon-after lrv-a-icon-arrow-down lrv-a-unstyle-link lrv-u-border-b-1 lrv-u-border-color-brand-primary:hover lrv-u-border-color-white lrv-u-color-brand-primary:hover lrv-u-text-transform-uppercase",
"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
}
}