Go to rebrand

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_styleguide_authors.css" /> <div class="ca-authr"> <img class="lazy-load fadein ca-authr__img" data-src="images/author.png" alt="Author picture"> <div class="ca-authr__nm"> <a class="ca-a-blk" href="#author-profile">by Author</a> Contributing Editor </div> </div>

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_styleguide_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="https://media.consumeraffairs.com/files/cache/staff-photos/CA-shield_head_shot_small.png" alt="Author picture"> <div class="ca-authr__nm"> <a href="#" class="ca-authr-bio__lnk--lg ca-a-blk"> by Author </a> Expert job title </div> </div> <div class="ca-authr-bio__social social-icons"> <a href="#" class="social-icons__lnk facebook-icon" target="_blank"> {% include "base/common/icons/facebook-f.html" %} </a> <a href="#" class="social-icons__lnk linkedin-icon" target="_blank"> {% include "base/common/icons/linkedin.html" %} </a> <a href="#" class="social-icons__lnk twitter-icon" target="_blank"> {% include "base/common/icons/twitter.html" %} </a> </div> </div> <p>As a member of the ConsumerAffairs Research Team... (long text bio goes here)</p> </div>

Social icons

Modifiers:

Add the "social-icons__lnk--sm" class for smaller icons:

<div class="social-icons"> <a href="#" class="social-icons__lnk social-icons__lnk--sm facebook-icon" target="_blank"> {% include "base/common/icons/facebook-f.html" %} </a> </div>

To use the social-icons, (if the page doesn't have the author module) we need to include the CSS:

import "node_modules/@consumeraffairs/ca-styleguide/src/ca_styleguide_author/scss/social-icons" <div class="social-icons"> <a href="#" class="social-icons__lnk facebook-icon" target="_blank"> {% include "base/common/icons/facebook-f.html" %} </a> <a href="#" class="social-icons__lnk linkedin-icon" target="_blank"> {% include "base/common/icons/linkedin.html" %} </a> <a href="#" class="social-icons__lnk twitter-icon" target="_blank"> {% include "base/common/icons/twitter.html" %} </a> <a href="#" class="social-icons__lnk pinterest-icon" target="_blank"> {% include "base/common/icons/pinterest-icon.html" %} </a> <a href="#" class="social-icons__lnk youtube-icon" target="_blank"> {% include "base/common/icons/youtube.html" %} </a> </div>