Back to blue

Author

Author picture
by Author Constantinople Contributing Editor

Note: If this module is used above the fold, remember to remove "lazy-load fadein" classes

To use the author, we need to include the CSS:

<link rel="stylesheet" media="all" href="/static/css/ca_sg_authors.css" /> <div class="ca-authr"> <img class="lazy-load fadein ca-authr__img" data-src="/static/img/author-ca.png" alt="Author picture"> <div class="ca-authr__nm"> <a class="ca-authr__lnk" href="#author-profile">by Author</a> Contributing Editor </div> </div>

This chunk depends on the social-icons one, for more information regarding the social icons list access the chunk page.

Author Bio

Author picture
by Author Contributing Chief Editor

As a member of the ConsumerAffairs Research Team... (long text bio goes here)

Note: If this module is used above the fold, remember to remove "lazy-load fadein" classes

To use the author-bio, we need to include the CSS:

<link rel="stylesheet" media="all" href="/static/css/ca_sg_author.css" /> <div class="ca-authr-bio"> <div class="ca-authr-bio__hdr"> <div class="ca-authr ca-authr-bio__hdr-elem"> <img class="fadein lazy-load ca-authr__img ca-authr__img--lg-dsktp" data-src="/static/img/author-ca.png" alt="Author picture"> <div class="ca-authr__nm"> <a href="#" class="ca-authr-bio__lnk--lg ca-authr__lnk"> by Author </a> Expert job title </div> </div> <div class="ca-authr-bio__social social-icons"> <a href="#" class="social-icons__lnk" target="_blank"> {% include "base/common/icons/rebrand/facebook.html" %} </a> <a href="#" class="social-icons__lnk" target="_blank"> {% include "base/common/icons/rebrand/linkedin.html" %} </a> <a href="#" class="social-icons__lnk" target="_blank"> {% include "base/common/icons/rebrand/twitter.html" %} </a> </div> </div> <p>As a member of the ConsumerAffairs Research Team... (long text bio goes here)</p> </div>

Modifiers:

Add the "--overline" to draw a black top border on the section:

Author picture
by Author Contributing Chief Editor

As a member of the ConsumerAffairs Research Team... (long text bio goes here)

<div class="ca-authr-bio ca-authr-bio--overline"> <div class="ca-authr-bio__hdr"> <div class="ca-authr ca-authr-bio__hdr-elem"> <img class="fadein lazy-load ca-authr__img ca-authr__img--lg-dsktp" data-src="/static/img/author-ca.png" alt="Author picture"> <div class="ca-authr__nm"> <a href="#" class="ca-authr-bio__lnk--lg ca-authr__lnk"> by Author </a> Expert job title </div> </div> <div class="ca-authr-bio__social social-icons"> <a href="#" class="social-icons__lnk" target="_blank"> {% include "base/common/icons/rebrand/facebook.html" %} </a> <a href="#" class="social-icons__lnk" target="_blank"> {% include "base/common/icons/rebrand/linkedin.html" %} </a> <a href="#" class="social-icons__lnk" target="_blank"> {% include "base/common/icons/rebrand/twitter.html" %} </a> </div> </div> <p>As a member of the ConsumerAffairs Research Team... (long text bio goes here)</p> </div>