project modules: content-module

Available Variants

prototype
Lazy loaded image
Article Kicker

Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit consectetur adipiscing elit.

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!

Lazy loaded image
Article Kicker

Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit consectetur adipiscing elit.

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!

Lazy loaded image
Article Kicker

Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit consectetur adipiscing elit.

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!

content-module README

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

content-module Twig The markup file.
<div class="{{ content_module_wrapper_classes }}">
    <div class="content-module-items // {{ content_module_items_classes }}">
    {% for item in content_module_items %}
        {% include "@larva/objects/o-card/o-card.twig" with item %}
    {% endfor %}
    </div>
</div>
content-module JSON The data object for this pattern.
{
	"content_module_items_classes": "lrv-u-overflow-auto@mobile-max lrv-u-flex-shrink-0@mobile-max lrv-u-flex-direction-column@mobile-max lrv-u-flex lrv-u-margin-t-025 u-border-t-25 lrv-u-padding-tb-150 lrv-u-padding-r-2@mobile-max lrv-u-padding-lr-125@mobile-max lrv-u-width-100p",
	"content_module_items": [
		{
			"o_card_classes": "lrv-u-display-inline-flex lrv-u-flex-basis-100p@desktop-xl lrv-u-flex-basis-100p@desktop u-margin-b-125@mobile-max lrv-u-padding-tb-00@mobile-max lrv-u-flex-shrink-0@mobile-max u-width-288@mobile-max",
			"o_card_tag_text": "",
			"o_card_link_url": "#",
			"o_card_link_classes": "lrv-u-flex",
			"o_card_image_wrap_classes": "lrv-u-flex-basis-40p@desktop lrv-u-flex-basis-40p@desktop-xl lrv-u-flex-basis-25p@mobile-max",
			"o_card_content_classes": "lrv-u-margin-l-1 lrv-u-flex-basis-100p lrv-u-color-black",
			"c_lazy_image": {
				"c_lazy_image_classes": "u-width-98@desktop u-width-144 u-width-83@mobile-max lrv-u-margin-l-auto lrv-u-width-100 u-width-98@desktop u-width-83@mobile-max",
				"c_lazy_image_link_url": false,
				"c_lazy_image_link_classes": "lrv-a-unstyle-link",
				"c_lazy_image_crop_class": "lrv-a-crop-3x2",
				"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": "lrv-u-margin-b-00 lrv-u-font-family-primary lrv-u-margin-tb-0 lrv-u-font-weight-bold lrv-u-color-brand-primary:hover lrv-u-font-family-primary lrv-u-font-size-14@mobile-max u-font-size-15 lrv-u-margin-tb-00 u-line-height-18@mobile-max u-line-height-18",
				"c_title_tag_text": "",
				"c_title_id_attr": "title-of-a-story",
				"c_title_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit consectetur adipiscing elit.",
				"c_title_markup": "",
				"c_title_link_classes": "lrv-u-color-black lrv-u-color-brand-primary:hover",
				"c_title_url": ""
			},
			"c_timestamp": false,
			"o_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_image_markup": ""
			},
			"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": "lrv-u-display-inline-flex lrv-u-flex-basis-100p@desktop-xl lrv-u-flex-basis-100p@desktop u-margin-b-125@mobile-max lrv-u-padding-tb-00@mobile-max lrv-u-flex-shrink-0@mobile-max u-width-288@mobile-max",
			"o_card_tag_text": "",
			"o_card_link_url": "#",
			"o_card_link_classes": "lrv-u-flex",
			"o_card_image_wrap_classes": "lrv-u-flex-basis-40p@desktop lrv-u-flex-basis-40p@desktop-xl lrv-u-flex-basis-25p@mobile-max",
			"o_card_content_classes": "lrv-u-margin-l-1 lrv-u-flex-basis-100p lrv-u-color-black",
			"c_lazy_image": {
				"c_lazy_image_classes": "u-width-98@desktop u-width-144 u-width-83@mobile-max lrv-u-margin-l-auto lrv-u-width-100 u-width-98@desktop u-width-83@mobile-max",
				"c_lazy_image_link_url": false,
				"c_lazy_image_link_classes": "lrv-a-unstyle-link",
				"c_lazy_image_crop_class": "lrv-a-crop-3x2",
				"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": "lrv-u-margin-b-00 lrv-u-font-family-primary lrv-u-margin-tb-0 lrv-u-font-weight-bold lrv-u-color-brand-primary:hover lrv-u-font-family-primary lrv-u-font-size-14@mobile-max u-font-size-15 lrv-u-margin-tb-00 u-line-height-18@mobile-max u-line-height-18",
				"c_title_tag_text": "",
				"c_title_id_attr": "title-of-a-story",
				"c_title_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit consectetur adipiscing elit.",
				"c_title_markup": "",
				"c_title_link_classes": "lrv-u-color-black lrv-u-color-brand-primary:hover",
				"c_title_url": ""
			},
			"c_timestamp": false,
			"o_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_image_markup": ""
			},
			"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": "lrv-u-display-inline-flex lrv-u-flex-basis-100p@desktop-xl lrv-u-flex-basis-100p@desktop u-margin-b-125@mobile-max lrv-u-padding-tb-00@mobile-max lrv-u-flex-shrink-0@mobile-max u-width-288@mobile-max",
			"o_card_tag_text": "",
			"o_card_link_url": "#",
			"o_card_link_classes": "lrv-u-flex",
			"o_card_image_wrap_classes": "lrv-u-flex-basis-40p@desktop lrv-u-flex-basis-40p@desktop-xl lrv-u-flex-basis-25p@mobile-max",
			"o_card_content_classes": "lrv-u-margin-l-1 lrv-u-flex-basis-100p lrv-u-color-black",
			"c_lazy_image": {
				"c_lazy_image_classes": "u-width-98@desktop u-width-144 u-width-83@mobile-max lrv-u-margin-l-auto lrv-u-width-100 u-width-98@desktop u-width-83@mobile-max",
				"c_lazy_image_link_url": false,
				"c_lazy_image_link_classes": "lrv-a-unstyle-link",
				"c_lazy_image_crop_class": "lrv-a-crop-3x2",
				"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": "lrv-u-margin-b-00 lrv-u-font-family-primary lrv-u-margin-tb-0 lrv-u-font-weight-bold lrv-u-color-brand-primary:hover lrv-u-font-family-primary lrv-u-font-size-14@mobile-max u-font-size-15 lrv-u-margin-tb-00 u-line-height-18@mobile-max u-line-height-18",
				"c_title_tag_text": "",
				"c_title_id_attr": "title-of-a-story",
				"c_title_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit consectetur adipiscing elit.",
				"c_title_markup": "",
				"c_title_link_classes": "lrv-u-color-black lrv-u-color-brand-primary:hover",
				"c_title_url": ""
			},
			"c_timestamp": false,
			"o_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_image_markup": ""
			},
			"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!"
			}
		}
	]
}