project modules: video-menu.vlanding
video-menu README
This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.
video-menu Twig The markup file.
<div class="video-menu // {{ video_menu_classes }}">
<div class="video-menu__inner // {{ video_menu_inner_classes }}">
{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
{% include "@project/objects/o-drop-menu/o-drop-menu.twig" with o_drop_menu %}
</div>
</div>
video-menu.vlanding JSON The data object for this pattern.
{
"video_menu_classes": "lrv-u-flex u-background-color-picked-bluewood u-padding-b-075 lrv-u-padding-b-050 lrv-u-text-align-center@mobile-max",
"video_menu_inner_classes": "lrv-u-display-none lrv-u-justify-content-space-between",
"o_nav": {
"modifier_class": "",
"o_nav_classes": "lrv-u-flex",
"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-space-children--1 lrv-a-space-children-horizontal lrv-a-unstyle-list lrv-u-a-unstyle-list lrv-u-align-items-center lrv-u-display-flex lrv-u-flex@desktop lrv-u-justify-content-space-between o-nav__list u-max-width-380@tablet",
"o_nav_list_item_classes": "",
"o_nav_list_items": [
{
"modifier_class": "",
"c_link_classes": "lrv-u-color-black lrv-u-text-transform-uppercase a-font-secondary-bold-l u-font-size-23 u-letter-spacing-002 u-color-brand-primary:hover lrv-u-display-inline-flex lrv-u-text-align-right lrv-u-font-weight-bold u-line-height-33",
"c_link_text": "NFL Spotlight",
"c_link_url": "#",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
}
],
"o_nav_list_labelledby_attr": ""
},
"o_drop_menu": {
"o_drop_menu_classes": "lrv-a-glue-parent",
"o_drop_data_attr": false,
"o_drop_menu_toggle_classes": "js-drop-menu__toggle",
"o_drop_menu_list_classes": "js-drop-menu__tooltip lrv-u-background-color-white lrv-u-text-align-right u-box-shadow-menu@tablet lrv-u-width-300 u-padding-lr-075 lrv-u-padding-t-050 u-padding-b-150 lrv-a-glue@tablet lrv-a-glue--r-0",
"c_span": {
"modifier_class": "",
"c_span_classes": "lrv-u-color-black lrv-u-text-transform-uppercase lrv-u-font-family-primary lrv-u-font-size-16 u-letter-spacing-002 u-color-brand-primary:hover lrv-u-display-inline-flex lrv-u-text-align-right lrv-u-font-weight-bold lrv-a-icon-after lrv-a-icon-arrow-down u-line-height-33",
"c_span_text": "",
"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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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-primary lrv-u-text-transform-uppercase 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": ""
},
"c_tagline": false,
"c_link": false,
"o_icon_button": false
}
}