menu

DESIGN SYSTEM

Components

These are the most comonly used components in the website. The aim of this guide is to make the styling of these components consistent across the website.

80/20 DIAGRAM

For every $1 donated

80%

Program development and delivery

20%

Administration and fundraising costs


    <%= partial "partials/80-20-modal">
    
NEWSLETTER SIGNUP

    <%= partial "partials/email_signup_stripe3-4">
    
ACCORDIONS

Exapanding FAQ Accordions is a partial: partials/faqs/expanding_related_faqs


    <%= partial "partials/faqs/expanding_related_faqs", :locals => { :tag_name => "Critical Needs" } %>
    
CARDS

Article Cards are used for multiple column blog articles and related stories. These cards are to be contained in a flexbox-row. The related stories should be center aligned to keep the columns in the middle if there's not enough articles to fill the whole row. Follow the html structure and class names in this example to make the styling consistent.

To make an Article Card add class name article-card to every article, class name thumbnail to each anchor tag containing the image, add class name article-title to each h3 tags and add class name read-more to each anchor tag that contains "Read More". See example html structure below.

10 SEP, 2019

The Story Behind Shakul's Striking Eyes

Shakul was born with a rare genetic condition in Uganda which means he looks a little different. Without access to a doctor, his parents didn’t understand the reason for his appearance and abandoned him shortly after birth. But God had a... READ MORE

06 JUN, 2018

Maria's Story: I know I will rebuild my life with God's help

“My heart still cries every time I look at my children. But today I know that, despite all my worries, God is taking care of me.” Maria, 24, a local of Santa Inês in Brazil’s northeast, found out she was... READ MORE

15 MAY, 2017

When Looking Different Makes You Fear For Your Life

In addition to the difficulties of growing up in poverty, Yona was born with a disease which makes his white skin stand out in stark contrast to his friends in Tanzania. It causes severe medical issues, but worse... READ MORE


    <div class="flexbox-row center-xs">
        <div class="article-card col-xs-12 col-md-4">
            <a class="thumbnail" href="" style="background-image: url(//images.ctfassets.net/c2js6hi58pvj/1nPClR5RPCQaSWimGw0Giq/9214d69a687b3be3cef1d996f239f467/CC-TZ0811_HopeStory-10_edit_WEB.jpg)">
                <div class="date">15 MAY, 2017</div>
            </a>
            <h3 class="article-title">
                <a href="/blog/when-looking-different-makes-you-fear-for-your-life.html">When Looking Different Makes You Fear For Your Life</a>
            </h3>
            <p>
                In addition to the difficulties of growing up in poverty, Yona was born with a disease which makes his white skin stand out in stark contrast to his friends in Tanzania...
                <a href="" class="read-more">READ MORE</a>
            </p>
        </div>
    </div>
    

Vertical Cards can be used to show content previews. These cards are to be contained in grid columns.

CALL OUT

Short Title

SUBTITLE

So, you want to be a great rock climber? What a decision. Proud of you. The first thing you’re going to want to do is watch Free Solo on Netflix.

Learn More

Short Title

SUBTITLE

Finished Free Solo? Well done! Now, wipe the sweat off your brow, unfurl your clenched-up fingers and repeat after me: “I will not climb El Capitan unassisted.” Okay?

Learn More

Short Title

SUBTITLE

To follow in Alex Honnold’s freakish footsteps, go to Pulse Climbing and ask to attend ‘Climbing School’. It’s very important you use this exact phrase. Trust me, they'll know exactly what you're talking about.

Learn More

    <div class="card card-vertical">
        <div class="card-image-container">
            <img class="card-image" alt="" src="https://placehold.it/400x350" title="" />
            <div class="card-title-container">
                <h2 class="card-short-title txt-white serif">Short Title</h2>
                <h5 class="card-subtitle txt-white">SUBTITLE</h5>
            </div>
        </div>
        <div class="card-body">
            <p>
                So, you want to be a great rock climber? What a decision. Proud of you. 
                The first thing you’re going to want to do is watch Free Solo on Netflix. 
            </p>
            <a class="button button-secondary button-tiffany-teal hover-tiffany-teal" href=“”>
                Learn More
            </a>
        </div>
    </div>
    

Horizontal Cards can be used to show content previews. These cards can occupy the whole row.

CALL OUT

Short Title

Subtitle

So you went to Climbing School and called instructor Dylan ‘Jason’ the whole time? Don’t worry, I did too! And really, it’s his own fault for not correcting us, you know?


    <div class="card card-horizontal row" style="max-width: 1400px;">
        <div class="col-xs-12 col-md-4 card-image-container">
            <img class="card-image" alt="" src="https://placehold.it/400x350">
        </div>
        <div class="col-xs-12 col-md-8 card-body">
            <div class="card-callout bg-toasted-canary txt-white">CALL OUT</div>
            <h1 class="card-short-title">Short Title</h1>
            <h4 class="card-subtitle">Subtitle</h4>
            <p>
                So you went to Climbing School and called instructor Dylan ‘Jason’ the whole time? 
                Don’t worry, I did too! And really, it’s his own fault for not correcting us, you know? 
            </p>
            <div class="card-ctas">
                <a class="button bg-tiffany-teal" href="">GIVE NOW</a>
                <a class="button button-secondary button-tiffany-teal" href="">LEARN MORE</a>
            </div>
        </div>
    </div>