Typography

H1 Heading

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H2 Heading

This has class="lead" in first p tag. Pellentesque habitant morbi senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

H3 Heading

H4 Heading

Unordered List

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Unordered List - Accent

add the class accent-list to the ul tag
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Ordered List

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Table

#	First	Last	Handle
1	Luke	Skywalker	@bluemilk
2	Leia	Organa	@general
3	Han Solo		@nerfherder

for this table style, add the class table to the table tag. For responsive tables, wrap the entire table in a div with the class table-responsive

Table - Striped

#	First	Last	Handle
1	Luke	Skywalker	@bluemilk
2	Leia	Organa	@general
3	Han Solo		@nerfherder

for this table style, add the classes table table-striped to the table tag. For responsive tables, wrap the entire table in a div with the class table-responsive

Buttons & Blockquotes

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, tempor sit amet, ante
—Jane Doe, Chief Operations Officer, Acme Inc.

Images & Media

Images are designed to be responsive across the site, however choosing the correct image size will help your pages overall performance. Below are some example images with sizes defined.

Responsive Media

Sometimes content will be served as an iframe or an embed (thinking about things like videos and maps).To make these features responsive, simply nest the content within a containing div with the class responsive-media, and remember to remove the height, width, and allowfullscreen attributes from your embed content.

Custom Grid

This is a custom grid system built by Engage Software for The IIF. The grid system in flex based, so when content is nested in a containing div with the class etg-row, with the direct children elements containing the class of etg-row--col, the content columns will format to even columns for each of their widths. Engage has also included helper classes for instances when columns widths aren't desired to be even (the other column will take on the remaining width). Included in the grid system are the following variations:

80% Width - add class etg-row--col__80
75% Width - add class etg-row--col__75
70% Width - add class etg-row--col__70

60% Width - add class etg-row--col__60
50% Width - add class etg-row--col__50
40% Width - add class etg-row--col__40

30% Width - add class etg-row--col__30
25% Width - add class etg-row--col__25
20% Width - add class etg-row--col__20

Three Column Auto Widths

Two Column Auto Widths

60% Column / 40% Column Grid

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. 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. 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.

Containers

H1 Title