Typography

The different text sizes used throughout the site.
H1

This is a heading.

h2

This is a heading.

h3

This is a heading.

h4

This is a heading.

h5
This is a heading.
h6
This is a heading.
Large Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
SMALL PARAGRAPH
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
QUOTE

It is not the strongest of the species that survives, nor the most intelligent, but the one most responsive to change.

Charles Darwin
LIST
  • This is a list element.
  • Spice it up with an emoji bullet point.
  • Control spacing between the items.
  • Or clear the styles and get a basic HTML list.

Rich Text

Formatted rich text element used for long sections of text such as blog posts.
Link

This is a header two.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

I am a subheading level three.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A list of H4  breakpoints.

  • The smallest you should go is 490px is the small

  • Just above that, is the large phone and sub-tablet size at 768px.

  • When you are ready, the desktop size is generally somewhere at 1040px ish.
  • Last breakpoint should be 1440px.
  • When lists were cool, they were really cool.

More about this

[caption id="attachment_20" align="aligncenter" width="300"] A caption can go a long way.[/caption]

Buttons

The different types of buttons used throughout the website.
Light
Outline
Minimal
Grey
DisableD
Small Primary
Small light
small outline

Forms

Radio Star
Check it out
© Copyright 2024. All rights reserved.

Community Grant

Grants are given only to eligible organizations.

Contact Information

Enter the information of the person to be contacted.

I understand that grants are given to pre-selected, eligible organizations only.*

Send a Message

If you have any questions or comments, please don’t hesitate to reach out using the contact form. Please note, the Joy McCann Foundation does not accept unsolicited funding proposals or requests.

Financial Statements

Click the links below to view financial statements.