Go to rebrand

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_styleguide_typography_v2.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>

Headings

This is a h1 heading

32px Desktop - 26px Mobile/Tablet

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

This is a h2 heading

26px Desktop - 22px Mobile/Tablet

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

This is a h3 heading

22px Desktop - 20px 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 - 18px Mobile/Tablet

<h4>This is a h4 heading</h4> <div class="ca-h4">This is a h4 heading</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 - 18px

<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 - 16px

<p class="ca-txt-bd-2">Medium body text size</p> <div class="ca-txt-bd-2">Medium body text size</div> Small text size - 16px <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/resolution-in-progress.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 class="ca-txt-bd-1">ADT</dt> <dd>Most popular provider</dd> <dt class="ca-txt-bd-1">Frontpoint</dt> <dd>Best consumer service</dd> <dt class="ca-txt-bd-1">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>

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>

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 px
$font-size-0 2.5rem40px
$font-size-1 2rem32px
$font-size-2 1.625rem26px
$font-size-3 1.5rem24px
$font-size-4 1.375rem22px
$font-size-4-sm 1.25rem20px
$font-size-5 1.125rem18px
$font-size-6 1rem16px
$font-size-7 .9375rem15px
$font-size-8 .875rem14px
$font-size-9 .8125rem13px
$font-size-10.75rem12px
$font-size-11.625rem10px
$font-size-12.5rem8px


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
$light-gray
#ebebeb
$fog-gray
#cacaca
$silver-gray
#a6a6a6
$gray
#777678
$graphite-gray
#3e3d3f
$dark-gray
#0d0d0d
$alto-gray
#d8d8d8
$black
#000

Saturated colors

$light-blue
#eaf6fa
$blue
#0077c0
$dark-blue
#005487
$blue-regal
#005175
$orange
#f56400
$dark-orange
#a63600
$pale-green
#43aa67
$green
#0e9c3f
$pale-red
#d75c5c
$red
#aa1d1d
$dark-red
#da3535
$light-yellow
#fcf5dd
$pale-yellow
#e8d953
$yellow
#facb04

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%);
#0c8937

Color classes

A few examples:

.ca-txt--clr-orange
.ca-txt--clr-blue
.ca-txt--clr-red
.ca-txt--clr-green
.ca-txt--clr-gray
ca-txt--clr-white


Links

Default a link <a class="ca-a">Default a link</a> Large Link <a class="ca-a-lg">Large Link</a> Large Link with an arrow icon <a class="ca-a-lg ca-a--arw">Large Link</a> Primary link <a class="ca-a-prm">Primary link</a> Medium link <a class="ca-a-md">Medium link</a> Medium black uppercase link <a class="ca-a-md ca-a-uprcs ca-a-blk">Medium black uppercase link</a> Medium Orange Uppercase link <a class="ca-a-md ca-a-uprcs ca-a-orng">Medium Orange Uppercase link</a> Small Link <a class="ca-a-sm">Small Link</a> Small black uppercase link <a class="ca-a-sm ca-a-blk ca-a-uprcs">Small black uppercase link</a> Extra small black link <a class="ca-a-xs ca-a-blk">Extra small black link</a>

Buttons

<button class="ca-btn">Blue button</button> <button class="ca-btn ca-btn--orange">Orange button</button> <button class="ca-btn ca-btn--green">Green button</button> <button class="ca-btn ca-btn--strong-red">Dark red button</button> <button class="ca-btn ca-btn--disable">Disabled button</button>
<button class="ca-btn ca-btn--white">White button</button> <button class="ca-btn ca-btn--hollow">Hollow button</button>
<button class="ca-btn ca-btn--link">Link button</button>

Button sizes

You can use the ca-btn--sm / --md / --lg modifiers class for different buttons sizes







//Blue small button <button class="ca-btn ca-btn--sm">Blue small button</button> //Orange small button <button class="ca-btn ca-btn--disable ca-btn--lg">Disabled large button</button> //Disabled small button <button class="ca-btn ca-btn--orange ca-btn--md">Orange medium button</button> //White small button <button class="ca-btn ca-btn--white ca-btn--sm">White small button</button>

Small padding

In some situations, we need to fit buttons on small containers. In those cases, you can use the ca-btn--sm-pad class to reduce the left and right padding







//Blue small button <button class="ca-btn ca-btn--sm ca-btn--sm-pad">Blue small button</button> //Orange small button <button class="ca-btn ca-btn--green ca-btn--lg ca-btn--sm-pad">Green large button</button> //Disabled small button <button class="ca-btn ca-btn--orange ca-btn--md ca-btn--sm-pad">Orange medium button</button> //White small button <button class="ca-btn ca-btn--white ca-btn--sm ca-btn--sm-pad">White small 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 <button class="ca-btn ca-btn--rnd ca-btn--sm-pad">{% include "base/common/icons/plus.html" %}</button> // Small round button <button class="ca-btn ca-btn--rnd ca-btn--sm-pad ca-btn--sm">{% include "base/common/icons/close.html" %}</button> // White round button <button class="ca-btn ca-btn--white ca-btn--rnd ca-btn--sm-pad">{% include "base/common/icons/full-screen-icon.html" %}</button> // Play white round button <button class="ca-btn ca-btn--white ca-btn--rnd ca-btn--play ca-btn--sm-pad">{% include "base/common/icons/play-icon.html" %}</button>

Reusable mixins

Button mixin usage:

To define a new button style, we can use both mixins ca-btn-styles for the general button styles and ca-btn-colors for the background and text colors.

Example:

.ca-btn-pale-red { @include ca-btn-styles(); @include ca-btn-colors($pale-red, $light-gray); }

Visibility (moved to ca_styleguide_utils)

Global classes .ca-hide and .ca-show hide and show an element in every viewport.

Show only by screen size

These classes make elements visible only on certain screen sizes.

You are definitely on a mobile device You are definitely on a tablet You are definitely on a laptop or desktop

Visible only in mobile devices

<p class="ca-show-only-mobile">Visible only on on a mobile device</p>

Visible only in tablets

<p class="ca-show-only-tablet">Visible only on on a tablet</p>

Visible only in laptop or desktop

<p class="ca-show-only-desktop">Visible only on a laptop or desktop</p>

Hide only by Screen Size

These classes hide elements only on certain screen sizes.

You are definitely not on a mobile device

You are definitely not on a tablet

You are definitely not on a laptop or desktop

Hidden only in mobile devices

<p class="ca-hide-only-mobile">Hidden only on a mobile device</p>

Hidden only in tablets

<p class="ca-hide-only-tablet">Hidden only on a tablet</p>

Hidden only in laptop or desktop

<p class="ca-hide-only-desktop">Hidden only a laptop or desktop</p>