larva modules: story.story-arc

Lazy loaded image

‘A Momentous Weekend’: LACMA’s High-Stakes Collectors Committee Event Raises $2.4 M.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

story README

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

story Twig The markup file.
<div class="story lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop // {{ story_classes }}">
	<div class="{{ story_grid_classes }}">

		<div class="{{ story_grid_primary_classes }} // lrv-a-glue-parent u-padding-t-1@mobile-max lrv-u-flex lrv-u-flex-direction-column lrv-u-height-100p lrv-u-justify-content-start">
			<div class="lrv-a-glue-parent">
				{% if c_lazy_image %}
					{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
				{% endif %}

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

		<div class="{{ story_grid_secondary_classes }} // lrv-u-flex lrv-u-flex-direction-column lrv-u-height-100p lrv-u-justify-content-center">
			{% if c_title %}
				{% include "@larva/components/c-title/c-title.twig" with c_title %}
			{% endif %}

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

			<ul class="lrv-u-flex lrv-u-order-n1 lrv-a-unstyle-list lrv-a-space-children-horizontal lrv-a-space-children--050 lrv-u-margin-b-050 u-letter-spacing-012 // {{ story_links_classes }}">

				{% if c_link_top %}
					<li>
						{% include "@larva/components/c-link/c-link.twig" with c_link_top %}
					</li>
				{% endif %}

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

				{% if article_kicker %}
					<li>
						{% include "@larva/modules/article-kicker/article-kicker.twig" with article_kicker %}
					</li>
				{% endif %}
			</ul>

			<ul class="lrv-a-unstyle-list // {{ story_nav_classes }} {{ story_nav_layout_classes }}">
				{% if c_button %}
					<li class="lrv-u-flex">
						{% include "@larva/components/c-button/c-button.twig" with c_button %}
					</li>
				{% endif %}

				{% if c_tagline_author %}
					<li class="lrv-u-flex // {{ c_tagline_author_wrapper_classes }}">
						By {% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline_author %}
					</li>
				{% endif %}

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

			{% if c_link_bottom %}
				<div class="lrv-u-flex lrv-u-order-100 lrv-u-margin-t-050 // {{ c_link_bottom_wrapper_classes }}">
					{% if c_link_bottom %}
						{% include "@larva/components/c-link/c-link.twig" with c_link_bottom %}
					{% endif %}
				</div>
			{% endif %}

		</div>

	</div>

	{% if story_arc_stories %}
		<div class="lrv-u-margin-t-1 lrv-u-margin-t-2@desktop">
			{% include "@larva/modules/story-arc-stories/story-arc-stories.twig" with story_arc_stories %}
		</div>
	{% endif %}

</div>

{% if is_river_story %}
	{{ story_after_wp_action }}
{% endif %}
story.story-arc JSON The data object for this pattern.
{
	"story_classes": "",
	"story_nav_classes": "lrv-u-font-size-12 lrv-u-font-family-primary lrv-u-text-transform-uppercase lrv-u-font-weight-bold lrv-u-color-black ",
	"story_nav_layout_classes": "lrv-u-flex lrv-u-align-items-center lrv-a-space-children-horizontal lrv-a-space-children--2 lrv-a-hidden@mobile-max lrv-u-margin-t-050",
	"story_grid_classes": "lrv-a-grid lrv-a-cols3",
	"story_grid_primary_classes": "lrv-u-margin-r-2@desktop-xl lrv-u-margin-r-00 lrv-u-margin-r-1@desktop",
	"story_grid_secondary_classes": "lrv-a-span2",
	"story_links_classes": "",
	"c_span": {
		"modifier_class": "",
		"c_span_classes": "lrv-u-whitespace-nowrap",
		"c_span_text": "News",
		"c_span_url": "#",
		"c_span_link_classes": ""
	},
	"c_link": false,
	"c_link_bottom": false,
	"c_link_bottom_wrapper_classes": "",
	"c_title": {
		"c_title_classes": "lrv-u-font-size-14 lrv-u-font-size-26@tablet lrv-u-font-size-32@desktop lrv-u-font-family-primary lrv-u-display-block lrv-u-font-weight-normal lrv-u-font-weight-bold@desktop lrv-u-line-height-small lrv-u-margin-b-050",
		"c_title_tag_text": "",
		"c_title_id_attr": "title-of-a-story",
		"c_title_text": "‘A Momentous Weekend’: LACMA’s High-Stakes Collectors Committee Event Raises $2.4 M.",
		"c_title_markup": "",
		"c_title_link_classes": "lrv-a-unstyle-link lrv-u-color-brand-primary:hover",
		"c_title_url": "#"
	},
	"c_dek": {
		"c_dek_classes": "",
		"c_dek_markup": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.",
		"c_dek_text": 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-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_tagline_author": {
		"c_tagline_classes": "lrv-u-margin-l-050",
		"c_tagline_text": false,
		"c_tagline_markup": "Staff Writer"
	},
	"c_timestamp": {
		"c_timestamp_classes": "",
		"c_timestamp_datetime_attr": "00:00-YY-DD-MM",
		"c_timestamp_text": "July 3, 2001",
		"c_timestamp_aria_label_attr": false
	},
	"story_arc_stories": {
		"c_span": {
			"modifier_class": "",
			"c_span_classes": "lrv-u-whitespace-nowrap lrv-u-font-weight-bold",
			"c_span_text": "Event Coverage:",
			"c_span_url": "",
			"c_span_link_classes": ""
		},
		"c_button": {
			"c_button_classes": "lrv-a-unstyle-button lrv-u-cursor-pointer",
			"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": "Art Basel Hong Kong",
			"c_button_type_attr": "submit",
			"c_button_url": "#"
		},
		"story_arc_stories": [
			{
				"o_story_arc_item_classes": "",
				"c_timestamp": {
					"c_timestamp_classes": "lrv-u-font-family-primary lrv-u-background-color-body lrv-u-font-weight-bold lrv-u-font-size-12 lrv-u-color-brand-primary",
					"c_timestamp_datetime_attr": "00:00-YY-DD-MM",
					"c_timestamp_text": "July 3, 2001",
					"c_timestamp_aria_label_attr": false
				},
				"o_tease": {
					"o_tease_url": "#",
					"o_tease_classes": "lrv-u-flex lrv-u-align-items-center u-align-items-flex-start@mobile-max u-flex-direction-row-reverse",
					"o_tease_link_classes": "lrv-u-display-contents",
					"o_tease_primary_classes": "lrv-u-flex-grow-1",
					"o_tease_secondary_classes": "lrv-u-flex-shrink-0 lrv-u-width-30p lrv-u-margin-r-1 u-width-65",
					"c_heading": false,
					"c_title": {
						"c_title_classes": "lrv-u-font-family-primary lrv-u-font-size-14 lrv-u-font-size-16@desktop u-color-black lrv-u-font-weight-normal",
						"c_title_tag_text": "",
						"c_title_id_attr": "title-of-a-story",
						"c_title_text": "Art Basel Plans ‘Interventions’ for 50th Anniversary, with Kasper König in Charge",
						"c_title_markup": "",
						"c_title_link_classes": "",
						"c_title_url": false
					},
					"c_tagline": 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": "Post tease thumbnail 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 lrv-u-border-radius-5 u-box-shadow-light",
						"c_lazy_image_height_attr": "",
						"c_lazy_image_width_attr": "",
						"c_lazy_image_in_initial_viewport": false,
						"c_lazy_image_decoding_attr": "async"
					},
					"c_button": false,
					"c_span": false
				}
			},
			{
				"o_story_arc_item_classes": "",
				"c_timestamp": {
					"c_timestamp_classes": "lrv-u-font-family-primary lrv-u-background-color-body lrv-u-font-weight-bold lrv-u-font-size-12 lrv-u-color-brand-primary",
					"c_timestamp_datetime_attr": "00:00-YY-DD-MM",
					"c_timestamp_text": "July 3, 2001",
					"c_timestamp_aria_label_attr": false
				},
				"o_tease": {
					"o_tease_url": "#",
					"o_tease_classes": "lrv-u-flex lrv-u-align-items-center u-align-items-flex-start@mobile-max u-flex-direction-row-reverse",
					"o_tease_link_classes": "lrv-u-display-contents",
					"o_tease_primary_classes": "lrv-u-flex-grow-1",
					"o_tease_secondary_classes": "lrv-u-flex-shrink-0 lrv-u-width-30p lrv-u-margin-r-1 u-width-65",
					"c_heading": false,
					"c_title": {
						"c_title_classes": "lrv-u-font-family-primary lrv-u-font-size-14 lrv-u-font-size-16@desktop u-color-black lrv-u-font-weight-normal",
						"c_title_tag_text": "",
						"c_title_id_attr": "title-of-a-story",
						"c_title_text": "Art Basel Plans ‘Interventions’ for 50th Anniversary, with Kasper König in Charge",
						"c_title_markup": "",
						"c_title_link_classes": "",
						"c_title_url": false
					},
					"c_tagline": 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": "Post tease thumbnail 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 lrv-u-border-radius-5 u-box-shadow-light",
						"c_lazy_image_height_attr": "",
						"c_lazy_image_width_attr": "",
						"c_lazy_image_in_initial_viewport": false,
						"c_lazy_image_decoding_attr": "async"
					},
					"c_button": false,
					"c_span": false
				}
			},
			{
				"o_story_arc_item_classes": "",
				"c_timestamp": {
					"c_timestamp_classes": "lrv-u-font-family-primary lrv-u-background-color-body lrv-u-font-weight-bold lrv-u-font-size-12 lrv-u-color-brand-primary",
					"c_timestamp_datetime_attr": "00:00-YY-DD-MM",
					"c_timestamp_text": "July 3, 2001",
					"c_timestamp_aria_label_attr": false
				},
				"o_tease": {
					"o_tease_url": "#",
					"o_tease_classes": "lrv-u-flex lrv-u-align-items-center u-align-items-flex-start@mobile-max u-flex-direction-row-reverse",
					"o_tease_link_classes": "lrv-u-display-contents",
					"o_tease_primary_classes": "lrv-u-flex-grow-1",
					"o_tease_secondary_classes": "lrv-u-flex-shrink-0 lrv-u-width-30p lrv-u-margin-r-1 u-width-65",
					"c_heading": false,
					"c_title": {
						"c_title_classes": "lrv-u-font-family-primary lrv-u-font-size-14 lrv-u-font-size-16@desktop u-color-black lrv-u-font-weight-normal",
						"c_title_tag_text": "",
						"c_title_id_attr": "title-of-a-story",
						"c_title_text": "Art Basel Plans ‘Interventions’ for 50th Anniversary, with Kasper König in Charge",
						"c_title_markup": "",
						"c_title_link_classes": "",
						"c_title_url": false
					},
					"c_tagline": 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": "Post tease thumbnail 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 lrv-u-border-radius-5 u-box-shadow-light",
						"c_lazy_image_height_attr": "",
						"c_lazy_image_width_attr": "",
						"c_lazy_image_in_initial_viewport": false,
						"c_lazy_image_decoding_attr": "async"
					},
					"c_button": false,
					"c_span": false
				}
			}
		]
	}
}