Back to blue

Social icons

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

<link rel="stylesheet" media="all" href="/static/css/ca_sg_social_icons.css" /> <div class="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> <a href="#" class="social-icons__lnk" target="_blank"> {% include "base/common/icons/rebrand/pinterest.html" %} </a> <a href="#" class="social-icons__lnk" target="_blank"> {% include "base/common/icons/rebrand/youtube.html" %} </a> </div>

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" target="_blank"> {% include "base/common/icons/rebrand/facebook.html" %} </a> <a href="#" class="social-icons__lnk social-icons__lnk--sm" target="_blank"> {% include "base/common/icons/rebrand/linkedin.html" %} </a> <a href="#" class="social-icons__lnk social-icons__lnk--sm" target="_blank"> {% include "base/common/icons/rebrand/twitter.html" %} </a> <a href="#" class="social-icons__lnk social-icons__lnk--sm" target="_blank"> {% include "base/common/icons/rebrand/pinterest.html" %} </a> <a href="#" class="social-icons__lnk social-icons__lnk--sm" target="_blank"> {% include "base/common/icons/rebrand/youtube.html" %} </a> </div>