project modules: video-menu-mobile
Available Variants
prototypevideo-menu-mobile README
This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.
video-menu-mobile Twig The markup file.
<div class="video-menu-mobile // {{ video_menu_mobile_classes }}" data-collapsible="collapsed">
<a class="{{ video_menu_trigger_classes }}" href="#" data-collapsible-toggle="always-show">
{% include "@larva/components/c-span/c-span.twig" with c_span %}
</a>
<div class="{{ video_menu_list_classes }}" data-collapsible-panel>
{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
</div>
</div>
video-menu-mobile JSON The data object for this pattern.
{
"video_menu_mobile_classes": "a-hidden@tablet u-background-color-picked-bluewood",
"video_menu_trigger_classes": "lrv-u-display-block lrv-u-text-align-center",
"video_menu_list_classes": "lrv-u-background-color-white lrv-u-width-100p u-padding-lr-075 lrv-u-padding-t-050 u-padding-b-150",
"c_span": {
"modifier_class": "",
"c_span_classes": "lrv-u-color-black lrv-u-text-transform-uppercase lrv-a-icon-before lrv-a-icon-invert lrv-u-font-size-12 a-icon-down-caret-small a-icon-small u-font-family-basic u-letter-spacing-002",
"c_span_text": "More Playlists",
"c_span_url": "",
"c_span_link_classes": ""
},
"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-padding-t-050",
"o_nav_list_item_classes": "u-padding-b-075",
"o_nav_list_items": [
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Academy Awards",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Actors on Actors: Film",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Actors on Actors: TV",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Artisans",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Variety Studio at Cannes",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Marvel Cinematic Universe",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Power of Women",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Red Carpet",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Star Wars",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Sundance",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "The Contenders",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Emmys",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Toronto Film Festival",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-u-font-family-secondary lrv-u-text-transform-uppercase u-color-picked-bluewood u-color-picked-bluewood:hover\tlrv-u-background-color-brand-primary:hover u-font-size-15 u-letter-spacing-007 lrv-u-display-block lrv-u-height-100p",
"c_link_text": "Trailers",
"c_link_url": "#page",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
}
],
"o_nav_list_labelledby_attr": ""
}
}