larva modules: profile-block

Available Variants

horizontal prototype
Lazy loaded image

Debra and Leon Black

Title Here

Massa tincidunt dui ut ornare lectus sit. Dolor purus non enim praesent elementum facilisis leo. Aliquet eget sit amet tellus cras adipiscing enim eu.

View Profile Sign Up
profile-block README

PMC Profile Block

Larva pattern used for Gutenberg profile block.

profile-block Twig The markup file.
<div class="profile-block // {{ profile_block_classes }} ">

	<div class="profile-block-image // {{ profile_block_image_classes }}">
		{% if c_lazy_image %}
			{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
		{% endif %}
	</div>

	<div class="profile-block-details // {{ profile_block_detail_classes }}">
		{% if c_title %}
			{% include "@larva/components/c-title/c-title.twig" with c_title %}
		{% endif %}

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

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

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

		{% if o_social_list %}
			{% include "@larva/objects/o-social-list/o-social-list.twig" with o_social_list %}
		{% endif %}

		{% if c_button %}
			<div class="{{ profile_block_c_button_classes }}">
				{% include "@larva/components/c-button/c-button.twig" with c_button %}
			</div>
		{% endif %}
	</div>
</div>
profile-block JSON The data object for this pattern.
{
	"profile_block_classes": "lrv-u-max-width-80p lrv-u-margin-lr-auto",
	"profile_block_image_classes": "",
	"profile_block_detail_classes": "lrv-u-text-align-center",
	"profile_block_c_button_classes": "",
	"c_button": {
		"c_button_classes": "lrv-a-unstyle-button lrv-u-cursor-pointer lrv-u-display-inline-block lrv-u-text-transform-uppercase lrv-u-font-size-14 lrv-u-background-color-black lrv-u-padding-lr-2 lrv-u-padding-tb-050 lrv-u-color-white lrv-u-color-grey-light:hover",
		"c_button_ga_tracking": {},
		"c_button_inner_classes": "lrv-u-padding-lr-1@tablet",
		"c_button_rel_attr": "",
		"c_button_screen_reader_text": "Sign Up",
		"c_button_target_attr": "",
		"c_button_text": "View Profile",
		"c_button_type_attr": "submit",
		"c_button_url": "#"
	},
	"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": "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 lrv-u-border-radius-50p",
		"c_lazy_image_height_attr": "",
		"c_lazy_image_width_attr": "",
		"c_lazy_image_in_initial_viewport": false,
		"c_lazy_image_decoding_attr": "async"
	},
	"c_title": {
		"c_title_classes": "lrv-a-font-primary-l lrv-u-margin-b-1 lrv-u-margin-t-150",
		"c_title_tag_text": "",
		"c_title_id_attr": "title-of-a-story",
		"c_title_text": "Debra and Leon Black",
		"c_title_markup": "",
		"c_title_link_classes": "",
		"c_title_url": false
	},
	"c_tagline": {
		"c_tagline_classes": "lrv-a-font-secondary-s lrv-u-margin-b-150 lrv-u-text-transform-uppercase",
		"c_tagline_text": "Title Here"
	},
	"c_dek": {
		"c_dek_classes": "lrv-u-margin-t-00 lrv-u-margin-b-150",
		"c_dek_markup": "",
		"c_dek_text": "Massa tincidunt dui ut ornare lectus sit. Dolor purus non enim praesent elementum facilisis leo. Aliquet eget sit amet tellus cras adipiscing enim eu. "
	}
}