Styleguide

Color Palette

Color
SASS Variable
$white
$off-white
$gray
$lighter-gray
$light-gray
$slate-gray
$dark-gray-38
$dark-gray
$black
Color
SASS Variable
$deep-sea-blue
$cerulean
$azure
$lapis-blue
$light-blue
$pale-blue
$ice-blue
$red

Buttons

Using A elements is better for hyperlinks, since browsers will work in predictable ways. Use buttons for form elements.


Available Buttons:


.btn .azure


Azure A-link a.btn .azure


.btn .transparent


.btn .transparent-light


                   <button class="btn azure">Azure</button>
                   <a href="#" class="btn azure">Azure</a>

Icons Set

Generally, we've found that svg icons do not work well when referencing them, so it's better to inline the svg when possible.

burger
caret-down
caret-right
check
close
document-add
edit
facebook
flag-outline
flag-solid
instagram
link
mail
twitter
<svg><use xlink:href="#facebook"/></svg>
BETTER:
<a href="https://www.facebook.com/moveon">{% include "icon-facebook.html" %}</a>

Typography: Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading with Anchor 

<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5>

<h3>Heading with Anchor
  <a href="#foooooo" class="anchor-link">
    <span id="foooooo" class="anchor-id"></span>
    <svg width="14px" height="14px"><use xlink:href="#link"/></svg>
  </a>
</h3>

Typography: Body

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus tenetur pariatur, nam natus est rerum sint minus maiores voluptas, facilis optio fugit delectus eligendi officiis dolorum ratione, quo numquam deserunt!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil placeat repudiandae minima non tempore odio cumque sit magnam temporibus nam quasi dolores deserunt est, aliquid nesciunt, eius, beatae debitis dolore!

<p>Lorem ipsum dolor sit <em>amet</em>, <a href="#">consectetur</a> <strong>adipisicing elit</strong>. <small>Repellendus tenetur pariatur, nam natus est rerum sint minus maiores voluptas, facilis optio fugit delectus eligendi officiis dolorum ratione, quo numquam deserunt!</small></p><p><large>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil placeat repudiandae minima non tempore odio cumque sit magnam temporibus nam quasi dolores deserunt est, aliquid nesciunt, eius, beatae debitis dolore!</large></p>

Typography: List

  • 2018 Elections
  • Tax Reform
  • Immigration
  • Healthcare
<ul>
    <li>2018 Elections</li>
    <li>Tax Reform</li>
    <li>Immigration</li>
    <li>Healthcare</li>
</ul>

Typography: Striped List

  • 2018 Elections
  • Tax Reform
  • Immigration
  • Healthcare
<ul class="list-striped">
  <li class="p-2">2018 Elections</li>
  <li class="p-2">Tax Reform</li>
  <li class="p-2">Immigration</li>
  <li class="p-2">Healthcare</li>
</ul>

Typography: Blockquote

The width of this component should be defined within its parent styles.

“When a community starts to listen to each other, pull together, and work towards a common goal, the anything is possible.”

— Chuck, MoveOn Mobilizer 
<blockquote>
    <p>
      “When a community starts to listen to each other, pull together, and work towards a common goal, the anything is possible.”
    </p>
    <cite>— <strong>Chuck</strong>, MoveOn Mobilizer</cite>
</blockquote>

Typography: CTA Links

There is no global classname or mixin for these hover states, as the background will be defined in the parent component.
On a dark background use white all-caps links that transition to blue on hover, and on a medium to light background use black all-caps links that transition to white on hover.
Links that has dropdown should have animated caret icon.
Learn More About Us
Join the Movement
Learn More About Us
Join the Movement
DROPDOWN
  • Some Item
  • Some Item
  • Some Item
<a href="#" class="mo-btn home-illustration__cta">
    Learn More About Us
    <svg><use xlink:href="#caret-right"/></svg>
</a>

Typography: Animated Underline

This only applies the animated underline to the text. The overall styles, such as font size and colors should be defined within the parent component.

SignaPetition

SupportaCampaign

AttendanEvent

<div>
    <p class="animated-underline"><span>Sign</span><span>a</span><span>Petition</span></p>
    <p class="animated-underline"><span>Support</span><span>a</span><span>Campaign</span></p>
    <p class="animated-underline"><span>Attend</span><span>an</span><span>Event</span></p>
</div>

Round Image

This only applies the roundedness of the image. The width and height should be defined within its parent component. 
<div class="round-image">
    <img src="../images/testimonial-image.jpg" alt="">
</div>

Media

Posted by MoveOn
19,852 Views 
<div class="media">
  <img src="images/petition-card-media.jpg" alt="">
  <button class="mo-btn media__play"></button>
  <div class="media__meta">
    Posted by MoveOn <br>
    19,852 Views
  </div>
</div>

CARDS

Heading inside a card! just use h3 etc

This is a generic version of the blue card that holds petition content on the petition sign page.

Set the width of the card using a bootstrap column class in the wrapper div, like col-md-4

Hodor. Hodor HODOR hodor, hodor hodor hodor hodor! Hodor. Hodor hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor HODOR hodor, hodor hodor? Hodor. Hodor hodor - hodor, hodor. Hodor hodor. Hodor. Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor - hodor - hodor hodor! Hodor, hodor. Hodor. Hodor, hodor... Hodor hodor hodor - hodor?!

Hodor hodor - hodor; hodor hodor - hodor; hodor hodor?! Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor hodor. Hodor. Hodor hodor - hodor; hodor hodor, hodor. Hodor hodor. Hodor. Hodor, hodor. Hodor. Hodor, hodor - hodor hodor hodor, hodor. Hodor hodor?

Hodor! Hodor hodor, HODOR hodor, hodor hodor, hodor, hodor hodor. Hodor hodor; hodor hodor... Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor - hodor, hodor, hodor hodor. 

            <div class="row">
                <div class="card-wrapper col-md-7">
                    <div class="card bg-ice-blue">
                        <div class="card__content">
                            <h2>Heading inside a card! just use h3 etc</h2>
                            <p>This is a generic version of the blue card that holds petition content on the <a href="/petition.html">petition sign page.</a></p>
                            <p>Set the width of the card using a bootstrap column class in the wrapper div, like col-md-4</p>
                            <div class="card__media">
                                <img src="../images/petition-card-media.jpg" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <p>Hodor. Hodor HODOR hodor, hodor hodor hodor hodor! Hodor. Hodor hodor hodor. Hodor. Hodor hodor - hodor... Hodor hodor HODOR hodor, hodor hodor? Hodor. Hodor hodor - hodor, hodor. Hodor hodor. Hodor. Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor - hodor - hodor hodor! Hodor, hodor. Hodor. Hodor, hodor... Hodor hodor hodor - hodor?! </p>

                    <p>Hodor hodor - hodor; hodor hodor - hodor; hodor hodor?! Hodor, hodor. Hodor. Hodor, hodor hodor hodor hodor hodor. Hodor. Hodor hodor - hodor; hodor hodor, hodor. Hodor hodor. Hodor. Hodor, hodor. Hodor. Hodor, hodor - hodor hodor hodor, hodor. Hodor hodor? </p>

                    <p>Hodor! Hodor hodor, HODOR hodor, hodor hodor, hodor, hodor hodor. Hodor hodor; hodor hodor... Hodor hodor hodor - hodor, hodor, hodor hodor. Hodor hodor, hodor. Hodor hodor. Hodor. Hodor hodor - hodor - hodor, hodor, hodor hodor. </p>
                </div>
            </div>