project modules: author-blurb
Available Variants
prototypeauthor-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.
{
"author_blurb_classes": "a-author-blurb-grid lrv-u-padding-b-2@desktop lrv-a-wrapper",
"c_lazy_image": {
"c_lazy_image_classes": " u-width-100@mobile-max u-width-200 u-width-300@desktop-xl lrv-u-border-radius-50p lrv-u-overflow-hidden",
"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": "https://placehold.it/200x200",
"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": "a-font-primary-bold-xl c-heading u-font-size-24@mobile-max lrv-u-margin-t-1 lrv-u-line-height-large",
"c_heading_id_attr": "section-heading",
"c_heading_text": "Scott Soshnick",
"c_heading_url": "",
"c_heading_link_classes": "",
"c_heading_outer": false,
"c_heading_outer_classes": "",
"c_heading_is_primary_heading": true
},
"c_title": {
"c_title_classes": "a-font-primary-medium-l lrv-u-color-grey-dark u-font-style-italic",
"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_nav": {
"modifier_class": "",
"o_nav_classes": "",
"o_nav_title_text": "",
"o_nav_title_id_attr": "",
"o_nav_title_classes": "",
"o_nav_aria_labelledby_attr": "",
"o_nav_screen_reader_id_attr": "optional-screen-reader",
"o_nav_screen_reader_text": "optional screen reader",
"o_nav_list_classes": "lrv-a-unstyle-list lrv-u-flex lrv-a-space-children-horizontal lrv-a-space-children--1 lrv-u-align-items-center lrv-u-font-family-primary lrv-u-text-transform-uppercase lrv-u-font-size-10 u-font-size-0@mobile-max lrv-u-font-weight-bold lrv-u-margin-t-1 lrv-u-flex-wrap-wrap",
"o_nav_list_item_classes": "",
"o_nav_list_items": [
{
"modifier_class": "",
"c_link_classes": "lrv-a-unstyle-link lrv-u-color-grey-dark:hover lrv-a-hover-effect lrv-u-whitespace-nowrap lrv-a-icon-before lrv-a-icon-before a-icon-twitter",
"c_link_text": "twitter",
"c_link_url": "#",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-a-unstyle-link lrv-u-color-grey-dark:hover lrv-a-hover-effect lrv-u-whitespace-nowrap lrv-a-icon-before lrv-a-icon-before a-icon-facebook",
"c_link_text": "facebook",
"c_link_url": "#",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-a-unstyle-link lrv-u-color-grey-dark:hover lrv-a-hover-effect lrv-u-whitespace-nowrap lrv-a-icon-before lrv-a-icon-before a-icon-instagram",
"c_link_text": "instagram",
"c_link_url": "#",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
},
{
"modifier_class": "",
"c_link_classes": "lrv-a-unstyle-link lrv-u-color-grey-dark:hover lrv-a-hover-effect lrv-u-whitespace-nowrap lrv-a-icon-before lrv-a-icon-before lrv-a-icon-envelope",
"c_link_text": "email",
"c_link_url": "#",
"c_link_rel_attr": false,
"c_link_aria_label_attr": false,
"c_link_target_attr": false
}
],
"o_nav_list_labelledby_attr": ""
},
"c_tagline": {
"c_tagline_classes": " a-font-primary-regular-m lrv-u-margin-a-00 lrv-u-padding-t-1",
"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."
}
}