project objects: o-video-card.small

o-video-card README

This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.

o-video-card Twig The markup file.
<div tabindex="0"
class="o-video-card__link // {{ o_video_card_link_classes }}" data-video-showcase-trigger="{{ o_video_card_link_showcase_trigger_data_attr }}" data-video-showcase-type="{{ o_video_card_link_showcase_type_data_attr }}" data-video-showcase-dek="{{ o_video_card_link_showcase_dek_data_attr }}" data-video-showcase-title="{{ o_video_card_link_showcase_title_data_attr }}" data-video-showcase-permalink="{{ o_video_card_link_showcase_permalink_data_url }}" data-video-showcase-time="{{ o_video_card_link_showcase_time_data_attr }}" data-video-player-id="{{ o_video_card_player_id_attr }}" data-video-media-id="{{ o_video_card_media_id_attr }}">

<article class="o-video-card {{ modifier_class }} {{ o_video_card_classes }}" data-video-showcase-autoplay="{{ o_video_card_link_showcase_autoplay_data_attr }}" data-video-showcase-player>

{% if o_video_card_crop_class %}
	<div class="{{ o_video_card_crop_class }}" data-video-showcase-active-text="{{ o_video_card_crop_data_attr }}">
{% endif %}

	{% if o_video_card_permalink_url %}
		<a href="{{ o_video_card_permalink_url }}" class="{{ o_video_card_permalink_classes }}">
	{% endif %}
		<img class="o-video-card__image {{ o_video_card_image_classes }}" data-lazy-src="{{ o_video_card_image_url }}" src="{{ o_video_card_lazy_image_url }}" alt="{{ o_video_card_alt_attr }}">
	{% if o_video_card_permalink_url %}
		</a>
	{% endif %}

	{% if o_video_card_is_player %}
		<iframe class="js-VideoShowcasePlayerIframe" hidden frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" data-video-showcase-iframe></iframe>
		<div hidden id="jwplayerContainer" data-video-showcase-jwplayer></div>
		<div hidden id="connatixContainer" data-video-showcase-connatix></div>
		<div class="js-VideoShowcasePlayerOembed" hidden data-video-showcase-oembed></div>
	{% endif %}

	{% if c_play_icon %}
		{% include "@project/components/c-play-badge/c-play-badge.twig" with c_play_icon %}
	{% endif %}

{% if o_video_card_crop_class %}
	</div>
{% endif %}

<div class="o-video-card__meta // {{ o_video_card_meta_classes }}">
	{% if o_indicator %}
		{% include "@project/objects/o-indicator/o-indicator.twig" with o_indicator %}
	{% endif %}

	{% if c_heading %}
		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
	{% endif %}

	{% if c_dek %}
		{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
	{% endif %}

	{% if c_span %}
		{% include "@larva/components/c-span/c-span.twig" with c_span %}
	{% endif %}

	{% if o_article_byline %}
		{% include "@project/objects/o-article-byline/o-article-byline.twig" with o_article_byline %}
	{% endif %}
</div>

</article>

</div>

o-video-card.small JSON The data object for this pattern.
{
	"o_video_card_permalink_url": "#single_url",
	"o_video_card_alt_attr": "Thumbnail image",
	"o_video_card_image_url": "https://source.unsplash.com/random/175x98",
	"o_video_card_lazy_image_url": "https://source.unsplash.com/random/175x98",
	"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_dek_data_attr": "Dek test", "o_video_card_link_showcase_title_data_attr": "Title test", "o_video_card_link_showcase_permalink_data_url": "#url_test", "o_video_card_link_showcase_time_data_attr": "10:00", "modifier_class": "", "o_video_card_classes": "u-background-color-picked-bluewood lrv-u-margin-r-050 lrv-u-flex@tablet u-width-100p@tablet lrv-u-margin-tb-050", "o_video_card_crop_class": " lrv-a-glue-parent c-play-badge-parent u-width-175@tablet lrv-u-flex-shrink-0", "o_video_card_image_classes": " lrv-u-display-block lrv-u-width-100p", "o_video_card_is_player": false, "c_label": "", "o_video_card_crop_data_attr": "Now Playing", "o_video_card_meta_classes": "lrv-u-flex lrv-u-flex-direction-column u-position-relative u-margin-t-050@mobile-max u-margin-l-050@tablet u-justify-content-space-between@tablet", "o_video_card_link_classes": "lrv-u-width-100p ", "o_video_card_permalink_classes": "u-margin-r-050@mobile-max", "o_indicator": { "o_indicator_classes": "lrv-u-display-none", "c_span": { "modifier_class": "", "c_span_classes": "lrv-u-text-transform-uppercase u-font-size-13@mobile-max u-font-size-15 u-line-height-16 u-letter-spacing-009 lrv-u-font-family-primary lrv-u-font-weight-bold u-line-height-14@mobile-max", "c_span_text": "College Sports", "c_span_url": "", "c_span_link_classes": "" } }, "c_play_icon": { "c_play_badge_classes": "lrv-u-display-none" }, "c_heading": { "c_heading_classes": "lrv-u-font-weight-normal lrv-u-font-family-primary u-line-height-24 u-order-n1@mobile-max lrv-u-font-weight-bold lrv-u-cursor-pointer lrv-u-font-size-18 lrv-u-padding-l-050", "c_heading_id_attr": "section-heading", "c_heading_text": "Sign of the Times: MSU, Penn State and the ‘Man Cave’ Moral Dilemma", "c_heading_url": "#single-url", "c_heading_link_classes": "lrv-u-color-black lrv-u-font-weight-bold lrv-u-display-block", "c_heading_outer": false, "c_heading_outer_classes": "", "c_heading_is_primary_heading": false }, "c_span": { "modifier_class": "", "c_span_classes": "u-font-family-basic lrv-u-font-size-14@tablet u-color-brand-secondary-60 js-VideoShowcasePlayerTime lrv-u-padding-t-050 lrv-u-font-size-10", "c_span_text": "", "c_span_url": "", "c_span_link_classes": "" }, "c_dek": { "c_dek_classes": "lrv-u-display-none js-VideoShowcasePlayerDek", "c_dek_markup": "", "c_dek_text": "Perfection is rarely achieved in movies, but this heaven-sent concert doc hits the sweet spot. Over two days in January 1972, the Queen of Soul, Aretha Franklin — she was 29 at the time — sweeps into the New Temple Missionary Baptist Church in Watts in front of a congregation and testifies to God in song. The blessed thing took nearly half a century to come out because director Sydney Pollack failed to sync the image with the sound. Then digital angels stepped in, and glory, glory, hallelujah!" }, "o_article_byline": false }