menu

DESIGN SYSTEM

Call to Actions

BUTTONS

To make the button styling consistent, use the classes in these examples. All the colour names can be added to the classes bg-, button- and hover-.

Default Button

font-family: "Gotham", Arial, Helvetica, sans-serif
font-weight: 500
font-size: 14px
letter-spacing: 0.10em
padding: 1rem 2rem
border-radius: 25px
background-color: Compassion Blue
color: white


    <a class="button" href="">Link</a>
    <button class="button">Button</button>
    
PRIMARY BUTTONS

Our Primary Buttons are used for the primary CTA of the page. These are buttons with background colours that are included in the colour palette. The default button colour is Compassion Blue. To create primary button with a different colour, use the class “button” and add class “bg—*colour*”. To change the hover background colour, use class "hover-*colour*"


    <a class="button" href="">Sponsor a child</a>
    <a class="button bg-tiffany-teal hover-embarrassed-salmon" href="">Give Now</a>
    <a class="button bg-toasted-canary hover-shady-navy" href="">Give Now</a>
    <a class="button bg-embarrassed-salmon hover-cold-rhino-blue" href="">Give Now</a>
    <a class="button bg-neighbors-pool hover-gumtree-blue" href="">Give Now</a>
    <a class="button bg-sunburnt-watermelon hover-baby-penguin-grey" href="">Give Now</a>
    

When using white primary button on colour or image backgrounds, add a txt-*colour* class to the button to override the default text colour which is white


    <a class="button bg-white txt-compassion-blue hover-shady-navy" href="">Give Now</a>
    <a class="button button-secondary button-white hover-shady-navy" href="">Give Now</a>
    
SECONDARY BUTTONS

Our Secondary Buttons are used for the secondary CTA of the page. These are buttons with transparent background and colour borders. To create secondary button, use the class “button-secondary” and add class “btn—*colour*”


    <a class="button button-secondary" href="">Sponsor a child</a>
    <a class="button button-secondary button-tiffany-teal hover-tiffany-teal" href="">Give Now</a>
    <a class="button button-secondary button-toasted-canary hover-toasted-canary" href="">Give Now</a>
    <a class="button button-secondary button-embarrassed-salmon hover-embarrassed-salmon" href="">Give Now</a>
    <a class="button button-secondary button-neighbors-pool hover-neighbors-pool" href="">Give Now</a>
    <a class="button button-secondary button-sunburnt-watermelon" href="">Give Now</a>
    
DISABLED BUTTONS

    <button class="button bg-tiffany-teal" disabled>Give Now</button>
    <button class="button button-secondary button-embarrassed-salmon" disabled>Give Now</button>
    
BUTTONS WITH ICONS

    <a class="button bg-embarrassed-salmon icon-write" href="">Write a letter</a>
    <a class="button-crumb" href=""> <i class="material-icon button-icon">arrow_back</i> Back to donate </a>
    <a class="button-crumb" href=""> Next page <i class="material-icon button-icon">arrow_forward</i> </a>
    
SOCIAL MEDIA BUTTONS

The social media buttons are in a partial - partials/social_share. See example below on how to call this partial


    <%= partial "partials/social_share" %>