Style Guide

Headings

Heading H1

Class name:
section__h1

Heading H2

Class name:
section__h2

Heading H3

Class name:
section__h3

Heading H4

Class name:
section__h4
Heading H5
Class name:
section__h5

Alternative Heading

Reusable component:
Alternative Heading

Text

At vero eos et accusamus et iusto odio dignissimos ducimus  qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Class name:
section__paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Class name:
section__paragraph   paragraph--highlight
At vero eos et accusamus et iusto odio dignissimos ducimus  qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Class name:
section__paragraph   paragraph--nomargin   paragraph--white

Buttons

Button Sun
Reusable component:
Button Sun
Button Sky
Reusable component:
Button Sky
Button Ocean
Reusable component:
Button Ocean
Button Donate
Reusable component:
Button Donate
Button Download
Reusable component:
Button Download
Button Small
Reusable component:
Button Small

Images

Class name:
img_cover
Class name:
img_cover   img_cover--left
Class name:
img_cover   img_cover--right
This is a caption.
Reusable component:
Image Caption

Grids

Class name:
grid-third-col
Class name:
grid-third-col grid-third-col--reversed
Class name:
grid-2-col
Class name:
grid-4-col
Class name:
grid-sidebar

Components

Accordian
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum consectetur magna vel aliquet. In ullamcorper, erat id vehicula elementum, mi ligula auctor purus, a tincidunt quam sem eget turpis. Aenean sagittis rhoncus ante, vitae volutpat nunc mollis sed. Sed at ex odio. Maecenas varius tristique augue, vitae pellentesque risus hendrerit at. Mauris commodo erat et odio dictum, vel consequat est viverra. Donec semper enim velit, id pulvinar est cursus sit amet. Aliquam rutrum, justo id interdum pulvinar, nulla sem hendrerit libero, quis ullamcorper mi leo eget nisi. Phasellus sagittis posuere sagittis. Maecenas tempor nisi quis nibh tempus, eget auctor leo imperdiet. Nulla eu hendrerit justo, non ornare erat. Sed at libero in lectus mollis ultricies et eget dolor.
Accordian
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum consectetur magna vel aliquet. In ullamcorper, erat id vehicula elementum, mi ligula auctor purus, a tincidunt quam sem eget turpis. Aenean sagittis rhoncus ante, vitae volutpat nunc mollis sed. Sed at ex odio. Maecenas varius tristique augue, vitae pellentesque risus hendrerit at. Mauris commodo erat et odio dictum, vel consequat est viverra. Donec semper enim velit, id pulvinar est cursus sit amet. Aliquam rutrum, justo id interdum pulvinar, nulla sem hendrerit libero, quis ullamcorper mi leo eget nisi. Phasellus sagittis posuere sagittis. Maecenas tempor nisi quis nibh tempus, eget auctor leo imperdiet. Nulla eu hendrerit justo, non ornare erat. Sed at libero in lectus mollis ultricies et eget dolor.
Accordian
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum consectetur magna vel aliquet. In ullamcorper, erat id vehicula elementum, mi ligula auctor purus, a tincidunt quam sem eget turpis. Aenean sagittis rhoncus ante, vitae volutpat nunc mollis sed. Sed at ex odio. Maecenas varius tristique augue, vitae pellentesque risus hendrerit at. Mauris commodo erat et odio dictum, vel consequat est viverra. Donec semper enim velit, id pulvinar est cursus sit amet. Aliquam rutrum, justo id interdum pulvinar, nulla sem hendrerit libero, quis ullamcorper mi leo eget nisi. Phasellus sagittis posuere sagittis. Maecenas tempor nisi quis nibh tempus, eget auctor leo imperdiet. Nulla eu hendrerit justo, non ornare erat. Sed at libero in lectus mollis ultricies et eget dolor.
Accordian
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum consectetur magna vel aliquet. In ullamcorper, erat id vehicula elementum, mi ligula auctor purus, a tincidunt quam sem eget turpis. Aenean sagittis rhoncus ante, vitae volutpat nunc mollis sed. Sed at ex odio. Maecenas varius tristique augue, vitae pellentesque risus hendrerit at. Mauris commodo erat et odio dictum, vel consequat est viverra. Donec semper enim velit, id pulvinar est cursus sit amet. Aliquam rutrum, justo id interdum pulvinar, nulla sem hendrerit libero, quis ullamcorper mi leo eget nisi. Phasellus sagittis posuere sagittis. Maecenas tempor nisi quis nibh tempus, eget auctor leo imperdiet. Nulla eu hendrerit justo, non ornare erat. Sed at libero in lectus mollis ultricies et eget dolor.
Reusable component:
Accordion
Tab 1
Tab 2
Tab 1
Tab 2
Reusable component:
Tabs
Reusable component:
Custom Video

Hero

Double-click this headline to edit the text.

Reusable component:
Page hero
Reusable component:
Donate slideout

Heading / Pattern / Content

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Button CTA
Reusable component:
Heading / Pattern / Content

Tertiary Sole Sponsorship

Become a sole sponsor from
$240
AUD / month
Provide higher education to a BSJ scholar and help them become one of Tanzania’s future leaders by sponsoring the full amount of their scholarship. Your sponsorship will cover the cost of tuition and exam fees, accommodation, learning resources and living expenses.

A sole-sponsorship covers 100% of a scholar's expenses.
Select options
Reusable component:
Sponsor Product Box
March 10, 2021
Style Guide
Read more
Reusable component:
Article Block