larva objects: o-product-card.primary

Available Variants

primary prototype

Title of a story

Lazy loaded image

Google

Smart Thermostat For Home

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!

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!

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-product-card README

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

o-product-card Twig The markup file. 
<div class="o-product-card {{o_product_card_classes}}">
	{% if o_product_card_link_url %}
		<a tabindex="0" href="{{ o_product_card_link_url }}" class="o-product-card__link {{ o_product_card_link_classes }}">
	{% endif %}

		<div class="o-product-card__award {{o_product_card_header_classes}}">
			{% if c_title_award %}
				{% include "@larva/components/c-title/c-title.twig" with c_title_award %}
			{% endif %}
		</div>

		<div class="o-product-card__product-details {{o_product_card_details_classes}}">
			{% if c_lazy_image %}
				{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
			{% endif %}

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

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

			{% if c_button_buy %}
				{% include "@larva/components/c-button/c-button.twig" with c_button_buy %}
			{% endif %}
		</div>

		<div class="o-product-card__verdict best-of-verdict {{o_product_card_verdict_classes}}" >
			<div class="o-product-card__header-verdict lrv-a-hidden@desktop lrv-a-font-secondary-m lrv-u-padding-a-075">
				{{product_grid_header_verdict_text}}
			</div>

			{% if c_dek_verdict %}
				{% include "@larva/components/c-dek/c-dek.twig" with c_dek_verdict %}
			{% endif %}
		</div>

		<div class="o-product-card__pros best-of-pros {{o_product_card_pros_classes}}" >
			<div class="o-product-card__header-pros lrv-a-hidden@desktop lrv-a-font-secondary-m lrv-u-padding-a-075">
				{{product_grid_header_pros_text}}
			</div>

			{% if c_dek_pros %}
				{% include "@larva/components/c-dek/c-dek.twig" with c_dek_pros %}
			{% endif %}
		</div>

		<div class="o-product-card__cons best-of-cons {{o_product_card_cons_classes}}">
			<div class="o-product-card__header-cons lrv-a-hidden@desktop lrv-a-font-secondary-m lrv-u-padding-a-075">
				{{product_grid_header_cons_text}}
			</div>

			{% if c_dek_cons %}
				{% include "@larva/components/c-dek/c-dek.twig" with c_dek_cons %}
			{% endif %}
		</div>

	{% if o_product_card_link_url %}
	</a>
	{% endif %}

</div>
o-product-card.primary JSON The data object for this pattern. 
{
	"o_product_card_classes": "o-product-card--primary lrv-u-border-a-1@mobile-max lrv-u-border-color-grey-light lrv-u-width-100p",
	"o_product_card_header_classes": "lrv-u-padding-a-025 lrv-u-text-align-center lrv-u-background-color-brand-primary",
	"o_product_card_details_classes": "lrv-u-text-align-center lrv-u-padding-tb-2 lrv-u-padding-lr-1 lrv-u-flex-grow-1",
	"o_product_card_verdict_classes": "lrv-u-flex",
	"o_product_card_pros_classes": "lrv-u-flex",
	"o_product_card_cons_classes": "lrv-u-flex",
	"o_product_card_link_url": "#",
	"o_product_card_link_classes": "lrv-a-unstyle-link",
	"c_title_award": {
		"c_title_classes": "lrv-u-border-a-2 lrv-a-font-secondary-m lrv-u-padding-tb-050",
		"c_title_tag_text": "",
		"c_title_id_attr": "title-of-a-story",
		"c_title_text": "Title of a story",
		"c_title_markup": "",
		"c_title_link_classes": "",
		"c_title_url": false
	},
	"c_title_brand": {
		"c_title_classes": "lrv-u-padding-t-1 lrv-a-font-primary-m",
		"c_title_tag_text": "",
		"c_title_id_attr": "title-of-a-story",
		"c_title_text": "Google",
		"c_title_markup": "",
		"c_title_link_classes": "lrv-a-unstyle-link",
		"c_title_url": false
	},
	"c_lazy_image": {
		"c_lazy_image_classes": "",
		"c_lazy_image_link_url": false,
		"c_lazy_image_link_classes": "lrv-a-unstyle-link",
		"c_lazy_image_crop_class": "lrv-a-crop-1x1",
		"c_lazy_image_crop_style_attr": false,
		"c_lazy_image_link_tab_index_attr": false,
		"c_lazy_image_alt_attr": "Lazy loaded image",
		"c_lazy_image_src_url": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg",
		"c_lazy_image_placeholder_url": "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
		"c_lazy_image_srcset_attr": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w",
		"c_lazy_image_sizes_attr": "auto",
		"c_lazy_image_img_classes": "lrv-u-background-color-grey-lightest lrv-u-width-100p lrv-u-display-block lrv-u-height-auto",
		"c_lazy_image_height_attr": "",
		"c_lazy_image_width_attr": "",
		"c_lazy_image_in_initial_viewport": false,
		"c_lazy_image_decoding_attr": "async"
	},
	"c_tagline_product": {
		"c_tagline_classes": "lrv-u-margin-tb-050 lrv-a-font-secondary-s",
		"c_tagline_text": "Smart Thermostat For Home"
	},
	"c_button_buy": {
		"c_button_classes": "lrv-u-cursor-pointer lrv-u-padding-tb-025 lrv-u-padding-lr-2 lrv-u-background-color-brand-primary lrv-u-color-black lrv-a-font-secondary-m lrv-u-text-transform-uppercase ",
		"c_button_ga_tracking": {},
		"c_button_inner_classes": "",
		"c_button_rel_attr": "",
		"c_button_screen_reader_text": "Sign Up",
		"c_button_target_attr": "",
		"c_button_text": "Buy Now",
		"c_button_type_attr": "submit",
		"c_button_url": ""
	},
	"c_dek_verdict": {
		"c_dek_classes": "lrv-u-padding-a-075 lrv-u-margin-tb-00 lrv-a-font-secondary-s",
		"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!"
	},
	"c_dek_pros": {
		"c_dek_classes": "lrv-u-padding-a-075 lrv-u-margin-tb-00 lrv-a-font-secondary-s",
		"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!"
	},
	"c_dek_cons": {
		"c_dek_classes": "lrv-u-padding-a-075 lrv-u-margin-tb-00 lrv-a-font-secondary-s",
		"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!"
	}
}