larva modules: author-blurb

Available Variants

prototype
Lazy loaded image

Mike Fleming Jr

Co-Editor-in-Chief, Film

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At quis risus sed vulputate odio ut enim blandit. Aliquam sem et tortor consequat id. Convallis aenean et tortor at risus viverra. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Id aliquet lectus proin nibh nisl. Id diam maecenas ultricies mi. Luctus venenatis lectus magna fringilla urna porttitor rhoncus.

author-blurb README

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

author-blurb Twig The markup file.
<section class="author-blurb // {{ author_blurb_classes }}">
	{% if c_lazy_image %}
		<div class="a-author-blurb-grid__image lrv-u-margin-r-150">
			{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
		</div>
	{% endif %}

	<div class="u-display-contents@desktop-max">
		<div class="a-author-blurb-grid__details">
			{% if c_heading %}
				{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
			{% endif %}

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

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

		<div class="a-author-blurb-grid__text">
			{% if c_tagline %}
				{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
			{% endif %}
		</div>
	</div>

</section>
author-blurb JSON The data object for this pattern.
{
	"c_lazy_image": {
		"c_lazy_image_classes": " lrv-u-width-200",
		"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": "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_heading": {
		"c_heading_classes": " lrv-u-font-family-secondary lrv-u-font-size-36@desktop lrv-u-font-weight-bold",
		"c_heading_id_attr": "section-heading",
		"c_heading_text": "Mike Fleming Jr",
		"c_heading_url": "",
		"c_heading_link_classes": "",
		"c_heading_outer": false,
		"c_heading_outer_classes": "",
		"c_heading_is_primary_heading": false
	},
	"c_title": {
		"c_title_classes": "lrv-u-margin-b-1 lrv-u-font-family-primary lrv-u-font-weight-normal lrv-u-color-grey-dark lrv-u-font-size-14@mobile-max lrv-u-font-size-18 lrv-u-text-transform-uppercase",
		"c_title_tag_text": "",
		"c_title_id_attr": "title-of-a-story",
		"c_title_text": "Co-Editor-in-Chief, Film",
		"c_title_markup": "",
		"c_title_link_classes": "",
		"c_title_url": false
	},
	"o_social_list": {
		"o_social_list_classes": "lrv-a-unstyle-list lrv-u-flex",
		"o_social_list_labelledby_attr": "",
		"o_social_list_icons": [
			{
				"c_icon_link_classes": " lrv-u-display-block lrv-u-border-radius-50p lrv-u-padding-a-025 lrv-u-color-grey lrv-u-background-color-white lrv-u-color-grey-dark:hover lrv-u-margin-r-1",
				"c_icon_name": "instagram",
				"c_icon_target_attr": "_blank",
				"c_icon_link_screen_reader_text": "Icon Link",
				"c_icon_url": "#",
				"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
				"c_icon_rel_name": "noopener noreferrer",
				"c_icon_screen_reader_tag_text": "",
				"c_icon_screen_reader_text": "Instagram",
				"c_icon_screen_reader_title_attr": "Instagram"
			},
			{
				"c_icon_link_classes": " lrv-u-display-block lrv-u-border-radius-50p lrv-u-padding-a-025 lrv-u-color-grey lrv-u-background-color-white lrv-u-color-grey-dark:hover lrv-u-margin-r-1",
				"c_icon_name": "twitter",
				"c_icon_target_attr": "_blank",
				"c_icon_link_screen_reader_text": "Icon Link",
				"c_icon_url": "#",
				"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
				"c_icon_rel_name": "noopener noreferrer",
				"c_icon_screen_reader_tag_text": "",
				"c_icon_screen_reader_text": "X",
				"c_icon_screen_reader_title_attr": "X"
			},
			{
				"c_icon_link_classes": " lrv-u-display-block lrv-u-border-radius-50p lrv-u-padding-a-025 lrv-u-color-grey lrv-u-background-color-white lrv-u-color-grey-dark:hover lrv-u-margin-r-1",
				"c_icon_name": "facebook",
				"c_icon_target_attr": "_blank",
				"c_icon_link_screen_reader_text": "Icon Link",
				"c_icon_url": "#",
				"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
				"c_icon_rel_name": "noopener noreferrer",
				"c_icon_screen_reader_tag_text": "",
				"c_icon_screen_reader_text": "Facebook",
				"c_icon_screen_reader_title_attr": "Facebook"
			},
			{
				"c_icon_link_classes": " lrv-u-display-block lrv-u-border-radius-50p lrv-u-padding-a-025 lrv-u-color-grey lrv-u-background-color-white lrv-u-color-grey-dark:hover lrv-u-margin-r-1",
				"c_icon_name": "youtube",
				"c_icon_target_attr": "_blank",
				"c_icon_link_screen_reader_text": "Icon Link",
				"c_icon_url": "#",
				"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
				"c_icon_rel_name": "noopener noreferrer",
				"c_icon_screen_reader_tag_text": "",
				"c_icon_screen_reader_text": "YouTube",
				"c_icon_screen_reader_title_attr": "YouTube"
			}
		]
	},
	"c_tagline": {
		"c_tagline_classes": " lrv-u-margin-a-00 lrv-u-padding-t-1 lrv-u-font-size-14 lrv-u-font-weight-light lrv-u-font-size-16 lrv-u-font-size-18@desktop-xl ",
		"c_tagline_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At quis risus sed vulputate odio ut enim blandit. Aliquam sem et tortor consequat id. Convallis aenean et tortor at risus viverra. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Id aliquet lectus proin nibh nisl. Id diam maecenas ultricies mi. Luctus venenatis lectus magna fringilla urna porttitor rhoncus."
	},
	"author_blurb_classes": "lrv-u-margin-b-2 lrv-u-flex lrv-u-flex-wrap-wrap",
	"author_blurb_image_classes": "lrv-u-margin-r-1",
	"author_blurb_details_classes": "",
	"author_blurb_text_classes": ""
}