The Weavr Kitchen Sink

This page is a demonstration all the styles and components of Weavr, Opportunity International's frontend framework. It is meant to both demonstrate everything that the framework contains as well as provide a visual test for its continued development.*

* Please note that the framework is still in development, so components may still change, or may be missing altogether.

Grid System

Standard gutter

.col-12

.n-col-12

.t-col-12

.m-col-12

.col-11

.n-col-9

.t-col-8

.m-col-8

.col-1

.n-col-3

.t-col-4

.m-col-4

.col-10

.n-col-9

.t-col-8

.m-col-8

.col-2

.n-col-3

.t-col-4

.m-col-4

.col-9

.n-col-7

.t-col-8

.m-col-8

.col-3

.n-col-5

.t-col-4

.m-col-4

.col-8

.n-col-6

.t-col-4

.m-col-5

.col-4

.n-col-6

.t-col-8

.m-col-7

.col-7

.n-col-9

.t-col-10

.m-col-8

.col-5

.n-col-3

.t-col-2

.m-col-4

.col-6

.n-col-5

.t-col-6

.m-col-6

.col-6

.n-col-7

.t-col-6

.m-col-6

.col-5

.n-col-6

.t-col-7

.m-col-4

.col-4

.n-col-3

.t-col-3

.m-col-4

.col-3

.n-col-3

.t-col-2

.m-col-4

.col-4

.n-col-6

.t-col-4

.m-col-6

.col-4

.n-col-4

.t-col-4

.m-col-6

.col-4

.n-col-2

.t-col-4

.m-col-12

.col-3

.n-col-4

.t-col-6

.m-col-7

.col-3

.n-col-3

.t-col-6

.m-col-5

.col-3

.n-col-3

.t-col-6

.m-col-5

.col-3

.n-col-2

.t-col-6

.m-col-7

.col-2

.n-col-3

.t-col-4

.m-col-4

.col-2

.n-col-3

.t-col-4

.m-col-4

.col-2

.n-col-3

.t-col-4

.m-col-4

.col-2

.n-col-3

.t-col-12

.m-col-12

.col-2

.n-col-4

.t-col-12

.m-col-12

.col-2

.n-col-8

.t-col-12

.m-col-12

.col-1

.n-col-4

.t-col-4

.m-col-4

.col-1

.n-col-4

.t-col-4

.m-col-4

.col-1

.n-col-4

.t-col-4

.m-col-4

.col-1

.n-col-3

.t-col-12

.m-col-12

.col-1

.n-col-3

.t-col-12

.m-col-4

.col-1

.n-col-3

.t-col-12

.m-col-4

.col-1

.n-col-3

.t-col-12

.m-col-4

.col-1

.n-col-2

.t-col-12

.m-col-6

.col-1

.n-col-2

.t-col-12

.m-col-6

.col-1

.n-col-2

.t-col-12

.m-col-3

.col-1

.n-col-3

.t-col-12

.m-col-3

.col-1

.n-col-3

.t-col-12

.m-col-6

Large gutter

.col-12

.n-col-12

.t-col-12

.m-col-12

.col-8

.n-col-8

.t-col-9

.m-col-12

.col-4

.n-col-4

.t-col-3

.m-col-12

.col-6

.n-col-6

.t-col-6

.m-col-6

.col-6

.n-col-3

.t-col-6

.m-col-6

.col-4

.n-col-5

.t-col-6

.m-col-12

.col-4

.n-col-5

.t-col-3

.m-col-6

.col-4

.n-col-2

.t-col-3

.m-col-6

Small gutter

.col-12

.n-col-12

.t-col-12

.m-col-12

.col-8

.n-col-8

.t-col-9

.m-col-12

.col-4

.n-col-4

.t-col-3

.m-col-12

.col-6

.n-col-6

.t-col-6

.m-col-6

.col-6

.n-col-3

.t-col-6

.m-col-6

.col-4

.n-col-5

.t-col-6

.m-col-12

.col-4

.n-col-5

.t-col-3

.m-col-6

.col-4

.n-col-2

.t-col-3

.m-col-6

No gutter

.col-12

.n-col-12

.t-col-12

.m-col-12

.col-8

.n-col-8

.t-col-9

.m-col-12

.col-4

.n-col-4

.t-col-3

.m-col-12

.col-6

.n-col-6

.t-col-6

.m-col-8

.col-6

.n-col-6

.t-col-6

.m-col-4

.col-4

.n-col-6

.t-col-8

.m-col-12

.col-4

.n-col-6

.t-col-4

.m-col-6

.col-4

.n-col-12

.t-col-12

.m-col-6

Nested grids

Gutter classes are only applied to a row's first-level columns, so you can safely nest rows inside of columns.

We won't sell your information, yadda yadda yadda.

About Opportunity International

Polaroid cliche Schlitz butcher selfies. Vice vinyl mixtape photo booth. Trust fund synth Shoreditch you probably haven't heard of them vinyl, literally small batch.

Containers

Container classes

Constrain the width of a container with .contained-[1...12], where the number refers to the number of columns the container should span in a grid-12 system with a max width of 1260px. For example, .contained-12 contrains the container to 1260px, .contained-6 constrains the container to 630px, .contained-3 constrains the container to 315px, etc. Container classes set the max-width property.

.contained-12

.contained-11

.contained-10

.contained-9

.contained-8

.contained-7

.contained-6

.contained-5

.contained-4

.contained-3

.contained-2

.contained-1

Centering containers

Center the container with .centered. Sets the margin-left and margin-right properties to auto, so it only works on block elements with a defined width. This is not to be confused with .align-center, which sets the text-align property.

Padding classes

You can quickly define the padding of a container with the following padding classes. Classes are named with multipliers of Weavr's gutter size (20px on desktop, 15px on mobile).

.padding-1x-4x .padding-1x-3x .padding-1x-2x .padding-1x .padding-1x-0

.padding-2x-4x .padding-2x-3x .padding-2x .padding-2x-1x .padding-2x-0

.padding-3x-4x .padding-3x .padding-3x-2x .padding-3x-1x .padding-3x-0

.padding-4x .padding-4x-3x .padding-4x-2x .padding-4x-1x .padding-4x-0

.padding-6x .padding-6x-5x .padding-6x-4x .padding-6x-3x .padding-6x-2x .padding-6x-1x .padding-6x-0

Margin classes

You can also quickly set the margin-top and margin-bottom properties of an element with the following classes:

.margin-top-4x, .margin-top-3x, .margin-top-2x, .margin-top-1x, .margin-top-0

.margin-bottom-4x, .margin-bottom-3x, .margin-bottom-2x, .margin-bottom-1x, .margin-bottom-0

Tables

Simple table

Datum 1	Datum 2	Datum 3	Datum 4
Datum 5	Datum 6	Datum 7	Datum 8
Datum 9	Datum 10	Datum 11	Datum 12
Datum 13	Datum 14	Datum 15

Table with header

Heading 1	Heading 2	Heading 3	Heading 4
Datum 1	Datum 2	Datum 3	Datum 4
Datum 5	Datum 6	Datum 7	Datum 8
Datum 9	Datum 10	Datum 11	Datum 12

Heading 1	Heading 2	Heading 3	Heading 4
Datum 1	Datum 2	Datum 3	Datum 4
Datum 5	Datum 6	Datum 7	Datum 8
Datum 9	Datum 10	Datum 11	Datum 12
Footer 1	Footer 2	Footer 3	Footer 4

Complex table

Has hidden cells, row headings, multiple rows in the table header, a table footer, and row separators.

	Loan Clients		Deposit Clients
	2013	2014	2013	2014
DR Congo	9,059	5,399	-	3,534
Ghana	194,600	210,821	459,515	534,002
Kenya	11,281	10,875	-	-
Malawi	59,710	48,032	483,590	668,459
Mozambique	11,020	10,733	64,051	72,571
Rwanda	39,038	34,121	115,599	175,421
Tanzania	9,312	5,594	-	-
Uganda	27,117	28,982	87,574	80,484
Colombia	11,052	10,203	16,795	25,816
Dominican Republic	17,532	24,033	-	37,646
Honduras	9,451	7,877	-	-
Nicaragua	17,531	14,107	-	-
Peru	2,216	2,566	-	-
Macedonia	6,823	6,921	8,438	23,526
Romania	1,965	1,713	-	-
Serbia	20,520	27,824	23,915	31,485
China	872	1,001	-	-
India	1,751,077	2,057,439	-	2,166,454
Indonesia	31,622	343,202	40,656	250,351
Philippines	661,808	596,586	58,440	52,467
Global	2,893,6060	3,448,029	1,358,573	4,122,216

Typography

Headings

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5

This is an H6

Subheadings and Superheadings

This is an H1 This is its subheading

This is a normal paragraph. Neutra tofu pour-over put a bird on it cold-pressed. Dreamcatcher keffiyeh Neutra 90's, raw denim pour-over 8-bit cred shabby chic direct trade pork belly PBR&B.

This is an H2 This is its subheading

This is a normal paragraph. Neutra tofu pour-over put a bird on it cold-pressed. Dreamcatcher keffiyeh Neutra 90's, raw denim pour-over 8-bit cred shabby chic direct trade pork belly PBR&B.

This is an H3 This is its subheading

This is a normal paragraph. Neutra tofu pour-over put a bird on it cold-pressed. Dreamcatcher keffiyeh Neutra 90's, raw denim pour-over 8-bit cred shabby chic direct trade pork belly PBR&B.

This is its superheading This is an H1

This is a normal paragraph. Neutra tofu pour-over put a bird on it cold-pressed. Dreamcatcher keffiyeh Neutra 90's, raw denim pour-over 8-bit cred shabby chic direct trade pork belly PBR&B.

This is its superheading This is an H2

This is a normal paragraph. Neutra tofu pour-over put a bird on it cold-pressed. Dreamcatcher keffiyeh Neutra 90's, raw denim pour-over 8-bit cred shabby chic direct trade pork belly PBR&B.

This is its superheading This is an H3

This is a normal paragraph. Neutra tofu pour-over put a bird on it cold-pressed. Dreamcatcher keffiyeh Neutra 90's, raw denim pour-over 8-bit cred shabby chic direct trade pork belly PBR&B.

Headings large and small

Some heading tags (<h1>, <h2>, <h3>) can be modified with .large and .small. They can be used to preserve heirarchy while modifying font size for visual impact.

This is a large H1This is its subheading

This is a normal H1This is its subheading

This is a small H1This is its subheading

This is a large H2This is its subheading

This is a normal H2This is its subheading

This is a small H2This is its subheading

This is a large H3This is its subheading

This is a normal H3This is its subheading

This is a small H3This is its subheading

Bordered headings

Add .bordered to heading tags to add a border. The heading is also set to display: inline-block.

Heading

Paragraphs

This is a large paragraph, using .large. Stumptown Thundercats before they sold out Tumblr, asymmetrical 3 wolf moon literally butcher farm-to-table wolf cronut. Roof party XOXO banjo letterpress, kale chips retro authentic meggings readymade raw denim whatever.

This is a normal paragraph. Neutra tofu pour-over put a bird on it cold-pressed. Dreamcatcher keffiyeh Neutra 90's, raw denim pour-over 8-bit cred shabby chic direct trade pork belly PBR&B.

This is a small paragraph, using .small. Wolf vegan crucifix, fashion axe 3 wolf moon leggings Banksy hella authentic chia Echo Park kogi heirloom. Raw denim yr migas locavore pickled, retro Marfa cray disrupt 8-bit 90's four dollar toast. Truffaut chillwave ugh shabby chic migas, art party Marfa.

Links

This paragraph contains a link.

Here's a link on a dark gray background.

Here's a link on a light gray background.

Here's a link on a purple background.

Here's a link on a teal background.

Here's a link on an orange background.

Here's a link on a pink background.

Here's a link on a green background.

Unordered Lists

Basic <ul>

Unordered list item 1
Unordered list item 2
Unordered list item 3

Nested <ul>

Unordered list item 1
Unordered list item 2
Unordered list item 3
- Nested list item 1
- Nested list item 2
- Nested list item 3
  - Very nested list item 1
  - Very nested list item 2
  - Very nested list item 3

<ul> with .no-list-style

Unordered list item 1
Unordered list item 2
Unordered list item 3

<ul> with .inline

Unordered list item 1
Unordered list item 2
Unordered list item 3

Ordered Lists

Basic <ol>

Ordered list item 1
Ordered list item 2
Ordered list item 3

Nested <ol>

Ordered list item 1
Ordered list item 2
Ordered list item 3
1. Nested list item 1
2. Nested list item 2
3. Nested list item 3
  1. Very nested list item 1
  2. Very nested list item 2
  3. Very nested list item 3

<ol> with .no-list-style

Ordered list item 1
Ordered list item 2
Ordered list item 3

<ol> with .inline

Unordered list item 1
Unordered list item 2
Unordered list item 3

Blockquotes

Occupy 3 wolf moon gentrify, hashtag Marfa Helvetica taxidermy cold-pressed distillery High Life selvage scenester street art bicycle rights kogi. IPhone Intelligentsia 3 wolf moon, flexitarian fashion axe Portland kitsch.
Citation goes here

Blockquote without borders

Sustainable kale chips brunch, squid distillery vegan meggings street art 8-bit. Tumblr shabby chic fingerstache, Echo Park trust fund Thundercats direct trade street art mustache ugh umami kitsch normcore.
Citation goes here

Multiple blockquotes in a row

Whatever beard hashtag, lomo before they sold out tote bag fashion axe flexitarian direct trade biodiesel.
Citation goes here

Blue Bottle deep v Pinterest, street art sriracha master cleanse Brooklyn bicycle rights locavore you probably haven't heard of them semiotics cold-pressed. Lumbersexual High Life Etsy DIY single-origin coffee Marfa, tofu jean shorts Thundercats cliche slow-carb retro. Sustainable kale chips brunch, squid distillery vegan meggings street art 8-bit.
Citation goes here

Large blockquotes with `.large`

Blue Bottle deep v Pinterest, street art sriracha master cleanse Brooklyn bicycle rights locavore you probably haven't heard of them semiotics cold-pressed. Lumbersexual High Life Etsy DIY single-origin coffee Marfa, tofu jean shorts Thundercats cliche slow-carb retro. Sustainable kale chips brunch, squid distillery vegan meggings street art 8-bit.
Citation goes here

Blockquotes against colored backgrounds

Blue Bottle deep v Pinterest, street art sriracha master cleanse Brooklyn bicycle rights locavore you probably haven't heard of them semiotics cold-pressed. Lumbersexual High Life Etsy DIY single-origin coffee Marfa, tofu jean shorts Thundercats cliche slow-carb retro. Sustainable kale chips brunch, squid distillery vegan meggings street art 8-bit.
Citation goes here

Body copy and Asides

Vegan aesthetic quinoa McSweeney's, gentrify photo booth Blue Bottle Tumblr meh iPhone hoodie. Banjo salvia semiotics messenger bag small batch literally. Retro pickled distillery normcore, gastropub letterpress Portland swag. Put a bird on it mlkshk chia selfies health goth, listicle Vice ugh asymmetrical literally fashion axe photo booth cardigan. Put a bird on it four loko irony lomo farm-to-table mixtape church-key, gentrify McSweeney's flexitarian +1 pug Carles aesthetic Williamsburg. Deep v Williamsburg actually slow-carb you probably haven't heard of them, DIY seitan irony Echo Park. 8-bit swag cardigan sartorial, tilde slow-carb food truck.

Biodiesel ethical craft beer Bushwick DIY. Banksy cray American Apparel jean shorts, church-key stumptown leggings keytar VHS banjo. Vice pop-up locavore, chillwave ugh whatever normcore next level tilde leggings. YOLO VHS taxidermy fap letterpress kitsch tattooed occupy, wayfarers pork belly Portland pour-over cray drinking vinegar. Occupy direct trade yr Truffaut seitan. Church-key master cleanse mustache vegan VHS. Banksy chambray retro, roof party banh mi actually sartorial tote bag irony readymade chia.

Pinterest banh mi normcore Truffaut, aesthetic stumptown asymmetrical High Life hashtag trust fund iPhone lomo mustache. Bicycle rights fanny pack brunch letterpress Neutra. Odd Future wolf chia flannel. You probably haven't heard of them distillery tilde, four loko YOLO Intelligentsia meditation High Life semiotics Kickstarter cred gluten-free. Echo Park meggings meh, fixie DIY health goth cliche Pinterest lumbersexual pour-over. Bicycle rights plaid biodiesel street art, irony semiotics shabby chic Echo Park you probably haven't heard of them PBR. Synth hella blog, mustache hashtag selfies Austin shabby chic brunch Tumblr fap health goth Vice vinyl.

View more examples of body copy layout

Alignment

This paragraph is left-aligned with .align-left. Paragraphs are left-aligned by default, so the class is really only necessary when you need to override the alignment inherited from a containing element.

This paragraph is center-aligned with .align-center.

This paragraph is right-aligned with .align-right.

Transformation

Text can be transformed to uppercase with .transform-uppercase. For elements that are already styled with the CSS text-transform property (such as headings <h1>-<h3>), they can be reset with .transform-normal. For example:

Look at this heading

<h2>

Look at this heading

<h2 class="transform-normal">

Font family

You can apply Opportunity's primary and secondary fonts to an element with the classes .brand-font-primary and .brand-font-secondary. Most elements are styled by default with the primary font (Proxima Nova), but there may be cases when you want to override an element that is set to the secondary font (Times New Roman italic).

Proxima Nova .brand-font-primary

Times New Roman italic .brand-font-secondary

Everything together

Opportunity International

About Us

We provide access to financial solutions empowering people living in poverty to transform their lives, their children's futures and their communities.

Our History

Opportunity International was founded in 1971 by two visionary leaders who were inspired to take action by their experiences with people living in extreme poverty.

Al Whittaker, former president of Bristol Myers International Corporation in the U.S., and Australian entrepreneur David Bussau sought a solution that would help people transform their lives and sustain their success.

Opportunity International was one of the first nonprofit organizations to recognize the benefits of microfinance – financial services for low-income people – in developing countries.

It is a great privilege to partner with Opportunity International in our effort to alleviate hunger in Malawi and Mozambique. Opportunity's technology driven microfinance services help create a sustainable framework to increase food production and bring access to financing for thousands of hunger-afflicted people.
Robert W. Lane, Retired CEO, Deere & Company

Mission, Vision & Motivation

Mission

By providing financial solutions and training, we empower people living in poverty to transform their lives, their children’s futures and their communities.

Vision

Our vision is a world in which all people have the opportunity to achieve a life free from poverty, with dignity and purpose.

Motivation

We respond to Jesus Christ’s call to love and serve the poor. We seek to emulate the Good Samaritan, whose compassion crossed ethnic groups and religions. We serve all people regardless of race, faith, ethnicity and gender.

Values

Commitment to our clients and their transformation.
Humility a spirit of serving in all we do.
Respect 360 degrees of consideration and teamwork.
Integrity living our values with transparency and consistency.
Stewardship accountability, innovation, and urgency.
Transformation our ultimate goal in ourselves and others.

Opportunity International provides access to savings, small business loans, insurance and training to over 5 million people working their way out of poverty in the developing world. Clients in more than 20 countries use these financial services to start or expand a business, provide for their families, create jobs for their neighbors and build a safety net for the future. Opportunity International is a 501(c)(3) non-profit and serves all people regardless of race, religion, ethnicity or gender.

Colors

Background color

.brand-purple-bg

.brand-light-purple-bg

.brand-teal-bg

.brand-light-teal-bg

.brand-orange-bg

.brand-light-orange-bg

.brand-pink-bg

.brand-light-pink-bg

.brand-green-bg

.brand-dark-gray-bg

.brand-gray-bg

.brand-offwhite-bg

Text color

Pink
.brand-pink

Purple
.brand-purple

Light Purple
.brand-light-purple

Teal
.brand-teal

Orange
.brand-orange

Green
.brand-green

Gray
.brand-gray

Offwhite
.brand-offwhite

Images and Video

Responsive videos

Wrap an iframe video embed with .flex-video to make it responsive.

Block Images

Add .block to image tags to make them responsive block elements that fill the width of their container.

Background Images and Overlays

To add a background image to a <div>, add .bg-image and the background-image declaration in an inline style attribute.

You can add a color overlay by adding .overlay and a background color class (e.g. .brand-purple-bg).

.bg-image.brand-purple-bg

.bg-image.brand-teal-bg

.bg-image.brand-pink-bg

.bg-image.brand-orange-bg

.bg-image.brand-green-bg

.bg-image.brand-dark-purple-bg

.bg-image.brand-white-bg

.bg-image.brand-offwhite-bg

.bg-image.brand-dark-gray-bg

To add content over the image, nest a <div> with .content-overlay. Add one or a combination of the following modifiers to position the overlaid content: .top, .middle, .bottom, .left, .right.

Quinoa street art master cleanse, pickled deep v mlkshk fingerstache asymmetrical.
Hipster Ipsum

You can also make the background overlay a gradient by adding .gradient to <div class="overlay">.

This heading is over an imageand it has a subheading

CTA button 1 CTA button 2

Image with caption

Use the <figure> element with <figcaption> to create an image with a caption. Image is automatically styled as a block element at 100% width, so no need to add the .block class.

Jean shorts brunch banjo organic. Pinterest food truck single-origin coffee bespoke, 3 wolf moon selfies kickstarter plaid trust fund.

Buttons

Colors

Pink

Purple

Teal

Orange

Green

Dark gray

Gray

Offwhite

White

Inline buttons

Inline buttons. One of each tag (<a>, <input type="submit">, <input type="button">, <button>)

Pink inline button

Block buttons

Block buttons. One of each tag (<a>, <input type="submit">, <input type="button">, <button>)

Pink block button

Ghost buttons

All the color variations

Pink

Purple

Teal

Orange

Green

Dark gray

Gray

Offwhite

White

Inline ghost buttons. One of each tag (<a>, <input type="submit">, <input type="button">, <button>)

Pink inline ghost button

Block ghost buttons. One of each tag (<a>, <input type="submit">, <input type="button">, <button>)

Pink block ghost button

Button sizes

Large buttons. One of each tag (<a>, <input type="submit">, <input type="button">, <button>)

Large button

Normal buttons. One of each tag (<a>, <input type="submit">, <input type="button">, <button>)

Normal button

Small buttons. One of each tag (<a>, <input type="submit">, <input type="button">, <button>)

Small button

Disabled buttons

Normal button

Tooltips

Hover here for the default tooltip.

This tooltip is at the bottom.

Check out this teal tooltip

This element triggers a tooltip that is 100% of its width.

Loading Indicator

Color indicator:

Monochromatic indicator:

Modals

The lightweight OI Modals library provides responsive modals built on the Weavr framework. Check out the demo or read the documentation for more options and details.

Normal Modal Medium Modal Large Modal X-large Modal

Off-canvas Menus

The OI OffCanvas library provides offcanvas menus built on the Weavr framework. Check out the repo in GitHub for more options and details.

Icons

Symbols

.icon-menu
Unicode: \e616

.icon-mail
Unicode: \e615

.icon-plus
Unicode: \e613

.icon-cross
Unicode: \e608

.icon-checkmark
Unicode: \e607

.icon-play
Unicode: \e60a

.icon-user
Unicode: \e609

.icon-location
Unicode: \e61b

.icon-resize-enlarge
Unicode: \e61d

.icon-search
Unicode: \e61f

.icon-credit-card
Unicode: \e802

.icon-phone
Unicode: \e800

.icon-cart
Unicode: \e801

.icon-dollar-sign
Unicode: \e803

Arrows

.icon-arrow-left
Unicode: \e60d

.icon-arrow-right
Unicode: \e60c

.icon-arrow-up
Unicode: \e60b

.icon-arrow-down
Unicode: \e612

.icon-arrow-left-small
Unicode: \e60e

.icon-arrow-right-small
Unicode: \e612

.icon-arrow-up-small
Unicode: \e611

.icon-arrow-down-small
Unicode: \e610

.icon-nub-left
Unicode: \e61a

.icon-nub-right
Unicode: \e619

.icon-nub-up
Unicode: \e618

.icon-nub-down
Unicode: \e617

.icon-facebook
Unicode: \e601

.icon-vimeo
Unicode: \e606

.icon-twitter
Unicode: \e600

.icon-pinterest
Unicode: \e603

.icon-addthis
Unicode: \e614

.icon-tumblr
Unicode: \e604

.icon-linkedin
Unicode: \e605

.icon-googleplus
Unicode: \e602

.icon-instagram
Unicode: \e61c

.icon-youtube
Unicode: \e61e

The Weavr Kitchen Sink

Grid System

Standard gutter

Large gutter

Small gutter

No gutter

Nested grids

Subscribe

Containers

Container classes

Centering containers

Padding classes

Margin classes

Tables

Simple table

Table with header

Table with footer

Complex table

Typography

Headings

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5

This is an H6

Subheadings and Superheadings

This is an H1 This is its subheading

This is an H2 This is its subheading

This is an H3 This is its subheading

This is its superheading This is an H1

This is its superheading This is an H2

This is its superheading This is an H3

Headings large and small

This is a large H1This is its subheading

This is a normal H1This is its subheading

This is a small H1This is its subheading

This is a large H2This is its subheading

This is a normal H2This is its subheading

This is a small H2This is its subheading

This is a large H3This is its subheading

This is a normal H3This is its subheading

This is a small H3This is its subheading

Bordered headings

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Paragraphs

Links

Unordered Lists

Ordered Lists

Blockquotes

Blockquote without borders

Multiple blockquotes in a row

Large blockquotes with .large

Blockquotes against colored backgrounds

Body copy and Asides

Alignment

Transformation

Look at this heading

Look at this heading

Font family

Everything together

Opportunity International

About Us

Our History

Mission, Vision & Motivation

Large blockquotes with `.large`