larva modules: featured-video.video-post
featured-video README
This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.
featured-video Twig The markup file.
<div class="featured-video // {{ featured_video_classes }}" data-video-showcase>
{% if o_video_card %}
{% include "@larva/objects/o-video-card/o-video-card.twig" with o_video_card %}
{% endif %}
{% if c_figcaption %}
{% include "@larva/components/c-figcaption/c-figcaption.twig" with c_figcaption %}
{% endif %}
</div>
featured-video.video-post JSON The data object for this pattern.
{
"featured_video_classes": "lrv-a-wrapper-100vw@mobile-max",
"o_video_card": {
"o_video_card_permalink_url": "#single_url",
"o_video_card_alt_attr": "Thumbnail image",
"o_video_card_image_url": "https://source.unsplash.com/random/595x333",
"o_video_card_lazy_image_url": "https://source.unsplash.com/random/595x333",
"o_video_card_caption_text": "Here is some caption text",
"o_video_card_link_showcase_trigger_data_attr": "",
"o_video_card_link_showcase_type_data_attr": "oembed",
"o_video_card_link_showcase_permalink_data_url": "#url_test",
"modifier_class": "",
"o_video_card_classes": "",
"o_video_card_crop_class": "lrv-a-crop-3x2 lrv-a-glue-parent c-play-badge-parent",
"o_video_card_image_classes": "is-to-be-hidden lrv-u-display-block lrv-u-background-color-grey-lightest lrv-u-width-100p lrv-u-display-block lrv-u-height-auto",
"o_video_card_is_player": true,
"c_label": "",
"o_video_card_crop_data_attr": "",
"o_video_card_meta_classes": "lrv-u-display-none",
"o_video_card_link_classes": "lrv-u-width-100p",
"o_video_card_permalink_classes": "u-margin-r-050@mobile-max",
"c_play_icon": {
"c_play_badge_classes": "lrv-a-glue lrv-a-glue--b-0 lrv-a-glue--l-0 lrv-u-margin-l-1 lrv-u-margin-b-1 u-transform-translate-a-n50p u-width-auto u-height-80 u-width-60@tablet u-height-60@tablet is-to-be-hidden u-overflow-visible lrv-u-width-50 lrv-u-width-35@mobile-max u-opacity-060",
"c_play_badge_background_fill_classes": "lrv-u-background-color-transparent"
},
"c_title": false,
"o_category_link": {
"o_category_link_wrap": false,
"o_category_link_classes": "lrv-a-unstyle-link lrv-u-whitespace-nowrap lrv-u-display-inline-block a-font-accent-s lrv-u-font-weight-bold lrv-u-color-white lrv-u-text-transform-uppercase u-border-b-3 lrv-u-border-color-brand-primary lrv-u-padding-b-025 lrv-u-color-brand-accent-blue:hover lrv-a-hover-effect lrv-u-margin-b-050",
"o_category_link_url": "#",
"o_category_link_text": "News"
}
},
"c_figcaption": {
"c_figcaption_classes": "lrv-u-font-size-12 lrv-u-padding-tb-075",
"c_figcaption_caption_markup": "Protest art hangs at Hong Kong International Airport.",
"c_figcaption_caption_classes": " lrv-u-font-size-16 lrv-u-font-size-14@mobile-max lrv-a-font-body-m u-font-style-italic lrv-u-color-grey-dark",
"c_figcaption_credit_text": "Courtesty Wong Ka Ying",
"c_figcaption_credit_text_markup": "",
"c_figcaption_credit_classes": "lrv-u-text-transform-uppercase lrv-u-color-grey lrv-u-font-size-10 a-font-basic-s lrv-u-margin-l-025",
"c_figcaption_inner": false,
"c_figcaption_inner_classes": ""
}
}