Demonstration Pages List

We built a few demonstration pages to ensure that everything worked OK. All of the links below open in a new window. We encourage you to use your browser Inspect Tools or View Source to see how we have built these pages if you want to see how we did this.

If you aren't sure which variant to use, start with the first variant, and if you run into issues, go to the second variant to see if that fixes your issue. If that doesn't work, go to the third variant.

Using the 'ilw-font' variant (preferred)

This is used if you can ensure that all of your content can be enclosed in an ilw-content tag and you want to manage the left/right margins through components. This will change your font to the Illinois-preferred fonts but leave everything else as normal. This is the preferred option. Using this option, you will control your content using width="page" or just manually control the width of your content.

• Sample Home Page: A sample home page using the components.
• Sample Landing Page: A landing or top level page using the components.
• Sample Body Page: A sample body page using the components.
• Sample Listing Page: A group of cards in a grid, meant to display a group of research sites. Includes pagination.

Using the 'ilw-font ilw-margin' variant (second preference)

This is used if you can ensure that all of your content can be enclosed in an ilw-content tag and you want the page itself to handle left/right margins. This will change your font to the Illinois-preferred fonts but leave everything else as normal. This is the preferred option. Using this option, you will control your content using width="auto" or width="full".

• Sample Home Page: A sample home page using the components.
• Sample Landing Page: A landing or top level page using the components.
• Sample Body Page: A sample body page using the components.
• Sample Listing Page: A group of cards in a grid, meant to display a group of research sites. Includes pagination.

Using the 'ilw-format ilw-margin' variant (third preference)

This is used if you cannot ensure that all of your content can be enclosed in an ilw-content tag and you want the page to handle left/right margins. This will do the best it can to map all the text to the correct font, color, and size. It's not going to be perfect, and we recommend only using this if you really need to.

• Sample Home Page, Alternate: A sample home page using the components.
• Sample Landing Page: A landing or top level page using the components.
• Sample Body Page, Alternate: A sample body page using the components.
• Sample Listing Page, Alternate: A group of cards in a grid, meant to display a group of research sites. Includes pagination.

If you have other ideas for sample pages, let us know and we can create them.