larva modules: secondary-stories
Available Variants
prototypesecondary-stories
README
This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.
secondary-stories
Twig The markup file.
<section class="secondary-stories {{ secondary_stories_classes }}">
<div class="stories-content-primary // {{ stories_content_primary_classes }} ">
<div class="stories-content-primary-inner // {{ stories_content_primary_inner_classes }} ">
<div class="stories-card-primary // {{ stories_card_primary_classes }}">
{% include "@larva/objects/o-card/o-card.twig" with stories[0] %}
</div>
<div class="stories-card-secondary // {{ stories_card_secondary_classes }} ">
<div class=" stories-card-secondary-inner // {{ stories_card_secondary_inner_classes }}">
{% include "@larva/objects/o-card/o-card.twig" with stories[1] %}
{% include "@larva/objects/o-card/o-card.twig" with stories[2] %}
</div>
{% include "@larva/objects/o-card/o-card.twig" with stories[3] %}
</div>
</div>
</div>
<div class="stories-content-secondary // {{ stories_content_secondary_classes }} ">
<div class="stories-content-secondary-inner // {{ stories_content_secondary_inner_classes }} ">
{% include "@larva/objects/o-card/o-card.twig" with stories[4] %}
{% include "@larva/objects/o-card/o-card.twig" with stories[5] %}
</div>
</div>
</section>
secondary-stories
JSON The data object for this pattern.
{
"stories": [
{
"o_card_classes": "lrv-u-flex@tablet lrv-u-flex-direction-column@desktop-xl",
"o_card_tag_text": "",
"o_card_link_url": "",
"o_card_link_classes": "",
"o_card_image_wrap_classes": "lrv-u-flex-basis-100p lrv-u-margin-r-175@tablet lrv-u-margin-r-00@desktop-xl",
"o_card_content_classes": "lrv-u-align-items-start lrv-u-flex lrv-u-flex-basis-100p lrv-u-flex-direction-column lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max",
"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_svg": false,
"c_span": false,
"c_tagline": false,
"c_title": {
"c_title_classes": "lrv-a-font-primary-xl lrv-u-padding-t-150@mobile-max lrv-u-padding-b-1@mobile-max lrv-u-padding-t-050@tablet lrv-u-padding-b-075@tablet",
"c_title_tag_text": "",
"c_title_id_attr": "title-of-a-story",
"c_title_text": " It Started With Thirst Traps on TikTok. Now, She’s Accused of Running a BDSM Cult",
"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-a-font-body-s lrv-u-text-transform-uppercase lrv-u-color-black",
"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 lrv-a-font-basic-l",
"article_kicker_text": "Exclusive",
"article_kicker_url": "#",
"article_kicker_link_classes": "lrv-a-unstyle-link"
},
"article_kicker_outer_classes": "lrv-a-font-basic-l lrv-a-glue-parent lrv-u-background-color-white lrv-u-flex lrv-u-padding-b-1 lrv-u-padding-l-1@mobile-max lrv-u-padding-r-1 lrv-u-padding-t-1@desktop-xl lrv-u-padding-t-1@mobile-max lrv-u-text-transform-uppercase u-margin-t-n187@desktop-xl u-margin-t-n187@mobile-max u-z-index-middle-bottom",
"c_dek": false
},
{
"o_card_classes": "lrv-u-margin-l-00@desktop-xl lrv-u-flex-basis-100p lrv-u-flex-direction-column@desktop-xl lrv-a-space-children--1 lrv-a-space-children--0@desktop-xl lrv-u-border-t-1@mobile-max lrv-u-padding-t-2@mobile-max lrv-a-space-children-horizontal@tablet lrv-u-flex@tablet",
"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 lrv-u-padding-b-150@mobile-max lrv-u-padding-t-1@mobile-max",
"c_lazy_image": {
"c_lazy_image_classes": "lrv-u-width-100p",
"c_lazy_image_link_url": false,
"c_lazy_image_link_classes": "lrv-a-unstyle-link",
"c_lazy_image_crop_class": "lrv-a-crop-1x1@tablet lrv-a-crop-3x2@desktop-xl lrv-a-crop-3x2@mobile-max",
"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-padding-b-075@mobile-max lrv-a-font-primary-m lrv-u-padding-t-125@mobile-max",
"c_title_tag_text": "",
"c_title_id_attr": "title-of-a-story",
"c_title_text": "Meet the Oath Keeper on the NRA’s Board of Directors",
"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-a-font-body-xs lrv-u-text-transform-uppercase lrv-u-color-black",
"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 lrv-a-font-basic-xs ",
"article_kicker_text": "AMERICAN MILITIA",
"article_kicker_url": "#",
"article_kicker_link_classes": "lrv-a-unstyle-link"
},
"article_kicker_outer_classes": "lrv-u-padding-b-075 lrv-u-padding-b-125@desktop-xl lrv-u-padding-t-1@desktop-xl",
"c_dek": {
"c_dek_classes": "lrv-u-margin-tb-075@desktop-xl lrv-a-hidden@desktop-max lrv-a-hidden@desktop-xl-max lrv-a-font-body-l lrv-a-truncate-ellipsis-5line",
"c_dek_markup": "",
"c_dek_text": " Links between the notorious militia and the gun lobby run deep"
}
},
{
"o_card_classes": "lrv-a-space-children--1 lrv-a-space-children--2@desktop-xl lrv-a-space-children-horizontal lrv-u-flex-basis-100p lrv-u-border-t-0@desktop-xl lrv-u-border-t-1@tablet lrv-u-flex-direction-column@desktop-xl lrv-u-flex@tablet lrv-u-margin-t-00@desktop-xl lrv-u-margin-t-150@tablet lrv-u-padding-t-00@desktop-xl lrv-u-padding-t-150@tablet",
"o_card_tag_text": "",
"o_card_link_url": "",
"o_card_link_classes": "",
"o_card_image_wrap_classes": "",
"o_card_content_classes": "lrv-u-margin-l-00@mobile-max lrv-u-margin-l-00@desktop-xl lrv-u-align-items-start lrv-u-flex lrv-u-flex-direction-column lrv-u-padding-b-150@mobile-max lrv-u-padding-t-1@mobile-max",
"c_lazy_image": {
"c_lazy_image_classes": "lrv-u-width-100p",
"c_lazy_image_link_url": false,
"c_lazy_image_link_classes": "lrv-a-unstyle-link",
"c_lazy_image_crop_class": "lrv-a-crop-1x1@tablet lrv-a-crop-3x2@desktop-xl lrv-a-crop-3x2@mobile-max",
"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-padding-b-075@mobile-max lrv-a-font-primary-m lrv-u-padding-t-125@mobile-max",
"c_title_tag_text": "",
"c_title_id_attr": "title-of-a-story",
"c_title_text": "Welcome to Jenny Lewis’ Yacht-Rock Era. It’s Nice Here",
"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-a-font-body-xs lrv-u-text-transform-uppercase lrv-u-color-black",
"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 lrv-a-font-basic-xs ",
"article_kicker_text": "YACHT ROCK",
"article_kicker_url": "#",
"article_kicker_link_classes": "lrv-a-unstyle-link"
},
"article_kicker_outer_classes": "lrv-u-padding-b-075 lrv-u-padding-b-125@desktop-xl lrv-u-padding-t-1@desktop-xl",
"c_dek": {
"c_dek_classes": "lrv-u-margin-tb-075@desktop-xl lrv-a-hidden@desktop-max lrv-a-hidden@desktop-xl-max lrv-a-font-body-l lrv-a-truncate-ellipsis-5line",
"c_dek_markup": "",
"c_dek_text": "“Puppy and a Truck” is all about the unconditional love that only a dog and a vehicle can provide"
}
},
{
"o_card_classes": " lrv-u-flex-basis-40p lrv-u-margin-r-2@tablet lrv-u-border-t-1@mobile-max lrv-u-padding-t-2@mobile-max lrv-u-margin-t-175@desktop-xl lrv-u-padding-t-175@desktop-xl lrv-u-border-t-1@desktop-xl lrv-u-margin-r-00@desktop-xl lrv-u-border-t-1@desktop-xl",
"o_card_tag_text": "",
"o_card_link_url": "",
"o_card_link_classes": "",
"o_card_image_wrap_classes": "",
"o_card_content_classes": "",
"c_lazy_image": false,
"c_svg": false,
"c_span": false,
"c_tagline": false,
"c_title": {
"c_title_classes": "lrv-a-font-primary-m lrv-u-display-inline",
"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-display-inline lrv-a-font-primary-m lrv-u-color-grey-light",
"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-a-font-primary-m article-kicker lrv-u-display-inline",
"article_kicker_text": "Article Kicker",
"article_kicker_url": "#",
"article_kicker_link_classes": "lrv-a-unstyle-link"
},
"article_kicker_outer_classes": " lrv-u-color-brand-primary lrv-u-display-inline",
"c_dek": false
},
{
"o_card_classes": "lrv-u-padding-r-2@tablet lrv-u-padding-b-150@mobile-max lrv-u-flex-basis-50p lrv-u-border-r-1@tablet ",
"o_card_tag_text": "",
"o_card_link_url": "",
"o_card_link_classes": "",
"o_card_image_wrap_classes": "lrv-u-flex-basis-100p@desktop-xl-max ",
"o_card_content_classes": " lrv-u-align-items-start lrv-u-flex lrv-u-flex-basis-100p@desktop-xl-max lrv-u-flex-direction-column lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max",
"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_svg": false,
"c_span": false,
"c_tagline": false,
"c_title": {
"c_title_classes": "lrv-u-padding-t-00@desktop-xl lrv-u-padding-b-075 lrv-u-padding-t-1@mobile-max lrv-a-font-primary-xl lrv-u-padding-t-025",
"c_title_tag_text": "",
"c_title_id_attr": "title-of-a-story",
"c_title_text": "40 Watt Sun Raise the Emotional Stakes While Turning Down the Volume on New Chamber-Folk Epic",
"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-a-font-body-s lrv-u-text-transform-uppercase lrv-u-color-black",
"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 lrv-a-font-basic-l lrv-a-font-basic-xs ",
"article_kicker_text": "INSIDE LOOK",
"article_kicker_url": "#",
"article_kicker_link_classes": "lrv-a-unstyle-link"
},
"article_kicker_outer_classes": " lrv-a-glue-parent lrv-u-background-color-white lrv-u-padding-b-1 lrv-u-padding-r-1 lrv-u-padding-t-1",
"c_dek": false
},
{
"o_card_classes": "lrv-u-padding-l-2@tablet lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max lrv-u-flex-basis-50p",
"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-border-b-1@mobile-max lrv-u-border-t-1@mobile-max lrv-u-flex lrv-u-flex-direction-column lrv-u-margin-b-2@mobile-max lrv-u-padding-b-2@mobile-max lrv-u-padding-t-2@mobile-max",
"c_lazy_image": false,
"c_svg": false,
"c_span": false,
"c_tagline": false,
"c_title": {
"c_title_classes": "lrv-u-padding-t-1 lrv-a-font-primary-l lrv-u-padding-t-00@desktop-xl",
"c_title_tag_text": "",
"c_title_id_attr": "title-of-a-story",
"c_title_text": "Marilyn Manson: The Monster Hiding in Plain Sight",
"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-a-font-body-xs lrv-u-text-transform-uppercase lrv-u-color-black",
"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 lrv-a-font-basic-l",
"article_kicker_text": "EXCLUSIVE",
"article_kicker_url": "#",
"article_kicker_link_classes": "lrv-a-unstyle-link"
},
"article_kicker_outer_classes": "lrv-u-padding-b-125@desktop-xl",
"c_dek": {
"c_dek_classes": "lrv-a-font-body-l lrv-a-truncate-ellipsis-5line lrv-u-margin-b-1@desktop-xl lrv-u-margin-t-075@desktop-xl lrv-u-margin-tb-075@mobile-max",
"c_dek_markup": "",
"c_dek_text": "He was a provocative media darling for decades. Offstage, exes allege, he was an abuser who made their lives hell. A Rolling Stone investigation based on court documents and more than 55 new interviews"
}
}
],
"secondary_stories_classes": "",
"stories_content_primary_classes": "lrv-u-border-t-6",
"stories_content_primary_inner_classes": "lrv-u-padding-b-150@tablet lrv-u-padding-b-3@desktop-xl lrv-u-margin-b-250@mobile-max lrv-u-padding-t-150@mobile-max lrv-u-padding-t-150 lrv-u-border-t-2 lrv-u-flex lrv-u-margin-t-025 lrv-a-space-children--3@desktop-xl lrv-a-space-children-horizontal lrv-u-flex-direction-column lrv-u-flex-direction-row@desktop-xl lrv-u-padding-t-250@desktop-xl",
"stories_card_primary_classes": " lrv-u-flex-basis-45p lrv-u-padding-b-150 lrv-u-padding-b-00@desktop-xl",
"stories_card_secondary_classes": " lrv-u-flex lrv-u-padding-l-150@mobile-max lrv-u-padding-r-150@mobile-max lrv-u-border-t-1@tablet lrv-u-padding-t-00@mobile-max lrv-u-flex-direction-column@mobile-max lrv-u-flex-direction-row-reverse lrv-u-flex-basis-55p lrv-u-flex-direction-column@desktop-xl lrv-u-padding-t-150 lrv-u-padding-t-00@desktop-xl lrv-u-border-t-0@desktop-xl",
"stories_card_secondary_inner_classes": " lrv-u-flex-basis-60p lrv-u-padding-t-00@desktop-xl lrv-u-border-t-0@desktop-xl lrv-a-space-children--2@desktop-xl lrv-a-space-children-horizontal@desktop-xl lrv-u-flex lrv-u-flex-direction-column lrv-u-flex-direction-row@desktop-xl",
"stories_content_secondary_classes": "lrv-u-border-t-6",
"stories_content_secondary_inner_classes": " lrv-u-padding-t-150@tablet lrv-u-border-t-2 lrv-u-flex@tablet lrv-u-margin-t-025 lrv-u-padding-t-150@mobile-max lrv-u-padding-tb-250@desktop-xl"
}