Back to blue

Typography, links & buttons

Implementation

Make sure to include the CSS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_sg_typography.css') }}" />

Typography

Paragraphs

Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. Wrap <strong> around type to make it bold! You can also use <em> to italicize your words.

<p>Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm.Wrap strong around type to <strong>make it bold!</strong>. You can also use em to <em>italicize your words</em>.</p>

Paracloud

The paraclouds are big paragraphs used as a subordinate to the headline; also known as a deck or bank in newspaper jargon. You can also highlight important parts of the text using a <strong> tag. The paracloud could also have some links inside it.

<p class="ca-pc">Paracloud text <strong>highlighted part</strong> and <a href="#">links</a></p>

Headings

This is a Large h1 heading

95px Desktop - 61px Mobile/Tablet

<h1 class="ca-h1--lg">This is a h1 heading</h1> <div class="ca-h1 ca-h1--lg">This is a Large h1 heading</div>

This is a Large h2 heading

76px Desktop - 49px Mobile/Tablet

<h2 class="ca-h2--lg">This is a h2 heading</h1> <div class="ca-h2 ca-h2--lg">This is a Large h2 heading</div>

This is a h1 heading

48px Desktop - 39px Mobile/Tablet

<h1>This is a h1 heading</h1> <div class="ca-h1">This is a h1 heading</div>

This is a h2 heading

35px Desktop/Mobile/Tablet

<h2>This is a h2 heading</h2> <div class="ca-h2">This is a h2 heading</div>

This is a large h3 heading

25px Desktop/Mobile/Tablet

<h3 class="ca-h3--lg">This is a large h3 heading</h3> <div class="ca-h3 ca-h3--lg">This is a h3 heading</div>

This is a h3 heading

22px Desktop/Mobile/Tablet

<h3>This is a h3 heading</h3> <div class="ca-h3">This is a h3 heading</div>

This is a h4 heading

20px Desktop/Mobile/Tablet

<h4>This is a h4 heading</h4> <div class="ca-h4">This is a h4 heading</div>

Headings modifier styles

Underline heading

This is an underline heading

<h1 class="ca-h1--lg ca-h--undrline">This is an underline heading</h1> <div class="ca-h1 ca-h1--lg ca-h--undrline">This is an underline heading</div>

This is an underline heading

<h4 class="ca-h--undrline">This is an underline heading</h4> <div class="ca-h4 ca-h--undrline">This is an underline heading</div>

Overline heading

This is an overline heading

<h1 class="ca-h1--lg ca-h--overline">This is an overline heading</h1> <div class="ca-h1 ca-h1--lg ca-h--overline">This is an overline heading</div>

If you only want to apply overline on tablet and mobile only you can use ca-h--overline-sm

This is mobile only overline heading

<h4 class="ca-h--overline-sm">This is mobile only overline heading</h4>

This is an overline heading

<h4 class="ca-h--overline">This is an overline heading</h4> <div class="ca-h4 ca-h--overline">This is an overline heading</div>

Headings with icon

This is a heading with an icon

<h1 class="ca-h--icon">This is a heading with an icon</h1> <div class="ca-h1 ca-h--icon">This is a heading with an icon</div>

This is a heading with an icon

<h4 class="ca-h--icon">This is a heading with an icon</h4> <div class="ca-h4 ca-h--icon">This is a heading with an icon</div>

Body text

Default body text size - 16px

<p>Default body text size</p> <div class="ca-txt-bd-3">Default body text size</div>

The biggest body text size - 20px

<p class="ca-txt-bd-1">The biggest body text size</p> <div class="ca-txt-bd-1">The biggest body text size</div>

Medium body text size - 18px

<p class="ca-txt-bd2">Medium body text size</p> <div class="ca-txt-bd2">Medium body text size</div> Small text size - 14px <small>Small text size</small>

Caption text - 14px

<caption>Caption text</caption>
Figcaption text - 16px
<figcaption>Figcaption text here</figcaption>

Time

<time class="ca-time" datetime="2018-02-27" itemProp="datePublished"> {% include "base/common/icons/rebrand/clock.html" %} Updated on 02/27/2018 </time>

Lists

Unordered list

  • First point
  • Second point with more text. t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using.
    • Sub point with some info. with more text. T is a long established fact that a reader will be distracted by the readable content of a page when looking.
    • Another sub point Reader will be distracted by the readable content of a page when looking.
      • Sub point with some info. with more text. T is a long established fact that a reader will be distracted by the readable content of a page when looking.
      • Another sub point Reader will be distracted by the readable content of a page when looking.
    • Another sub point Reader will be distracted by the readable content of a page when looking.
<ul class="ca-list"> <li><strong>First point</strong></li> <li><strong>Second point</strong> with more text. t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using.</li> <ul> <li><strong>Sub point</strong> with some info. with more text. T is a long established fact that a reader will be distracted by the readable content of a page when looking.</li> <li><strong>Another sub point</strong> Reader will be distracted by the readable content of a page when looking.</li> <ul> <li><strong>Sub point</strong> with some info. with more text. T is a long established fact that a reader will be distracted by the readable content of a page when looking.</li> <li><strong>Another sub point</strong> Reader will be distracted by the readable content of a page when looking.</li> </ul> <li><strong>Another sub point</strong> Reader will be distracted by the readable content of a page when looking.</li> </ul> </ul>

Definition list

A description list is a list of terms, with a description of each term. In the term (dt tag) you can use any of the font-sizes classes, in order to make it bigger. If you want to have numbers instead of bullets, you can add the .ca-ol class to the <ul> tag.

ADT
Most popular provider
Frontpoint
Best consumer service
Vivint
Best for Home Automation
<dl class="ca-list"> <dt>ADT</dt> <dd>Most popular provider</dd> <dt>Frontpoint</dt> <dd>Best consumer service</dd> <dt>Vivint</dt> <dd>Best for Home Automation</dd> </dl>

Ordered list

  1. First point
  2. Second point with more text. t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using.
  3. Third point The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using.
<ol class="ca-list"> <li><strong>First point</strong></li> <li><strong>Second point</strong> with more text. t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using.</li> <li><strong>Third point</strong> The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using.</li> </ol>

No style list

<ul class="ca-list ca-list--clr"> <li><a href="#" class="ca-a">Los angeles</a></li> <li><a href="#" class="ca-a">Dallas</a></li> <li><a href="#" class="ca-a">Indianapolis</a></li> </ul>

Multi-column list

We can create multiple column lists. If the bullets are single words, you can use the ca-list--cols-sm class. This will make a 3 column list on desktop, and 2 columns in mobile

<ul class="ca-list ca-list--cols-sm"> <li><a href="#" class="ca-a">Los angeles</a></li> <li><a href="#" class="ca-a">Dallas</a></li> <li><a href="#" class="ca-a">Indianapolis</a></li> </ul>

In the other hand, if the bullets contains longer texts, then it's better to use the ca-list--cols class. This will make a 3 column list on desktop and 1 column in mobile.

  • ADT
    Most popular provider
  • Frontpoint
    Best consumer service
  • Vivint
    Best for Home Automation

This can be applied to unordered list (ul) or ordered list (ol) as well:

  1. ADT
    Most popular provider
  2. Frontpoint
    Best consumer service
  3. Vivint
    Best for Home Automation
<ul class="ca-list ca-list--cols"> <li><strong class="ca-txt-bd-1">ADT</strong><br />Most popular provider</li <li><strong class="ca-txt-bd-1">Frontpoint</strong><br />Best consumer service</li> <li><strong class="ca-txt-bd-1">Vivint</strong><br />Best for Home Automation</li> </ul>

Two columns

If you want a 2 column list, you have to use the ca-list--cols-2 class instead.

  • Burglary odds
    • Nashville - 1:16209
    • Denver 1:8429
  • Burglary odds
    • Nashville - 1:16209
    • Denver 1:8429
  1. Burglary odds
    • Nashville - 1:16209
    • Denver 1:8429
  2. Burglary odds
    • Nashville - 1:16209
    • Denver 1:8429
<ul class="ca-list ca-list--cols-2"> <li><strong class="ca-txt-bd-1">Burglary odds</strong><br /> <ul> <li>Nashville - 1:16209</li> <li>Denver 1:8429</li> </ul> </li> <li><strong class="ca-txt-bd-1">Burglary odds</strong><br /> <ul> <li>Nashville - 1:16209</li> <li>Denver 1:8429</li> </ul> </li> </ul>

Top News List

  1. Scammers heat up over cold weather by threatening to turn off consumers’ utilities
  2. Kroger warns consumers about a free grocery holiday scam
  3. U.S. Senate passes TRACED Act to crack down on illegal robocalls
  4. Kroger warns consumers about a free grocery holiday scam
  5. U.S. Senate passes TRACED Act to crack down on illegal robocalls
<ol class="ol-list ol-list--clr ol-list--tp-nws"> <li><a href="#" class="ca-a">Scammers heat up over cold weather by threatening to turn off consumers’ utilities</a></li> <li><a href="#" class="ca-a">Kroger warns consumers about a free grocery holiday scam</a></li> <li><a href="#" class="ca-a">U.S. Senate passes TRACED Act to crack down on illegal robocalls</a></li> <li><a href="#" class="ca-a">Kroger warns consumers about a free grocery holiday scam</a></li> <li><a href="#" class="ca-a">U.S. Senate passes TRACED Act to crack down on illegal robocalls</a></li> </ol>

Line break


<hr class="hr" />

Identation

This is a regular paragraph.

This paragraph has been indenteded using the idnt class.

If you want additional identation, you can place the paragraph with the idnt class inside a div with the same class.

<p class="idnt">This paragraph has been indenteded using the <strong>idnt</strong> class.</p> <div class="idnt"> <p class="idnt">If you want additional identation, you can place the paragraph with the <strong>idnt</strong> class inside a div with the same class.</p> </div>

Font Sizes

We have a series of variables that define font sizes in rem. Usage and equivalents in pixels as follows:

Variable nameSize in remSize in pxLine HeightMargin-Bottom
$font-size-heading-1-lg5.96rem95px11rem
$font-size-heading-2-lg4.768rem76px11rem
$font-size-heading-13.851rem61px1.1251rem
$font-size-heading-23.052rem49px1.1251rem
$font-size-heading-32.441rem39px1.1251rem
$font-size-heading-42.197rem35px1.1251rem
$font-size-heading-51.953rem31px1.1251rem
$font-size-heading-61.563rem25px1.1251rem
$font-size-body-xl1.4rem22px1.5-
$font-size-body-lg1.25rem20px1.5-
$font-size-body-md1.125rem18px1.5-
$font-size-body1rem16px1.5-
$font-size-body-sm.9rem14px1.5-


Colors

This is the global reusable color palette. Inside each color you may find the scss variable and the HEX code.

Non-saturated colors

$white
#fff
$alto-gray
#eee
$gray
#bbbcbc
$accessible-gray
#939595
$graphite-gray
#5d5d5d
$dark-gray
#2e2f2f
$black
#000
$blue
#316EEF
$dark-blue
#1f58d2
$green
#007945
$yellow
#ffba00
$dark-yellow
#e6a700
$red
#d83e00
$dark-red
#a92a00

Colors mixins

Some colors were added for diverse reasons (accesibility or design need). Some of the new colors can be generated through SASS color functions. These are examples currently used in the site. Try to use this approach only as an exception when the color in the design can't be replaced with one of the colors of the styleguide.

mix($red, $white, 13%);
#f2e3e2
darken($green, 4%);
#006539

Color classes

A few examples:

.ca-txt--clr-blue
.ca-txt--clr-white
ca-txt--clr-white


Buttons

<button class="ca-btn">Primary button</button> <button class="ca-btn ca-btn--snd">Secondary button</button> <button class="ca-btn ca-btn--thrd">Tertiary button</button> <button class="ca-btn ca-btn--alert">Alert button</button>
<button class="ca-btn ca-btn--white">White button</button>
<button class="ca-btn ca-btn--wh-lght">White button</button> <button class="ca-btn ca-btn--disable">Disabled button</button> <button class="ca-btn ca-btn--black">Black button</button> <button class="ca-btn ca-btn--wic">Button with icon</button> <button class="ca-btn ca-btn--black ca-btn--wic">Black button with icon</button>
<button class="ca-btn ca-btn--link">Link button</button>

size modifiers

You can create a smaller version of the button if you add the ca-btn--sm class to your button.

<button class="ca-btn ca-btn--sm">Small button</button>

Pill buttons

You can add the ca-btn--pill modifier to a button. You can also use the size modifier to make it smaller.

For the active state, you have to add the ca-btn--pill-active modifier to the button.

<button class="ca-btn ca-btn--pill ca-btn--sm">Pill button</button> <button class="ca-btn ca-btn--pill ca-btn--pill-active ca-btn--sm">Active pill button</button>

Round buttons

You can create rounded buttons by adding the ca-btn--rnd class to the button. Any of the regular modifiers can be used for changing the color or the size of the button.

The button size is based on font-size, so if you need any other button size, you just need to change the font-size in your particular implementation.

Specifically for the play button, you have to add an additional class ca-btn--play in order to visually align the icon.

           
// Regular round button (plus icon) <button class="ca-btn ca-btn--rnd">{% include "base/common/icons/plus.html" %}</button> // Regular round button (close icon) <button class="ca-btn ca-btn--rnd">{% include "base/common/icons/close.html" %}</button> // Regular round button (expand icon) <button class="ca-btn ca-btn--rnd">{% include "base/common/icons/full-screen-icon.html" %}</button> // Play white round button <button class="ca-btn ca-btn--rnd ca-btn--play">{% include "base/common/icons/play-icon.html" %}</button>

Links

Default a link <a class="ca-a">Default a link</a> Large Link <a class="ca-a ca-a--lg">Large Link</a> Large Link with an arrow icon <a class="ca-a ca-a--lg ca-a--arw">Large Link <svg/></a> CTA link

CTA Link
with 2 lines
<a class="ca-a ca-a--lg ca-a--big-icon">CTA link <svg/></a> Link with left icon <a class="ca-a ca-a--lg ca-a--big-icon ca-a--left-ic">CTA link <svg/></a> Small Link <a class="ca-a ca-a--sm">Small Link</a> No Underline Link <a class="ca-a ca-a--no-undln">No Underline Link</a> Bold No Underline Whatsoever Link <a class="ca-a ca-a--bld-no-undln">Bold No Underline Link</a> No Underline Whatsoever Link <a class="ca-a ca-a--no-undln-hv">No Underline Link on Hover</a> Tertiary Color link <a class="ca-a ca-a--bld-no-undln ca-a--thrd">Tertiary Color link</a>
Paracloud Link 1, Paracloud Link 2, Paracloud Link 3, Paracloud Link 4, Paracloud Link Last Paracloud cta link
<a href="#" class="ca-a ca-a--pc ca-a--pc-black">Paracloud Cta Link <svg></svg> </a> <a href="javascript:void(0)" class="ca-a ca-a--pc"> Paracloud Link 1, </a> <a href="javascript:void(0)" class="ca-a ca-a--pc ca-a--pc-black"> Paracloud cta Last {% include "base/common/icons/rebrand/arrow-right.html" %} </a>

Read more button

This element can be used alongside with the expander collapser and it shows a little down arrow next to the text that changes to an up arrow when the button is set to collapse the content

This is the hidden text

<button class="ca-btn--link ca-a ca-a--bld-no-undln exp-btn" data-expand-collapse='{"expandText":"Read more", "collapseText": "Read less", "target": ["#article-1-full-desc"]}'>Read more toggle button</button>

Light Links

<a class="ca-a ca-a--lght">Default a link</a> <a class="ca-a ca-a--lg ca-a--lght">Large Link</a> <a class="ca-a ca-a--lg ca-a--arw ca-a--lght">Large Link <svg/></a> <a class="ca-a ca-a--lg ca-a--big-icon ca-a--lght">CTA link <svg/></a> <a class="ca-a ca-a--sm ca-a--lght">Small Link</a> <a class="ca-a ca-a--no-undln ca-a--lght">No Underline Link</a> <a class="ca-a ca-a--bld-no-undln ca-a--lght">Bold No Underline Link</a> <a class="ca-a ca-a--no-undln-hv ca-a--lght">No Underline Link on Hover</a>