larva objects: o-card

Available Variants

prototype
Lazy loaded image
Article Kicker

For Sahbabii, Recording His Debut Album Was Part of The Grieving Process

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!

By Author Name
o-card README

o-card is a pattern generally used for a story or article that features a vertical layout. It is a very flexible pattern that includes several options for included components. The order of these can be modified to some extent using flex and order utilities, but developers should try to avoid modifying the display order in a way that could impact the experience for users using the keyboard.

o-card Twig The markup file. 
{% if o_card_tag_text %}
<{{ o_card_tag_text }} class="o-card {{ modifier_class }} {{ o_card_classes }}">
{% else %}
<article class="o-card {{ modifier_class }} {{ o_card_classes }}">
{% endif %}

	{% if o_card_link_url %}
		<a tabindex="0" href="{{ o_card_link_url }}" class="{{ o_card_link_classes }}"
			{% if o_card_link_rel_attribute %}
				rel="{{ o_card_link_rel_attribute }}"
			{% endif %}
		>
	{% endif %}

	{% if o_card_image_wrap_classes %}
	<div class="o-card__image-wrap {{ o_card_image_wrap_classes }}">
		{% endif %}

		{% if c_lazy_image %}
			{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
		{% endif %}

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

		{% if o_indicator %}
			{% include "@larva/objects/o-indicator/o-indicator.twig" with o_indicator %}
		{% endif %}

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

	<div class="o-card__content {{ o_card_content_classes }}">
		{% if o_span_group %}
			{% include "@larva/objects/o-span-group/o-span-group.twig" with o_span_group %}
		{% endif %}

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

		{% if article_kicker %}
			<div class="article_kicker_outer // {{ article_kicker_outer_classes }}">
				{% include "@larva/modules/article-kicker/article-kicker.twig" with article_kicker %}
			</div>
		{% endif %}

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

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

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

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

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

		{% if o_author %}
			{% include "@larva/objects/o-author/o-author.twig" with o_author %}
		{% endif %}
	</div>

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

{% if o_card_tag_text %}
</{{ o_card_tag_text }}>
{% else %}
</article>
{% endif %}
o-card JSON The data object for this pattern. 
{
	"o_card_classes": "",
	"o_card_tag_text": "",
	"o_card_link_url": "",
	"o_card_link_classes": "",
	"o_card_image_wrap_classes": "",
	"o_card_content_classes": "lrv-u-align-items-start lrv-u-flex lrv-u-flex-direction-column",
	"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-16x9",
		"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_svg": false,
	"c_span": false,
	"c_tagline": false,
	"c_title": {
		"c_title_classes": "",
		"c_title_tag_text": "",
		"c_title_id_attr": "title-of-a-story",
		"c_title_text": " For Sahbabii, Recording His Debut Album Was Part of The Grieving Process",
		"c_title_markup": "",
		"c_title_link_classes": "lrv-a-unstyle-link lrv-u-color-brand-primary:hover",
		"c_title_url": "#"
	},
	"c_timestamp": false,
	"o_author": {
		"o_author_classes": "lrv-u-text-transform-uppercase",
		"o_author_text": "By ",
		"c_span": {
			"modifier_class": "",
			"c_span_classes": "",
			"c_span_text": "Author Name",
			"c_span_url": "",
			"c_span_link_classes": "lrv-a-unstyle-link"
		},
		"c_timestamp": false,
		"c_tagline_author": false
	},
	"article_kicker": {
		"article_kicker_classes": "lrv-u-padding-b-050 lrv-u-border-b-1 lrv-u-text-transform-uppercase",
		"article_kicker_text": "Article Kicker",
		"article_kicker_url": "#",
		"article_kicker_link_classes": "lrv-a-unstyle-link"
	},
	"article_kicker_outer_classes": "lrv-u-padding-tb-1@desktop-xl",
	"c_dek": {
		"c_dek_classes": "",
		"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!"
	}
}