Web Implementation Guidelines Group Component Builder Information (v3+)

Creating a Page

Here are ten steps on how to build a webpage from scratch.

We recommend having a basic knowledge of HTML, but you definitely don't to "be a coder" to create a web page.

Create your HTML framework.

Starting with a blank HTML page, you first need to create your head and body tags. If you want a template, use the generic HTML template listed below.

Resource Links

Create the page skeleton: ilw-page

One of the problems with version 2 is that each component didn't have a way to work with other components. To fix this, we created a Page component that can house all the other components. This includes the brand header and footer component.

Resource Links

Add the brand header and footer: ilw-header, ilw-footer

Add the header and footer. We recently moved this from Strategic Communications to the WIGG toolkit.

Resource Links

Create a title: ilw-hero, ilw-page-title, ilw-content

All pages need an h1 that should match the page title. You can add this with:

  • Hero: a large text with an image and buttons. Use this if you have a strong opening image and/or an immediate call to action.
  • Page Title: a large text with a smaller image. Use this if you are creating a main page, but you don't have a strong image.
  • Content with an h1: a simple title. Use this if you are building pages that contain a lot of text.

Resource Links

Add in-page navigation: ilw-breadcrumbs, ilw-section-nav, ilw-back-to-top

The page has a menu, but you may want to create some types of in-page navigation. Some examples are:

  • Breadcrumbs: a way to show where this page is in relationship to parent pages. This is a list of pages on the top of the page or under the page title.
  • Section Navigation: a way to show where this page is in relationship to sibling pages and child pages. This is a list of pages on the left-side of the page. You can add this to the left-hand side by using the ilw-columns component.
  • Back To Top: a way to move the focus to the top of the screen, useful for mobile views or long pages.

Resource Links

Add calls to action: ilw-call-to-action, ilw-button

What do you want the user to do? Do you want them to enroll in a course, apply, join a group? You have a few options.

  • Button: this class will style your link to look like a button and make it more inviting.
  • Call to Action: this component will create a section that grabs attention and directs the user to a specific action.

Resource Links

Add text: ilw-content, ilw-columns

You will add text to your page. This is mainly with the Content component, and you can break up the text into columns using the Columns component.

Resource Links

Break up text with highlights, video, quotes, and other impactful statements: ilw-video, ilw-statistic, ilw-quote, ilw-content, ilw-columns, ilw-card, ilw-tabs

Text on its own can be daunting -- you don't want a wall of text. To break this up, you have several options:

  • Video: this component will auto-size your video.
  • Statistics: this component will display some statistics in a large format. You can have several of these in columns using the Column component.
  • Quotes: this component will display a quote in a large format.
  • Introduction and Ledes: the Content component with the Introduction or Lede option will create a larger format.
  • Features: you can break up text by putting a column group in a different color, and then put an impactful picture on one side and text on the other. If you do this, you can use the Content component with the Inset option.
  • Cards: this component will display an image or icon with some text. You can have several of these in columns using the Column component.
  • Tabs: this component will display a bunch of information in a compact yet attractive format.

Resource Links

Condense large blocks of information to smaller sections: ilw-accordion, ilw-grid, ilw-pagination

If you need to condense a lot of information into a smaller space, you have a few options:

  • Accordion: this component will take a heading and make it collapsable.
  • Grid: this component will take a large number of cards, statistics, or other information and put it in a grid form. This grid will expand to the length of the page.
  • Pagination: this component will list page numbers to create a pagination structure.

Resource Links

Clean up the page: ilw-spacer

At this point, you can clean up the page by adding space between items as needed. You can do this with the Spacer component.

Resource Links

Special pages

Some pages will be customized, like news items, profiles, program pages, courses, etc. We will be creating these templates as we get them from the WIGG design group.

Web Implementation Guidelines Group Component Builder Information (v3+) Create an issue with the new toolkit builder