larva objects: `o-card-list`

Available Variants

prototype

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
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
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-list README

o-card-list is a simple wrapping patttern for displaying a list of o-cards. This pattern is only necessary when semantic list elements are useful, or when a storing classes in a central place for the li wrapping element is useful.

A future improvement to this pattern would be an option for an ol since many of the card lists will be ordered chronologically.

o-card-list Twig The markup file.

<ul class="o-card-list {{ modifier_class }} {{ o_card_list_classes }}">
	{% for item in o_card_list_items %}
		<li class="o-card-list__item {{ o_card_list_item_classes }}">
			{% include "@larva/objects/o-card/o-card.twig" with item %}
		</li>
	{% endfor %}
</ul>

o-card-list JSON The data object for this pattern.

{
	"o_card_list_classes": "lrv-a-unstyle-list",
	"o_card_list_item_classes": "",
	"o_card_list_items": [
		{
			"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!"
			}
		},
		{
			"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!"
			}
		},
		{
			"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!"
			}
		}
	]
}